Wolfenstein Notion Icon Animation

Animating a favicon to keep us entertained on the team’s kanban board.

Austin Barto

,

Nov 30, 2021

Notion Icon Animation + Illustration
Our new kanban board favicon.

Our Notion kanban board has been upgraded! Since the organization level on Notion is called Mother, we decided to call the kanban board Father. And alas, this father icon was born.

The upgraded icon and name fit well for our team. However, after sitting on it for a few days, we decided it needed something extra. We wanted to be able to recognize it from other tabs but still keep it subtle. We traced our gaming roots, and Wolfenstein appeared as inspiration.

OG Wolfenstein promotion.

Wolfenstein is an iconic first-person video game from back in the day. In this game, your player had an avatar in the HUD. He reacted depending on certain things happening to you in the game. For example, the character would wince in the direction you got injured from.

Wolfenstein avatar frames
Wolfenstein HUD animated frame breakdown.

The animated avatar provided fun in a rather mundane place by replacing the still icon. I created this animation by drawing each frame with the character facing different directions based on Wolfenstein. Threw it in After Effects, messed with the timing a bit, and boom!

Our animation frame breakdown.
Father - the final product

Similar Output

Creating fun assets for a women's brand.

Photo

Illustration

Brand

A set of icons that illustrate the different nuances of The Loyalist's merchandising platform.

Illustration

Product

UI

Dress the waves you want, not the waves you have.

Brand

Illustration

Process

Photo

Checkout animation congratulating you on a successful purchase.

Animation

Illustration