Creating a Mobile App Interface in After Effects
2h 34mIntermediate2018-05-17
Authors
Andy Needham
Motion Designer, Editor, Compositor
Course details
Most apps follow the same interface design principles—principles defined in the iOS, Android, and Windows Phone specifications. Prototyping your interface with tools like Illustrator and After Effects can ensure your app meets platform guidelines and help you resolve usability issues before going through a lengthy development cycle.
In this course, Andy Needham shows how to create an app interface from scratch using Adobe Illustrator, and then take the finished design into After Effects for animation. This is a start-to-finish project, going from concept sketches to the final product (an animated GIF). The prototype will showcase the navigation and interactive aspects of the app interface and can be used for marketing or gathering client and user feedback.
Learning objectives
Sketching ideas
Planning ahead: knowing your target output
Designing screens in Illustrator
Preparing artwork for After Effects
Creating reusable components
Building and animating screens
Adding transitions and gesture animations
Exporting the final sequence as an animated GIF
In this course, Andy Needham shows how to create an app interface from scratch using Adobe Illustrator, and then take the finished design into After Effects for animation. This is a start-to-finish project, going from concept sketches to the final product (an animated GIF). The prototype will showcase the navigation and interactive aspects of the app interface and can be used for marketing or gathering client and user feedback.
Learning objectives
Sketching ideas
Planning ahead: knowing your target output
Designing screens in Illustrator
Preparing artwork for After Effects
Creating reusable components
Building and animating screens
Adding transitions and gesture animations
Exporting the final sequence as an animated GIF
Skills covered
Motion GraphicsAfter EffectsRenderingMotion Graphics and VFXProjectVisualization and Real-TimeAdobeAECProduct and ManufacturingAnimation and Illustration
Concepts
0. Introduction
- 01 - Welcome
- 02 - What you should know before watching
- 03 - How to use the exercise files
1. App Plan and Pre-Production
- 04 - The app creation
- 05 - Plan for and gather references
- 06 - Sketch out ideas
- 07 - Choose the user journey
2. Explore the App Screens
- 08 - Adobe Illustrator s role in the process
- 09 - Install the font for this project
- 10 - Prepare artwork for After Effects
3. Prepare Assets for Animation in After Effects
- 11 - Set up and import artwork
- 12 - Create reusable components
- 13 - Build the Dashboard tiles
- 14 - Add final touches to the Dashboard tiles
- 15 - Build the Dashboard screens
- 16 - Add final touches to the remaining screens
4. Animate in After Effects
- 17 - Animate the Dashboard elements
- 18 - Add final touches to the Goal section
- 19 - Animate the Steps screen
- 20 - Animate the Friends screen
- 21 - Create tap and swipe animations
5. Build and Export the Sequence
- 22 - Swiping the Dashboard screens
- 23 - Add finishing details, swipes, and taps
- 24 - Add the scroll animation
- 25 - Fix the header and footer
- 26 - See the Friends screen and back to the Dashboard
- 27 - Export the final sequence
6. Work with Sketch2AE
- 28 - What is Sketch2AE
- 29 - Install Sketch2AE
- 30 - Prepare artwork in Sketch
- 31 - Import artwork into After Effects
Conclusion
- 32 - Next steps