Sketching is a great way to generate ideas quickly, as it frees your mind up to be creative, to make mistakes, and to refine ideas. In this video, learn some common terms used in UX design for describing different levels of detail to app concepts, such as wireframe, mockup, prototype, low-fidelity, and high-fidelity.
- [Presenter] Some terms that you may or may not be familiar with in relation to UX design are wireframe. Now you can think of this as the blueprint for what you'll be creating. Then we can have a mockup which is more detailed. You can add colors, fonts, copy and beyond that is a prototype, a functioning version of the app that has interactivity. Depending on how you work and how much time and budget the project has these could either be low fidelity or high fidelity or anything in between.
Now we're going to start by creating lo-fi wireframes and that means sketching. By the end of the course, our goal is to create a kind of cross between a wireframe and a mockup of our app. Its going to be fairly high fidelity in that we're going to take our wireframes beyond the simple sketch. But to get to that point we need to begin to record our ideas through quick sketches. What sketching does is free your mind up to be creative and make mistakes and refine ideas. So here you can see I'm thinking about how I'm going to create the dashboard element and if we're looking from left to right, I'm just thinking there's going to be a logo at the top and maybe an area where we have our steps or the goal in fairly large.
And then below that there's the kind of tiles. All the kind of components that we want to track. Then at the very bottom we'd have some navigation, a way of getting through the app, different screens. Now I'm thinking to myself in the next one if I tap that does it change what's happening in the main goal area below the logo. Then moving on to this next one I'm just thinking about maybe using icons or something like that. Then I'm starting to refine it on the far right where I've decided on a kind of circular ring for the goal and added a percentage in the middle.
And then below that we've got a kind of dashboard of tiles. And then I thought about refining these sketches so drawing the individual screens so this will be the dashboard an example of that. You can see that goal area and all the tiles coming in. Next thinking about maybe I'm going to have some friends that want to join me and we can all see our progress and this is going to be quite a social app. And then the steps you know this will be a detail if I were to tap into one of the tiles I'd see the steps, I'd see a weekly overview and things like that.
So now I've got a bit more of a refined sketch. Before you move onto designs you should consider what the user journey will be and that is what screens do we actually need to design. How are we going to take the user through these sketches that we've made? And we need to think about that. So we'll spend the rest of the chapter doing just that.
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