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