A user journey is the route we'll take through the app, getting from Point A to Point B. Andy Needham, motion graphics artist and animation director discusses the user journey using the sketches we created previously, allowing us to focus on what we need to animate and what interactions will motivate the user journey.
- [Voiceover] If like me, you use a fitness tracking app regularly. You'll be familiar with the concepts of counting steps, monitoring heart rate, distance traveled, calories burned, floor climbed, tracking weight, sleep, water intake, calories consumed, and more. These apps are pretty fully featured. It would be beyond the scope of this course to design that many screens, so it's important to choose a user journey. A user journey is route through the app that a typical user would take. So let's look at our sketches and choose some key screens.
So what we've got here, what we're looking at is some more sketches that I've done and I've kept them fairly still. We are going to see how we would get from one point to another. So let's just reveal our layers here, and I've got this layer called Journey, and if I click the eye, we can see some interactions. So these arrows I'm thinking we're going to swipe to begin with. So we're going to swipe across, which will reveal more tiles, and we can see a bit more about the heart rate, the distance and things like that.
And maybe we'd swipe back to get to here, to the steps again, then we would tap on steps, and this would reveal the next screen, and we would be able to scroll this screen and see what steps we have in detail. What we've been doing through the past week and so forth. Then we would tap on our friends icon in this footer here and then we can see our friends who we have in the app. And that's just a typical way of getting from one point to the other. And now we have a rough idea of what our animation will be, we can focus on designing just the screens we need to get our point across.
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