We have arrived at face four in our journey along the user experience process. That means we are ready for wireframes, and that also means that we are starting to focus on individual pages of our sites. So as a quick reminder, in the previous course we established our goals in the strategy phase and then defined requirements to meet these goals in the outline of scope. Finally, we answered the question of how the pieces fit together to create a cohesive logical structure to the information of our sites. Now doing wireframing we are asking the question, how are the pieces presented on the screen? So we are dealing with the design of actual screens. In fact it's the first time in our design process that we are explicitly thinking about the UI, the User Interface. Everything up to this point has been much more big picture at thinking. To strain a few metaphors, up until now we've been hovering high in the air looking at overarching questions of strategy requirements and structure. Now we are ready to enter the trenches and work on the interface that the user will actually interact with, but we are not ready to design the final appearance of the interface. Instead wireframes are low-fidelity mockups and low fidelity is a bit of a funny word. It means simplified or low detail. So wireframes are simplified versions of our user interface. Here you can see an example, it's from a website project for the MAK Center in Los Angeles which I worked on a few years ago. You can see that wireframes involve a lot of rectangular gray boxes and fairly uninspiring topography. It's a bit drab, I agree, but that's by design. Wireframes are not meant to be visually exciting. We are purposely limiting the amount of detail we are concerned with so that we don't get sidetracked by having to think about colors or typefaces or precise scale relationships or which particular images we'll use. We're mainly deciding which elements go where on the page. Where is the logo? Where is the navigation? Where is the page title? How many columns do we need? What goes inside the footer? These kinds of questions. The term Low-fidelity is the opposite of High-fidelity, a word you might be more familiar with in the context of sound quality. When we say high-fidelity or hi-fi, we mean high detail, something that's very similar to the original. In the context of user interface design, a high-fidelity markup includes all those details that we are omitting doing wireframing such as colors and typeface choices. You might ask, do we even need this intermediate step of creating wireframes? Why not jump straightaway to designing high fidelity mockups? The reason is that wireframes give us the opportunity to focus on more fundamental questions about the layout of our pages, without getting caught up in a lot of details. It's maybe a little bit like making a pencil sketch before painting an oil painting, or you can think of wireframes a little bit like an architectural blueprints. In this side-by-side comparison of the wireframe and the visual mockup of a homepage, take a look at the main headline, where it says MAK Center for Art and Architecture, Los Angeles. The wireframe on the left, we can tell that the headline is placed below a large image that's by the way what the boxes with the big Xs represent. They are placeholders for the images and we know that the headline will be visually more prominent because in the wireframe it's bigger and that's all we need to decide for now. We don't yet have to hunt for the perfect typeface or the exact shade of red or the exact type size. Those are important concerns eventually but also things that can derail our design process. Maybe you've been in this situation before you trying to quickly sketch out a few ideas on the computer and all over sudden you realize that you've been spending the last hour looking for just the right typeface. That's where wireframes help you out. The fact that they're so restrictive visually means that you can focus on the big picture decisions, and as abstract and simplified as the wireframe on the left is, there are tons of big picture decisions that have been made. We know for example that the logo will be on the top left and there will be a horizontal main navigation next to it and a more secondary utility navigation in the top right corner. There will be three texts columns with images giving a brief overview of the main mission of the MAK Center each with a button that will lead the user to the respective section of the sides. On the right you see how these structural decisions are reflected in the visual mockup. Here all visual design decisions have been made. I'll leave you with one more metaphor to distinguish wireframes and visual mockups. Wireframes are a bit like x-rays of the final page designs, they represent the underlying skeleton of each page. While the visual mockups represent a beautiful skin. We'll talk all about visual mockups in the next week. For now, let's discuss in detail all the things we have to figure out doing wireframing.