Prototyping & UI Animation

Client

— Many!

Year

— 2013 to Present

Technology

  • After Effects
  • Photoshop
  • Illustrator
  • Sketch

 

 

Project overview

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 and now even deep-press. 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 PrincipalPixateProto.ioOrigami and even Keynote, in my opinion, nothing can match the flexibility and subtlety of hand-keyframed motion.