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.
Course info
Rating
(46)
Level
Advanced
Updated
Sep 27, 2014
Duration
2h 7m
Table of contents
Description
Course info
Rating
(46)
Level
Advanced
Updated
Sep 27, 2014
Duration
2h 7m
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.

About the author
About the author

Matt Austin is an interactive-turned-motion designer based in San Francisco.

Section Introduction Transcripts
Section Introduction Transcripts

Introduction and Project Overview
Howdy everyone. My name is Matt Austin and I'm a motion designer at Google. My latest project is called motion design for Google Maps and Google Search. In this course we're going to dive into how I work within After Effects, and more specifically how I create detailed UI and UX motion studies in order to communicate how a UI will move when interacted with. In this example, we'll be creating a fake photography portfolio and demonstrating how certain elements of that site will move around, both on the browser and on mobile. Some of the key takeaways from watching this course include learning how I use shape layers in my workflow and why I prefer them to solids or masks, using sliders and expressions to gain more control over our compositions and reduce clutter, and how I tie those things together and create a detailed user flow to demonstrate how an app or site will move. By the end of the training you'll have learned how to take a static design and bring it to life, all while picking up a few tips and tricks to make your life a bit easier. I'm excited to work with Digital-Tutors and share these techniques with you, so let's get started with the first lesson.