Capturing the physicality of yoga within a brand identity

CASE STUDY

3min read

This is a personal project for a small yoga studio run by my mother. The end goal was the development of a brand identity and website. There were very few requirements, so I took on defining the scope of the project. Next to the design work, I decided to use this project as an exercise to improve my web development skills and code it myself. Due to my focus on animation and web development, I decided to keep the brand design reasonably simple. As this project advances, I would like to expand on the brand through photography.

MY ROLE

Designer & Web Developer

SKILLS

TOOLS

DISCOVERY

Week 1

One of my main points of inspiration were the animated pictograms created for the Tokyo 2020 Olympic games. The set of icons was designed by Masaaki Hiromura and animated by Kota Iguchi, each portraying their sport in motion. They were designed to "subtly communicate the characteristics and athleticism of each sport, as well as artistically highlight the dynamism of the athletes," This notion inspired me to explore ways to suggest the benefits and characteristics of yoga through animated illustrations. 

After researching the aesthetic of different yoga studios, I developed mood boards and sketched the first versions of the illustrations and wireframes for the website.

ITERATION

Week 1

My workflow started in Illustrator, where I turned my sketches into flat Illustrations. Once I was satisfied with the outcome of the Illustration, I split the different elements that I wanted to animate into separate layers. Then, moving into Adobe After Effects, I kicked off the animation process, emulating the subtle movements of yoga and a breeze of wind. After that, I used the bodymovin plugin to generate a JSON file. Lastly, I implemented the animations to be rendered in real-time on my website using Lottie by Airbnb.

Challenges

Week 1

While we had a lot of design experience on our team, we initially lacked a developer to realize our concept. Therefore we had to adapt our vision to our design heavy skillset. Linus joined the team late in the sprint, which eased the pressure on the developmental part of the project. While Phillip and I had made all conceptual decisions, we felt that this addition to the team was a huge benefit. With the additional time, we improved our presentation, textual content and visuals.

3 BIG TAKEAWAYS

01      Lottie is an amazing tool to implement movement.

02     Flexbox is so much easier when using the google dev tools.