Designing an Animated App UI with Illustrator

Designing an Animated App UI with Illustrator

An animated prototype is a great way to test an app's interface design, without spending any engineering resources. In this course, Andy Needham 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. He starts with the planning process, where you gather reference material, sketch your ideas, and map the user journey. Then Andy 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. Andy shows how to convert your components into Illustrator symbols, and lay out the different app screens. Finally, he shows how to organize your project and export assets for animation.

Learn how to animate the prototype by watching Andy's follow-up course, Creating a Mobile App Interface in After Effects.

Topics include:

  • Planning the app
  • Sketching ideas
  • Designing reusable components
  • Converting artwork to symbols
  • Completing the app screens
  • Exporting artboards
  • Preparing for animation


  • 英文名称:Designing an Animated App UI with Illustrator
  • 时长:1小时44分
  • 字幕:英语


  1. Welcome
  2. What you should know before watching
  3. How this course fits into the series
  4. How to use the exercise files
  5. Plan the app and gather references
  6. Review references
  7. Record ideas through sketching
  8. Choose a user journey
  9. Why use Adobe Illustrator?
  10. Install the font for this project
  11. Set up the project file
  12. Break down sketches into components
  13. Create the header
  14. Create the title bar
  15. Create the goal area
  16. Create a dashboard tile
  17. Create the bar chart
  18. Create a data item
  19. Create a friend item
  20. Create the navigation bar
  21. Converting artwork to symbols
  22. Complete the Dashboard screens
  23. Complete the Steps screen
  24. Complete the Friends screen
  25. Organize our project file
  26. Export artboards
  27. Get files ready to animate
  28. Next steps