Creating a UI/UX Motion Study in After Effects
Pluralsight
Course Summary
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.
-
+
Course Description
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.
-
+
Course Syllabus
Introduction and Project Overview- 1m 3s
—Introduction and Project Overview 1m 3sCreating a UI/UX Motion Study in After Effects- 2h 6m
—Previewing the Final Output 10m 3s
—Setting up Our Project 9m 18s
—Importing Files and Looking at Shape Layers vs. Masks 9m 59s
—Diving Deeper into Shape Layers 10m 8s
—Setting up and Using Guides and Grids 7m 45s
—Prepping for Motion 5m 12s
—Setting up Sliders and Expressions 8m 37s
—Applying Sliders and Expressions to Our Compositions 10m 18s
—Animating the Main Movements and First Transition 7m 51s
—Animating the Second Transition and Adding Finesse 9m 36s
—Animating the Photo Expansion 9m 35s
—Adding Our UI Indicators 10m 7s
—Setting up Our Final Composition 5m 30s
—Adding Our Browser Composition 6m 10s
—Finalizing Our Deliverable 6m 25s
