Client

Visionnaire

Design Brief
Visionnaire is a full-service agency focused on creating work for a diverse Canada. The current task is to redesign Visionnaire's website to elevate both user experience and user interface. The new design must align seamlessly with the agency's refreshed visual identity while incorporating a creative editorial twist that sets it apart.

Home

The Home page design offers a dynamic experience with a storytelling approach, introducing Visionnaire to its audience in a visually compelling way. It begins with a minimalist white diamond, symbolizing simplicity and clarity. As the user scrolls, the diamond unfolds into a vibrant array of colorful diamonds, representing the multicultural diversity of Canada. A prominent purple diamond then reveals the agency’s powerful brand statement. As the user continues, the evolving diamond serves as a visual device, guiding them through the story and illustrating Visionnaire’s commitment to diversity and creativity.

Navigation

Drawing inspiration from the branding design, the navigation icon is crafted in the shape of a diamond with three distinct stripes. When clicked, the icon rotates, adding a dynamic touch to the user experience. The navigation menu expands from the top right corner, featuring a radiating brand pattern as the background. This design is complemented by bold typography, creating a visually striking and cohesive interface that aligns with Visionnaire's creative identity.

About

The About page design is highly graphical and dynamic, reflecting the energetic essence of the brand identity. The diamond motif evolves into a versatile container for patterns and photos, seamlessly integrating visual elements with the brand's narrative. The patterns are designed to zoom in and stretch, creating an interactive experience that elevates user engagement to the next level. This approach ensures that the page is not only informative but also visually captivating, fully embodying the vibrancy of Visionnaire’s brand.

Work

At the top of the Work page, company insights are prominently featured, followed by a diverse portfolio of the team's projects. When users hover over a featured photo, the client logo and project title are revealed against a vibrant background. The project detail pages are meticulously crafted to present content in a clear and organized manner, ensuring an easy and engaging user experience.

Contact

The Contact page mirrors the dynamic interaction of the About page to introduce Visionnaire’s leadership team. As users scroll, they encounter a contact form set against a colorful brand pattern, maintaining visual consistency while enhancing the user experience.

Diamond Transition

The diamond transition is one of my favorite subtle details in the website design. Traditionally, clicking the logo returns users to the homepage. Interestingly, when users click the Visionnaire logo, the page frames into a square, then transitions into a white diamond, seamlessly bringing them back to the start of their journey.
Visit Visionnaire
Back