YoVDO

Designing an Animated App UI with Illustrator

Offered By: LinkedIn Learning

Tags

Adobe Illustrator Courses Project Management Courses Animation Courses Prototyping Courses Digital Art Courses

Course Description

Overview

Learn how to use Adobe Illustrator to design reusable components and screens for a mobile app prototype, which can be animated in After Effects.

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.

Syllabus

Introduction
  • Welcome
  • What you should know before watching
  • How this course fits into the series
  • How to use the exercise files
1. Planning the App
  • Plan the app and gather references
  • Review references
  • Record ideas through sketching
  • Choose a user journey
2. Setting Up the Project in Illustrator
  • Why use Adobe Illustrator?
  • Install the font for this project
  • Set up the project file
  • Break down sketches into components
3. Designing Reusable Components
  • Create the header
  • Create the title bar
  • Create the goal area
  • Create a dashboard tile
  • Create the bar chart
  • Create a data item
  • Create a friend item
  • Create the navigation bar
  • Converting artwork to symbols
4. Completing the App Screens
  • Complete the Dashboard screens
  • Complete the Steps screen
  • Complete the Friends screen
5. Finishing Touches
  • Organize our project file
  • Export artboards
  • Get files ready to animate
Conclusion
  • Next steps

Taught by

Andy Needham

Related Courses

Think. Create. Code
University of Adelaide via edX
Digital Arts
iversity
Max MSP Programming Course: Structuring Interactive Software for Digital Arts
Stanford University via Kadenze
Marey : l'Art et la Science du mouvement
University of Burgundy via France Université Numerique
Creación y retoque de imágenes con software libre
Universidad de Malaga via Miríadax