UI Animation & Prototyping

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 PrincipleFramerProto.io, Figma and InVision Studio, in my opinion, nothing can match the flexibility and subtlety of hand-keyframed motion.

Prototyping-UI Animation_Adidas_Frame
Prototyping-UI Animation_AudaExplore_02_framed
Prototyping-UI Animation_Intel—DSF-Small-Screen_framed
Prototyping-UI Animation_Cigna_Large-Screen_framed

David Bryan - Freelance Motion Graphics Artist and Designer - ©2024 dcbryan