Taking the popular format of a fitness tracking app, Andy Needham, a London-based motion graphics artist and animation director explains the steps needed to go from concept to completion. He explains the processes of planning, design, animation and output that we'll need to complete in order to produce a highly polished result.
- [Voiceover] How do we begin a project such as this?…With so many apps out there, we need to come up with a plan.…We can break down the project into processes or phases.…Planning, design, animation, and output.…The planning phase is very important.…At this stage, your brain will be flooded…with all the possibilities of what this app could be…and how it can function.…And you'll keep changing your mind and refining those ideas.…We wouldn't just dive into after effects without a design…to animate, and we wouldn't start working up…an elaborate design in Illustrator…without carrying out some research…or making some sketches of our ideas.…
So it's important to go through a process.…By quickly sketching your ideas,…you allow yourself to make mistakes when it doesn't matter.…It's just about getting ideas…out of your head and onto paper now,…so that you can filter, focus, and refine them later.…So begin with what you know and what you've experienced.…There's also plenty of inspiration on the Internet…so we can take some time to gather some references,…
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.
- 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