Animate Mobile Interfaces with Adobe Illustrator and Adobe After Effects

• Experience with web design

Audience

• Web Designers

Adobe Illustrator is a graphics editor. Adobe After Effects is a digital and motion effects application. Together, they enable the creation of dynamic UI/UX designs, such as mobile interfaces.

This instructor-led, live training (online or onsite) is aimed at web designers who wish to create mobile interfaces with Adobe Illustrator and Adobe After Effects.

By the end of this training, participants will be able to:

• Implement UI/UX designs for a responsive mobile application.
• Prepare and animate designs in Adobe Illustrator.
• Create reusable components.
• Incorporate advanced animations with Adobe After Effects.

Format of the Course

• Interactive lecture and discussion.
• Lots of exercises and practice.
• Hands-on implementation in a live-lab environment.

Course Customization Options

• To request a customized training for this course, please contact us to arrange.

Introduction

Adobe Illustrator and Adobe After Effects

• Assets and components used in Adobe Illustrator and Adobe After Effects
• Design system environments in Adobe Illustrator and Adobe After Effects

Overview of Web Design

• UX vs UI
• Low-fidelity design vs high-fidelity design vs responsive mobile design

Preparing the Development Environment

• Installng Adobe Illustrator
• Instaling Adobe After Effects

Planning and Animating with Adobe Illustrator

• Creating a sitemap
• Creating a low-fidelity wireframe
• Creating a high-fidelity wireframe
• Creating a mobile wireframe
• Designing with column grids
• Using Illustrator templates
• Adding colors and fonts
• Adding and cleaning up images
• Using layers
• Creating symbols and icons
• Finalizing for standards in responsive mobile applications

Animating with Adobe After Effects

• Importing artwork from Adobe Illustrator
• Creating reusable components
• Building dashboard tiles and dashboard screens
• Finalizing the dashboard tiles and dashboard screens
• Animating elements and screens
• Creating and adding animations
• Finalizing the animations
• Exporting all final sequences as a gif

Summary and Conclusion