Loading ...

Responses by Samuel Day, designer and developer.

Background: The site was intended to position Vaayu as a standout brand in the sustainability space. We drew influence from direct-to-consumer online retailers and brought that to life on the site with a minimal, refined design and color palette. We focused on creating meaningful animations and interactions to complement the written content throughout the site.

Favorite details: I’m particularly proud of the opening animation, which visually explains the logo’s meaning. The second a drops into position and aligns the three circles within the logo before the remaining letters fade out. The points drop as though they’re on a graph, representing the drop in carbon that Vaayu aims to provide its customers. When the animation finishes, the points move back into an idle state; when the user scrolls, the points drop back down to reinforce the relationship between Vaayu and the brands with which it works.

Challenges: The most difficult aspect was achieving a seamless transition between each state of the opening animation. We underwent a process of trial and error to get it looking as smooth as it does. There’s still more left to do on the site, so look for some new pages in the coming months!

Navigation structure: The navigation uses anchor links to smooth scroll the user down the page. It has two states: when the section is in view, it shows a green highlight; and when you hover over a navigation item, it reveals a black highlight for hierarchy in the navigation. There’s also a not-so-obvious feature that if you hover over the logo in the navigation, it reverses the intro animation, and the a moves back into position.

Technology: For the design, I used Figma, Affinity Designer and After Effects. For the build, I used a combination of JQuery, JavaScript, Canvas, Lottie and Webflow.

vaayu.tech

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In