Andy Needham, a London-based motion graphics artist and animation director shows the references he gathered when planning out the Activity Tracker app. He shares rough sketches and his thought processes when generating ideas for what the app interface could be like. We see the designs become more developed as the ideas are sketched out giving a foundation we can refine further.
- [Voiceover] So you've gone away, researched,…and gathered some references.…Now would be a good time to take out a pencil and paper…or if you prefer sketching digitally, firing up photoshop…and getting those ideas down as fast as possible.…I'm going to show you some references…and sketches that help me get…to the final app screens we'll be using in this course.…So here we are looking at the references that I've gathered…and I've laid them out just so I can see…an overview of all these different app screens.…So let's just zoom into a few,…you may be familiar with some of these,…and I quite like some of the way…that these interface elements are…such as these circular charts,…you can see them repeated here, it's quite a common theme,…and when you're gathering so much data…in these activity apps,…there's lots of different types of charts…such as bar charts,…and progress bars,…and we'll be incorporating…all of these ideas into our sketches.…
So you can take a look at these in your own time…also gather your own of course.…
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