Windly

Project goal

For my graduation project at the Zurich University of the Arts, I chose to create an application for breath work. The goal was to execute the whole process from the idea to design and implementation of the application.

Design

Before designing, I did the research to discover different exercises for different situations. I identified the goals for each exercise:

• Energize
• Focus
• Relax

First, I made SVG Illustrations to visualize different goals and types of breathing. My goal was to create a minimalist aesthetic and to visualize the correct way of breathing. I chose the name "windly" to associate the application with the wind or breeze.

It was important to communicate the vibe of lightness and easiness of the exercise. For that reason, I chose cold and calm colours for each mood or goal.

I chose the easiest navigation so that the user can quickly begin the practice.

Development

During the development phase, I wanted to animate the SVGs to support the breath work exercises. I used p5 library to enable dynamic manipulation with SVGs and working with tone library.

To animate SVGs, I used CSS animation and dynamically added classes through JavaScript. I used different "animation" properties of CSS.

To support the exercises with sound, I used Tone.js and Tonal.js libraries to create a sound. I used Motifs to create melodies and Noise to create a wind-like effect to recreate a wind sound. The aim was to create an abstract and meditative sound in contrast to minimalistic and clear illustrations. I used white, brown and pink noise.

You can visit the site here.