Follow a discussion around the wireframing process and where UXPin fits into the workflow.
- [Instructor] In this chapter we're going to deal with wireframing and we're going to build a low-fidelity wireframe, medium-fidelity, and then high-fidelity. And in this video what I want to do is, sort of, get you to understand the difference between the three of them. And in this chapter we're also going to build a project that deals with a provincial park in northern Ontario named Rabbit Blanket Lake. But what we are not going to do is to slap a bunch of content onto a bunch of screens and then figure out how those screens work as a comprehensive whole.
Instead, what I intend to do here is to step back and, sort of, let you understand the process. In general terms, the process starts with a low-fidelity wireframe, which you see over here on the left, which becomes a medium-fidelity wireframe showing the content, which is kind of what you're looking at on the right, here, and results in a high-fidelity medium frame prototype. So we'll start with low-fidelity, we got to medium fidelity, and then we go to a high-fidelity prototype that contains interactions and motion, which can then be subjected to user testing and refinement before hand off to the development team.
The terms low, medium, and high are deliberate. Rather than get into a long-winded rationale for them they're much like looking at the moon at night. You look at it and you see this bright round thing, that thing under the cloud that has some splotches, and it gives you a rough idea of the moon and what it looks like but this is a low-fidelity moon that you're looking at. Then you haul out a pair of binoculars and take another look at the moon and discover those splotches are craters, and so on.
Suddenly, a bit of detail has been added to that first look at the moon and you now have a better idea of what this thing we call the moon is. And what you are looking at is a medium-fidelity moon. This is so fascinating that you haul out a telescope. You aim it at the moon and discover the surface of the moon contains big craters, small craters, and all kinds of detail. A smooth surface, and the shadows in the craters give you a pretty good idea that the surface is pock-marked with hundreds of shallow and deep craters.
This is a high-fidelity moon. So how does looking at the moon relate to UX design? It is the same thing. A project starts out on a piece of paper where the content is blocked out and once all this is worked out a page is created, UXPin, and a content wireframe showing content blocks and placement is created. Once that is finalized those blocks become the common boxes and arrows of a low-fidelity prototype showing what goes where.
At this point, you really aren't sure what the content will be but you have a pretty good idea of where it will go. The focus here is on placement and design, not icons, images, and text, fonts, color, or anything else. The goal here is a low-fidelity view of the project. Now, a low-fidelity view is a representation of an interface, and you could see, that's what it is on the right, there. And it is used to communicate the following details to the team: structure, how will the bits and pieces fit together? Content, what will be displayed? Information hierarchy, how is the information organized and displayed? Functionality, how will this thing work? And, finally, behavior, how does it interact with the user, or, how does the user interact with it, and how does it behave? Wireframes are not the design, do not contain visual elements, or convey the brand.
The next step is to add the content that goes into those boxes. Suddenly, the project starts to take on context and supports the brand. There are fundamental decisions made about everything from color, to fonts, to images, icons, line art, and so on, and you can see all that in the medium-fidelity wireframe on the left. In fact, the end product could be a click-through that could be shared as a deliverable and subjected to user testing. We now have that medium-fidelity moon.
The final step in the process is to add interactivity and motion and to test the prototype on a variety of devices and to subject it to rigorous user testing. This is your high-fidelity moon. Everything is in place, and everything has its place, and everything has its function. What I don't want you thinking, though, is that this is a simple, three-step process. It isn't even close. Each step is carefully thought through and the design regularly changed based on team and user feedback.
Why? Because there's too much at stake here, financially, in many cases, to take a slap dash approach to projects. More importantly, there's always an end user, and if the user can't use it you have wasted a colossal amount of time and money on a project doomed to failure right from the start.
- Importing artboards from Photoshop and Sketch
- Adding interactivity
- Adding animations
- Designing responsive sites
- Sharing prototypes with stakeholders
- Creating image carousels
- Create slide-in menus