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

Checkout animation congratulating you on a successful purchase.

Animation

Illustration

Practical icon design to improve wayfinding.

Illustration

Product

UI

Using animated storytelling to explain a mobile application concept to a client and customer.

Animation

Illustration

Product

Drawing and animating an informative GIF for our Monthly Design Jam Session Invites! 

Animation

Illustration

An incident at the Hyperion Water Reclamation Plant released 200+mm gallons of partially treated sewer water into the Santa Monica Bay.

Illustration

Fun

Thought Merchant's design principles animated with kinetic typography movements that mimic the principle.

Fun

Animation