Kalso | Communication Arts

Responses by Vaan.

Background: At the beginning of our partnership with apparel brand Earth Shoes, we had the opportunity to design and build a Shopify Plus store that spoke to all three of its unique brands: Kalso, Earth Elements and Earth Origins. At the same time, it was planning the 50th anniversary of its heritage brand Kalso and inquired what we could do to tell the brand’s story uniquely. That’s how this storytelling microsite came to life.

Design core: The fonts used throughout the site were a key design element that helped indicate the time changes over the years. We underwent extensive research on what typefaces would appropriately represent select eras while also making sure they didn’t clash with each other. It was important for the fonts to have similar aspects such as weight and width to keep consistency throughout the site.

Like the fonts, we also put a lot of thought and research into the illustrations and animations. We asked ourselves: How do we make this site engaging without being too long? We decided to narrow down key aspects of the story, get specific with the details, and make the animations fun and unexpected. For example, the hammer animation in 1965 was an intricate part of the story highlighting the moment the shoe was built. Specific details leaned into the fact that this was no average hammer but a shoemaking hammer. The fun and unexpected elements came into play when we animated it, keeping viewers engaged.

Favorite details: When users scroll down to 1986, they’ll see a tree animation. To some viewers, this may seem like just a tree, but it’s quite the opposite. This specific tree was a strategic and creative decision as it was the original Earth Shoes logo. A lot of work went into designing and drawing the branches and having the leaves fade away and drop down. Overall, the animation is a creatively driven idea that helps bring the branded elements together.

Challenges: The timeline found at the bottom of the page was probably the most challenging aspect of the site. If you hover over the timeline, it lets you navigate to a specific date. The challenge here was that the images needed to be accurately sized for the navigation action to work. We had to do a lot of manual leg work to ensure the website incorporated the sizing of the pictures when calculating the page’s length. This would help to make sure that once a date is selected, it would lead the user to the appropriate time.

Technology: For the Kalso project, we used a combination of Figma, Affinity Designer and Adobe Photoshop for the design, Adobe After Effects and Lottie for the animation, and Webflow for the build.

Browse Projects

Click on an image to view more from each project

Source link

Leave a Reply

Your email address will not be published. Required fields are marked *