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

Advanced Topics and Techniques in Agile Software Development
University of California, Berkeley via edX
Entrepreneurship
Taylor's University via OpenLearning
Project Management Basics
Florida International University via Open Education by Blackboard
Principles of Project Management
Polytechnic West via Open2Study
Project Management for Business Professionals
Shaping Tomorrow via Canvas Network