The Knot Animation & Interactions

I love designing how interfaces move and interact with people. 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 had the opportunity to share this skillset with other designers and lead the team towards adopting animation prototyping into their workflow.

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.

Note: These examples are .mov files and should autoplay, but if you have trouble try secondary clicking on the video and selecting “Show Controls”.

The animation above is from a presentation I delivered to the design team at The Knot about my UI animation philosophy called “10 Little Things Every Designer Should Know About Animation.” I shared some tips and tricks I learned from video production and included a working file so participants could try the examples themselves.

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.