(This project was done as a demonstration to showcase our Website Design and Development process.)

Lost with Lukes is the online persona of CHamoru photographer Luke Scott. We set out to reconstruct his current website, so as to make the entire visitor experience more modern and captivating. Our main goal for the project was to strengthen Luke Scott’s personal brand through the use of good interactive design and strategic use of his excellent photographs, so that visitors would be more inclined to reach out to him for business inquiries.

Website Design

During the Website Design process, we placed great importance not only on the desktop experience, but also on the mobile experience of the website visitor. And due to the fixed image ratio of Luke Scott’s photographs (some images were horizontal, some were vertical), we decided to use two design approaches: Adaptive design and Responsive design. Adaptive design is the use of multiple fixed layouts that adapt to the user’s screen size. Responsive design is the use of a single flexible layout that rearranges design elements to fit on the user’s screen size.

Hero Section: Adaptive Design

The Hero Section (the first thing that people see when they visit a website) was the most carefully planned section of the website. Visitors will immediately judge whether to stay or leave the website in 0.05 seconds (50 milliseconds). We chose to have an automatic slideshow of Luke Scott’s best photographs as the Hero Section, with links to his multiple social media accounts as well as the contact form. The challenge we faced was that although horizontal images looked fantastic on desktop and laptop displays, they looked very poorly on vertical mobile devices because they became very small. So we decided to use the Adaptive design approach and make two different Hero Sections; one for horizontal desktop display, one for vertical mobile display. 

Responsive Design

The rest of the website was created with the Responsive design approach. His About Section and Photo Gallery Section for example, were both responsive - having a single layout that was flexible in order to rearrange design elements depending on the screen size. This approach helped to create a more comfortable experience for the website visitor, no matter if they used a big screen desktop display or a small mobile device.

Additional User Interface (UI) Design

Aside from the Adaptive and Responsive design approach, standard UI design was also used to help visitors interact with the website. Strategic hover effects were put on all buttons and informative elements to make clickable elements more obvious. A custom pop-up contact form was created where visitors could easily send messages to Luke Scott, instead of having to go through email or other messaging platforms. Lastly, we decided to add a ‘Back to Top’ button which was fixed on the bottom left corner of the website, so that visitors could easily and quickly go back to the top where all the important links were located. 

The Final Outcome

The final results of our Website Design and Development service was a modern and captivating website aimed at strengthening Luke Scott’s personal brand. The website uses his excellent photographs in strategic ways in order to showcase his work more professionally, helping him to promote his business and network with other local creatives. 

(This case study was aimed towards our Website Design and Development process. To learn more about our Brand Identity Design process, read our Stanley Au Photography Case Study.)