Responses by Uncommon Studio.

Background: This site authentically represents the distinctive typographic and animated design work of artist Mat Voyce. We tailored the site for creative executives at brand teams and agencies seeking innovative and original solutions for their creative briefs and their clients.

Larger picture: Mat is constantly evolving; he most recently traveled across the globe as a keynote speaker. He always seeks new, better ways to express and represent him and his clients. Looking back at this growth, he realized that his website needed to step out of the templated options to define this new phase.

Design core: Like Mat’s work, this site is full of surprises and unexpected twists and turns. It features unique layouts for each section on the site—most notably on the Work pages—to highlight the distinctiveness of the projects. Personal is inspired by his Instagram grid, enabling him to share in an infinite canvas freely. Collabs is a selection of looping animations that incorporate other artists. Finally, Commercial showcases long-form case studies, enabling him to expand more into the work he completed for larger clients.

Favorite details: The meticulous attention to detail in features like custom cursors and smooth, tailored transitions contributes to a cohesive, engaging user experience. And the hover effect on page titles looks particularly lovely on F37’s Judge variable font.

Challenges: Ensuring that artwork exceeding the viewport height scaled appropriately during scrolling was a significant challenge, requiring precise coding and design adjustments to maintain visual integrity. Another challenge was the constant performance of the site: with so many animations, videos and transitions, special attention in this area was a priority.

Alternate paths: We would potentially aim for better communication across the team. With Mat in the United Kingdom and the team spread across Vietnam and Australia, it was naturally hard to keep everyone across every conversation. This sometimes led to scope changes not being documented properly.

Navigation structure: The nature of this site’s architecture meant that we had room to play. That’s why we implemented a mega menu along with Mat’s unique animation style. The lean approach to the navigation with no sub-nav items makes it very easy for users to find what they are looking for in no more than three clicks.

Special navigational features: Because we wanted the users to experience Mat’s work in different ways, we made the Work page exciting and fun. Each page has a very different layout as well as distinct ways to navigate them. Scrolls and hovers have a different action depending on which section you’re in.

Technology: This project was a deep dive into creative coding. We leveraged GSAP, React Three Fiber, the Strapi headless CMS and three.js to create an immersive experience.