Hello again. Earlier you learned how to draw one frame of a wireframe on paper when you created your first wireframe of the Google Photos app. In this video, we're going to take your wireframing skills to the next level. Wireframing helps you get your ideas down. So it's time to draw wireframes for a new product. Let's go! Remember, a wireframe is a basic outline of a digital experience, like an app or website, that's made up of lines and simple shapes. The goals of creating wireframes are to establish the basic structure of a page and to highlight the intended function of each element. We want to focus on the structure and function before visual elements like color or fonts are added to the mix. You may be wondering, why do we build wireframes on paper? Remember, we already covered the benefits to creating wireframes in general. So I'll quickly share a few benefits to paper wireframes in particular. First, paper wireframes are the fastest way to get your idea out. A simple drawing by hand is much faster than building a wireframe in a digital tool. Think about how quickly you could draw a few lines, squares, and circles on a napkin. Now that's speedy. Second, drawing on paper is inexpensive. After all you only need a pen and paper. No fancy tools or software are required. In addition, because creating papers wireframes is fast and inexpensive, you can explore lots of ideas. Keep in mind that wireframes are not meant to be perfect. Instead, wireframes help you get all your ideas out on paper without worrying about every single detail. Later, we'll review those ideas and narrow our focus on the best parts of the wireframes we drew. Okay, there's one thing I should clarify. The example wireframes we presented earlier in Gmail and Google Photos were for products that already exist. This is a great way to practice wireframing because you have a real product to reference and try to replicate. But typically we draw wireframes for a new product or new feature. To help us explore a lot of ideas, we may be creating multiple wireframes for the same screen of an app or website. Think about this example. Imagine we need to draw wireframes for the homepage of our dog walking app. The dog walking app doesn't exist in real life yet, so we're coming up with lots of ideas for the structure of the homepage and the intended function of each element on the homepage. In other words, you're drawing wireframes for lots of ways that one screen -- the homepage -- could work. Paper wireframes sound pretty great, right? So grab your thinking cap, and let's get to it. Step one: Before we begin drawing, it's helpful to write a quick list of the information that needs to go on the page you're drawing wireframes for. It's important to list this information up front so, you remember to draw all of the elements in each of your wireframes. We're drawing wireframes for the homepage of our dog walking app. So, the information that needs to be included on this page might include a navigation icon, a search bar, images, and text descriptions. Step 2: Start drawing. It's a good rule of thumb to try to create at least 5 different versions of how you want to structure information on a page. Remember, at this stage our goal is to explore lots of ideas with our wireframes. For our example, I will draw 5 wireframes of the homepage for a dog walking app. As I draw, I'll check the list from step one to make sure I don't forget any elements. There's no right answer, so be creative and try new ideas. You might come up with what feels like a ridiculous layout, but that's how we come up with innovative ideas. Wow, that was fun! Let me share my thought process for each of the 5 wireframes I just drew. First, for option A I drew a layout for the homepage where each dog walker has their own profile card. I wanted each profile to look like a card because it reminded me of when dog walkers put up fliers at the grocery store. There is also a search bar at the top of the homepage. For option B, I wanted more than just the dog walkers' profiles on the homepage. I thought it might be helpful for users to have some tips or articles about how to train your dog at the top of the page. I also tried making the dog walker profiles horizontal rectangles instead of vertical rectangles like cards. For option C, I added an area to show the user's recent activity within the app. I thought this might be helpful for users who want to schedule the same dog walker multiple times. I like the horizontal dog walker profiles. So I drew them again, but this time I use dividers instead of rectangular shapes. I also added a header to describe the profiles as "dog walkers near you." Next, for option D I drew something totally different. That's part of the ideation. I drew 3 large sections to highlight the most important features in the app: Schedule a dog walker, recent activities, and latest training tips. I thought this would help users easily navigate the app. Finally, for option E, I wanted the homepage to be more visually engaging, so I added a few placeholder images, which are the squares with an X in them. I also added an avatar in the top right corner to help users easily navigate to their profile page. Alright, so now it's time for step three. We're done coming up with ideas and it's time to refine the wireframe. Review the versions of the wireframe you came up with and add a star next to the pieces you like most. In our example, I drew a bar at the top holding the navigation menu in most of my explorations. That tells me I probably want to keep that content up there. So I'll add a star to that part of the wireframe. In addition, I really like showing the dog walkers near you in a list, because it makes it easy for the users to quickly see as many new dog walker candidates as possible and find someone they'd like to hire, so I'm going to put a star next to that. And finally, step four, with the attention on the best of your ideas, you can narrow down the parts of your wireframe that you want to explore further in a digital wireframe. It's helpful to pick two or three ideas to build out further using a digital design tool. We'll cover wireframing digitally in the next video. One more thing: It's helpful to refer to your sitemap to determine which pages you've already wireframed and which ones you still need to wireframe. You can also use your sitemap to chop the project into smaller pieces. For example, if you were building wireframes from the shopping website sitemap, you might wireframe the homepage then each of the section pages, and finally, each column of sub-pages. Because wireframing is such an important part of the design process, you want to save your paper wireframes to include pictures of them in your portfolio. Each time you create paper wireframes, remember to take photos. So, when you're ready to work on your portfolio piece, you have a bunch to choose from to include. Coming up, you'll learn how to use your favorite elements of your paper wireframes to build digital wireframes.
