Designing an Animated App UI with Illustrator

27 Video Lessons

Was: $35

Deal Price: $15

You Save: $20

About this Course

An animated prototype is a great way to test an app's interface design, without spending any engineering resources.

In this course, expert shows how you can use Adobe Illustrator to design reusable components and screens for a mobile app prototype, which can later be animated in After Effects, and starts with the planning process, where you gather reference material, sketch your ideas, and map the user journey. Then expert shows how to set up the project file correctly, by choosing the correct document type and organizing the artboards. Next, learn how to break down your sketches into components that can be reused throughout the app, including headers, navigation bars, and dashboard tiles.

Expert shows how to convert your components into Illustrator symbols, and lay out the different app screens.

Finally, expert shows how to organize your project and export assets for animation.

 

Contents

 

Introduction
Welcome
55s
What you should know before watching
49s
How this course fits into the series
1m 9s
How to use the exercise files
1m 44s


1. Planning the App
Plan the app and gather references
1m 31s
Review references
1m 57s
Record ideas through sketching
2m 58s
Choose a user journey
2m 25s


2. Setting Up the Project in Illustrator
Why use Adobe Illustrator?
1m 2s
Install the font for this project
1m 3s
Set up the project file
6m 3s
Break down sketches into components
1m 32s


3. Designing Reusable Components
Create the header
8m 44s
Create the title bar
4m 9s
Create the goal area
6m 10s
Create a dashboard tile
5m 11s
Create the bar chart
6m 19s
Create a data item
4m 10s
Create a friend item
3m 42s
Create the navigation bar
9m 59s
Converting artwork to symbols
6m 43s


4. Completing the App Screens
Complete the Dashboard screens
8m 50s
Complete the Steps screen
4m 55s
Complete the Friends screen
2m 59s


5. Finishing Touches
Organize our project file
3m 15s
Export artboards
1m 16s
Get files ready to animate
3m 53s

1. Language: English. 

2. Secure download. 

    Video file format: MP4.

3. Learn anywhere. Switch between

    your computer, tablet, or TV.  

4. Practice while you learn

    with exercise files.  

5. Secure payment by PayPal.

6. 30 days refund.

7. No subscription needed.

8. Lifetime access.

9. This course without a sponsored ads.

 

Watch. Listen. Practice. Learn.