Adobe Animate for UX Design

1h 36mIntermediate2020-07-20

Authors

Joseph Labrecque

University Professor, Adobe Educator, Studio Head

Course details

There are many tools for UX design. But few offer the ability to create sophisticated motion, build reusable assets, and incorporate rich media. Adobe Animate has all of these features and more, which makes it the ideal platform for designing and developing interactive user experiences. Learn how you can use Adobe Animate in your UX work, from concepts and prototyping to design and animation. Instructor Joseph Labrecque shows how to set up and configure an Animate project for UX; work with vector shapes, colors, and text; create reusable assets for scalable design work; build and link screens to prototype app and web experiences; and use the timeline and animation features in Animate to make your experiences fully interactive. Plus, learn how to export assets from Animate for downstream design and code implementation.

Topics include:
Setting up a UX project in Animate
Drawing simple shapes
Adding text
Creating symbols
Building interactive states
Defining screens in the timeline
Linking between screens
Animating interactions
Publishing and exporting your project

Skills covered

Adobe AnimateInteractive Web ContentWeb GraphicsUX DesignWeb DesignUser ExperiencePersonaAdobeWeb Development

Concepts

0. Introduction

01 - Using Animate for UX design
02 - Why Animate for UX
03 - Using the exercise files

1. Project Setup

04 - Creating a new document
05 - Modifying document properties
06 - Configure rulers and grids
07 - Using guide layers

2. Working with Shapes and Text

08 - Drawing simple shapes
09 - Modifying shape properties
10 - Adding text to your document
11 - Defining reusable color swatches

3. Building Reusable Assets

12 - Creating graphic symbols
13 - Defining symbol states
14 - Instantiating design states
15 - Building interactive states

4. Using the Timeline to Define Screens

16 - Preparing the document timeline
17 - Building screen content
18 - Importing Bitmap assets
19 - Working with layers
20 - Designing multiple screens
21 - Exporting screens

5. Prototyping Experiences

22 - Designing navigation elements
23 - Linking between screens
24 - Animating interactions
25 - Publishing and exporting

Conclusion

26 - Further information