In this article, we take you behind the scenes to explore the creation process of an intriguing animation inspired by gemstone visuals. From

Habit Hustle: The Creative Process Behind a UI Animation

submited by

Style Pass

2024-10-03 18:30:07

In this article, we take you behind the scenes to explore the creation process of an intriguing animation inspired by gemstone visuals.

From our sponsor: Chromatic - Visual testing for Storybook, Playwright & Cypress. Catch UI bugs before your users do.

Nice to meet you! I’m Michael, a visual designer based in Stockholm. I grew up in the Midwest in the US and worked in advertising before switching to interactive projects. In my free time, I practice new skills in AfterEffects and Blender to create prototypes.

I began with the idea of using gems as the main visual. Since I knew I wanted to play with gemstone material, I started in Blender to create some assets that I could use when playing around with layouts in Figma. Something about the gemstones felt like little rewards for achievements and I liked the concept of earning gems for completing basic adult tasks.

Glass and gems are always a complex shader node tree that I never can remember how to set up so I used this tutorial from blenderbitesize to build the base material for the gems.