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

NRC_FullFlow_MobileApp_v03_1
NRC_Challenge_Creation_170426_v01_1
NRC_Challenges_170420_v01_1
feed_to_thread_03_1
NRC_AW_Flow_170227_v01
signature_flow_01_1
Signature_run_in_03_1
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 - ©2019 dcbryan