Author
Released
6/11/2019- Preparing your comps and your workspace
- Adding keyframes and easing
- Creating a cursor
- Creating a single or double click
- Creating drags and swipes
- Building content in other Adobe apps
- UI microinteractions
- Animating containers
- Zooming in a UI
- Building 3D effects
Skill Level Intermediate
Duration
Views
- [Tom] Well, hello there. My name is Tom Green, and I would like to welcome you to prototyping microinteractions with Adobe After Effects. You're about to discover that After Effects has become more than a video effects application. It has become one of the go-to tools for UX designers due to its ability to give them granular control over several aspects of the UI prototyping process. One of the more critical aspects of the prototyping process, and one your developers will appreciate, is showing microinteractions, rather than explaining them. And, one of the best tools for doing just that is After Effects. We're going to start with understanding what a microinteraction is, the parts of a microinteraction, and where After Effects fits in to that whole process. From there, we move into the course skills for creating the assets, the tools used, the features such as the graph editor using a key frame velocity found in After Effects. And with that out of the way, we move into creating microinteractions that range from a simple tap to a swipe. We look at where Photoshop, Illustrator and Adobe Experience Design fit into the process, and then we take all of that knowledge and apply it to a variety of design patterns, ranging from accordion menus to UI microinteractions involving 3-D. There is a lot to cover, so let's dive right in and start learning how to create meaningful microinteractions that communicate your intentions, and make your developer one very happy camper.
Related Courses
-
Interaction Design for the Web
with Chris Nodder1h 44m Beginner -
UX Foundations: Interaction Design
with David Hogue3h 33m Intermediate -
After Effects for UX Design
with Tom Green3h 21m Beginner
-
Introduction
-
What this is all about1m 42s
-
-
1. Microinteractions
-
What are microinteractions?2m 56s
-
Why After Effects?3m 12s
-
-
2. Preparing Your Workspace
-
Preparing comps in AE3m 49s
-
Using the timeline4m 2s
-
Using markers2m 46s
-
Keyboard shortcuts3m 28s
-
Adding keyframes6m 16s
-
Using eases3m 5s
-
Using the Graph Editor5m 35s
-
Using the AE tools7m 24s
-
-
3. Fundamental Microinteractions
-
Creating a cursor4m 51s
-
Creating a precomp6m 1s
-
Creating a simple click/tap7m 25s
-
Creating a long press4m 59s
-
Creating a drag4m 49s
-
Creating a swipe4m 6s
-
Creating a pinch/zoom4m 37s
-
4. Content for Microinteractions
-
Photoshop3m 10s
-
Illustrator2m 30s
-
Adobe Experience Design (XD)3m 29s
-
-
5. UI Microinteractions
-
Sequencing5m 29s
-
Transitions9m 48s
-
Animated containers10m 23s
-
Using a focal element5m 31s
-
Creating an overshoot2m 52s
-
Stretching elements3m 50s
-
Zooming5m 44s
-
Sticker sheets4m 21s
-
Arcs4m 30s
-
Text input2m 20s
-
3D effects5m 22s
-
A pulsing cursor5m 19s
-
Wireframe a drawer5m 6s
-
Refining the slide-in drawer5m 42s
-
Card-based layouts4m 42s
-
The ripple effect4m 48s
-
-
Conclusion
-
Next steps1m 21s
-
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: What this is all about