The Knot - UI Animation Examples

I love designing how interfaces move and react to a user. Early on in my career I did a lot of video production and spent loads of time in After Effects. As a UX designer I have learned to apply my understanding of motion to UIs. At The Knot I have been working with my design team to leverage animation to bring our app to life.

Here are a bunch of examples of interactions I designed using Principle. I included some screenshots of my work flow, including an example of the diagrams I create to break down complex animations for my engineers. The last video is an easter egg project combining video, audio and haptic feedback that I did with an iOS engineer on my team for a company hackathon.

Here is the deck from a presentation I recently gave to my design team about my philosophy of UI motion titled “10 Little Things Every Designer Should Know About Animation.”

Note: These examples are best viewed on a desktop computer, and may be difficult to view on your mobile device.

In-House Work

UI/UX Design, Video