Creating a UI/UX Motion Study in After Effects
Throughout these lessons we'll be diving into some of the techniques that can be used within After Effects in order to create motion studies for UI and UX designs. Software required: After Effects CC 2014, Photoshop CC 2014, Illustrator CC 2014, Sketch 3.
What you'll learn
Throughout these lessons we'll be diving into some of the techniques that can be used within After Effects in order to create motion studies for UI and UX designs. So, in this tutorial, we explore the versatility of shape layers, use sliders and expressions to gain more control over our compositions and reduce clutter, and, by the end, learn how to take static comps and bring them to life. As we focus on why motion design is an important part of the design process, we'll discover how motion studies can be a valuable alternative to prototypes. Software required: After Effects CC 2014, Photoshop CC 2014, Illustrator CC 2014, Sketch 3.
Table of contents
- Previewing the Final Output 10m
- Setting up Our Project 9m
- Importing Files and Looking at Shape Layers vs. Masks 10m
- Diving Deeper into Shape Layers 10m
- Setting up and Using Guides and Grids 8m
- Prepping for Motion 5m
- Setting up Sliders and Expressions 9m
- Applying Sliders and Expressions to Our Compositions 10m
- Animating the Main Movements and First Transition 8m
- Animating the Second Transition and Adding Finesse 10m
- Animating the Photo Expansion 10m
- Adding Our UI Indicators 10m
- Setting up Our Final Composition 6m
- Adding Our Browser Composition 6m
- Finalizing Our Deliverable 6m
About the author
Matt Austin is an interactive-turned-motion designer based in San Francisco. Over the past five years he has covered roles ranging from traditional web design, banner design and animation, user experience design, 3D modeling and animation, sound production, motion graphics, and UI/UX motion design. He currently works for Google as a motion designer and dabbles with freelance projects here and there. He loves simplification through organization, shape layers, and Syracuse Orange basketball.