Hey there, welcome back. At this point, you've empathized with your users, defined problem statements that need to be addressed, and started ideating design solutions. Now it's time to explore wireframes. Remember when we mentioned site structure earlier in the course? Now you can start designing each page that will go into a structure, just like a blueprint. As a reminder, a wireframe is an outline or a sketch of a product or screen. As the name might suggest, wireframes are relatively bare bones, consisting primarily of shapes, lines, and minimal text. Wireframes help the designer figure out the layout of the page. A layout is a structure that supports how visual components on a page are arranged. Layouts also demonstrate where each feature of a product fits in with the others, and how users will progress from one screen to the next. There are two methods designers can employ in wireframing: paper or digital. Like many UX designers, I normally start sketching my wireframes on paper and later switch to digital. This allows me to work through many iterations faster and throw away the wires that aren't working. It's a good idea to consider implementing industry standards for creating paper wireframes, like representing text with horizontal lines, icons or images as squares with an X overlapping the square, and calls to action, like buttons, as rectangles or circles. Doing this makes it easier for other designers in the project to understand the purpose of each element in the wireframe. To help us explore a lot of ideas, we often create multiple wireframes for the same screen of an app or a website. In this case, I'm going to draw wireframes for the homepage of a library website. The goal is to come up with lots of ideas for the structure of the homepage and the intended function of each element on the homepage. In other words, I'm going to draw wireframes for lots of ways that one screen, the homepage, could work. So let's get started. Before you begin drawing, it's helpful to write a quick list of the information that needs to go on the page you are 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. I'm drawing wireframes for the homepage of the library website. So the information that needs to be included on this page might include a navigation bar across the top of the screen, images of the book covers, and text descriptions that call out the title and author of each book. Alright, let's start drawing. It's a good rule of thumb to try to create at least five different versions of how to structure information on the page. Remember, at this stage, our goal is to explore lots of ideas with our wireframes. When you sketch you can use a few sheets of paper, a notebook, or a stylus with a tablet. So I'll grab a few pieces of paper and a pen. First, I'll draw a rectangle to represent the frame of my website. I'm going to start at the top of the page first at the header. Personally it's easier for me to design from top to bottom because that's how we experience a webpage. But this is a matter of personal preference, and you can begin wherever you want. For the header area of the homepage, I want to include a logo, a few key navigation buttons or links, and a hero image. So in the upper left hand corner of my wireframe, I add a rectangle and the word "logo" to make this clear to myself or others who might review the wireframe. Next to the logo I'll add links for search, discover, donate, and about pages, because those are important hyperlinks I need to include for a library-specific website. On the right side of the header, I'll add icons for account and cart. Folks need to know where to find the books that are in the cart, right? It's a common design pattern in left-to-right reading languages like English to have the link to the cart the furthest to the right. After that, I'm going to pop in a placeholder for a hero image below. As a personal design decision, I'd like this hero image to take up the majority of the header area, but not all of it. I'll want some text next to hero image to explain what the image is all about. Maybe this could be a featured author, or a new book release. Remember, we usually draw an X in the boxes to indicate this is a placeholder for an image. Great I think that will work. Below that, I want to include a few squares and rectangles that show website visitors the latest books. I'm going to add a long line to create a new area to page. I'll draw a couple of rectangles with an X inside within this area to show where images might go. I'll also add lines to show a corresponding description to the right of each rectangle. The reason I'm adding these two rectangles above the fold is so users will immediately notice them when landing on the home page. Remember, "above the fold" refers to the content on a web page that doesn't require scrolling to experience. Below the fold, I want to include additional books that a visitor can view right on the homepage. I don't know what these books will be yet, but I want a variety of options that cater to different genre preferences. To do that, I'll draw a line to create a new section on my homepage for these books. And inside this rectangle, I want to list six books. I'll create two groups of three rectangles. And some lines directly below each of them to indicate the text for the book title, author name, and other relevant information. Last but not least, there's the footer of a page. Generally the footer is where we add extra information that might be useful for visitors to navigate to. Such as the organization's social media pages, terms and conditions, career opportunities, privacy policy, and more things like that. I'll add a few lines to indicate hyperlinks to these pages within the footer. In the footer, I'll also include the logo of the library because I want to show the full version of the logo that has a library name next to it. We'll use a smaller version of the logo in the header to save a bit of space. Alright, my first wireframe is complete. I'm going to create a few other wireframes for the homepage. Remember, it's best practice to create around five versions of important pages like the homepage to figure out which features and layouts you'd like the best. 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. Okay, here we go. We'll check out all my wireframes side by side when I'm done. [MUSIC] And there we have it. I've created a variety of wireframes for the homepage. Let's review the five wireframes I drew, and I'll share my thoughts on each one. One thing I like about my first wireframe, which I called option A, is a large hero image with text next to it. This could be a fun place to introduce an author or a featured collection of books. For option B, I put a really prominent search field in the top right of the homepage. I was thinking about putting a hero image of the library behind it. For option C, I wanted to group the logo, search, and navigation to one floating box. Then I placed other images and texts for items like books further down the page. For option D, I thought I might be able to simplify some of the navigation by having the discover, about, and donate areas of the site as parts of the actual homepage. Finally, for option E, I decided to think a bit outside the box and create something completely different. I made search super prominent in a kind of a search engine kind of way. Now that I come up with some ideas and wireframes, it is as good a time as any to identify which features I like the most. I'll add a star next to the parts of different wireframes that are my favorite. First, in option E, I like the discover, about, and donate tabs across the top of the homepage, so I'll add a star next to this feature. I also like this large hero image of the text next to it in option A, so I'll add a star here too. In option D, I like this section of the wireframe that I called discover to help users find popular books. I'm going to put a star next to these two image placeholders and their accompanying text. Finally, in option B, I like the footer that has the logo and placeholders for text. I'll draw one more star here. Great, now that I've identified the parts of the wireframes that I like the most, I can combine them into one new wireframe. I might draw this new wireframe on paper if I want to keep ideating or create it in a digital tool when I'm ready to move on. Okay, it's time to take everything you know and create paper wireframes for your own website. In the next activity, you'll sketch designs for a desktop computer screen. Good luck!
