Prototyping & UI Animation
Role – After Effects UI Animation
Here I'm showcasing a range of projects that I'd classify broadly as UI animations. In modern user experience design, motion can, and should, serve an important function. We're moving away from a narrow 'click-based' set of user interactions to a much wider set of inputs: you can tap, swipe, pinch, press, hold, rotate, etc. With this great power also comes great responsibility! Your interface needs to feel responsive, reactive and alive, encouraging the user to interact in these new ways. As a motion designer, my understanding of how things should move is a valuable part of the design process.
Animated prototypes are relatively new tool used in the development of apps, websites and mobile experience, and something I've become very familiar with. The process is first breaking out the designer's files, whether it be Sketch, Photoshop or Illustrator, then rebuilding and animating in After Effects. Using a prototype, teams are able to test ideas much quicker than waiting for the same functionality to be coded by a developer. We can test user flows, showing how screens transition from one to the next, see UI elements react to user input and discover how all that motion will impact the overall user experience. If motion is part of your design process, then seeing your ideas in action is key.
Below you'll find a group of looping gifs, the animation is my work, done in After Effects. Although there are many other prototyping tools in use, like Principle, Framer, Proto.io, Figma and InVision Studio, in my opinion, nothing can match the flexibility and subtlety of hand-keyframed motion.