The sketches you've created will share many common components which make up the user interface. And often, an element can be designed once and then duplicated with minor adjustments to create a new element. In this video, Andy walks through the process of breaking down the sketches into component parts so that single elements can be created and reused throughout the app design.
- [Instructor] Okay, before we begin…building out the screens, let's pause…and take a minute to breakdown the sketches into components.…When you look at these wire frames…you start to pick out some common components…that kind of act as building blocks that make up each page.…So on the Dashboard here we've got the Header,…the Title Bar, Goal Area, these Dashboard Tiles,…and a Navigation Bar.…And so we'll see common attributes of the other screens.…
But then with the Steps, we have a Progress Chart…and Data Points.…With the Friends, we've got the repeated Header,…Title Bar, and the Navigation.…But then we've got our Friends list as well.…So let's think about components.…So on the Dashboard…one of the repeating components is a Dashboard Tile.…So we could probably just make one…and then just duplicate it several times.…With the Steps, the Progress Chart Item, and Data Points,…we can just create one of those and then modify them…as we need to.…
And for the Friends page we can just create one Friend Item…and duplicate that across the page.…
Learn how to animate the prototype by watching Andy's follow-up course, Creating a Mobile App Interface in After Effects.
- Planning the app
- Sketching ideas
- Designing reusable components
- Converting artwork to symbols
- Completing the app screens
- Exporting artboards
- Preparing for animation