The Goal

After the resounding success with the ALTO Visuals website, Loucas reached out to me to help him develop his personal website. He loved the design we created for the ALTO Visuals site and so we chose to design his personal website based on the ALTO website.

‍

‍

The Project

Loucas came prepared with a rough idea of the sitemap we intended to build. Although the scale was much smaller than the original ALTO website, we decided it would be best to focus on creating a seamless user experience that leverage the highest quality image and video quality.

We started with an extensive Adobe XD document where we mocked up and prototyped the user flows. We made sure to establish the mobile design in XD prior to development because Loucas wanted to build this design mobile first, which is always a best practice during web design. Thus the desktop design was in turn influenced by the mobile design and led to an overall more cohesive look.

‍

‍

We spent a considerable amount of time iterating on the design and feel of the homepage. We wanted the landing page to be minimal but interactive. We played around with a custom cursor that interacted with clickable links and with a letter/logo animation using the letters of his name. We eventually decided a simple hover effect looked the cleanest.

‍

‍

From a development point of view, the site uses the tab component, plenty of hover effects, and two CMS collections for the projects and categories. This project taught me a lot about linking to a specific tab on a specific page using custom Javascript code. Pretty cool in my opinion.

‍

Next Steps

Per usual, I love working with Loucas and the ALTO Visuals team, so throwing this together was a blast. We have more projects in the works and I am excited to share them once they are completed.