Centered
UI Design and Animation
XD and After Effects (2 Weeks)
A quick design project for CareerFoundry Animation Course. I was tasked with the design and animation of a Meditation app. Directing the Branding, UI Design, and Animation of the provided wireframes and user research. The result was a Meditation App with a fun and playful character. An array of colors and shapes helps move Users into a more comfortable and open mind to start their meditation journey. A minimal design and color palette keeps the user focused on their goal of becoming more mindful through meditation. This means having access to all the new Meditations released by Centered as well as the User’s favorite meditations close at hand to use when needed.
Design
Starting with the given wireframe above the design evolved and grew to the screens below. Taking the colors and shapes and having them grow into this fun, calm, and playful set of screens. The challenge with meditation apps is the stigma of meditation as either being “hokey” or not believing the benefits. This very simple set of color displays makes it clear that it isn’t taking itself too seriously. Rather presenting the idea of meditation as a very accessible and fun activity.
Animation
This project called for a lot of animations. The collection of this work can be seen above. Right now I would like to highlight a few of these animations to better understand the individual elements as well as the logic behind them: the Logo Animation and the Favorite Animation
The Logo
The Logo Screen follows the idea of coming to Centered as a little scattered and all over the place and then finding a wholeness through the practice of Mindfulness and Meditation.
Favorite
Fun details help make the application more accessible to Users who may feel anxious and unsure about the effectiveness of the practice of Meditation. By having this playfulness it builds trust and curiosity within the user.
Reflection
My first foray into the world of Animation was a whirlwind of activity. At first there was the steep learning curve of new software in AfterEffects with keyframes and easing to figure out. Once this hurdle was overcome it became just another design problem. Sketch. Ideation. Test. Review. Taking a giant step out of my comfort zone and moving in the direction of movement was eye opening for my design. Throughout my UI Design work. I have always had ideas on how the applications would transition and move, but this project showed me just how I could do more than image these transitions or having to settle for the rough prototypes built into XD. Animation allowed me to see and show you how this application feels while in use.
