It can be confusing differentiating the different phases of the design process, especially when the terminology is used so loosely. But that's no excuse for a designer to not know the difference.
While it might seem innocent enough, referring to a mockup as a wireframe is like a carpenter referring to a hammer as a screwdriver.
Not knowing how to make a lo-fi prototype is like a surgeon not knowing where to cut. Wireframes, mockups, and prototypes are a designer's tools of the trade, and so should be learned inside and out.
This article will explain the basics: what each can do, why they're useful, some common methods for building each, and even some best practices. And we're going to start with getting their names right.
So what's the freakin' difference? While it's by no means the only procedure for designing a site or app, the traditional design process follows these three steps...
Wireframe => Mockup => Prototype
That's a gross oversimplification, not taking into account the countless variables in between but for our purpose of explaining the basics, it's a good foundation. In general, this correlates to the level of fidelity, which usually rises as you move forward.
Again this is an oversimplification and not a rule set in stone. For example, sometimes skipping mockups and creating a lo-fi prototype early on is what's best for your project. Alternatively, you might also follow a process favored by designer Steven Bradley in which you progress from wireframes to mockups and finish in code.
Knowing that there's not exactly a 'best' process (only the right process), let's explore what each type of design looks like.
Wireframes are like the blueprint of your design scheme.You create them early on, usually the first step (or second, if you prefer sketching first), and dedicate time solely to answering crucial layout, structure, and organization questions before the team iterates on visual details.
For this reason, wireframes are low fidelity: there's a time and a place for everything, and the visual and technical details should be decided later on, after the format and structure is solidified.
That's not to say wireframes shouldn't concern themselves with visuals at all - you only need enough detail to visualize the overall layout and required space for element categories (like a sidebar, top navigation, footer, primary content, etc).
As we described in The Guide to Wireframing, that's why wireframes often include placeholders for later graphics in the form of squares with the Xs or bare-bone versions of the icons to come later.
As stated above, wireframes allow the team to focus solely on the "big picture" decisions before diving into the details. The advantages of wireframes are the same as outlines for any medium: a chance to properly plan before moving forward, reducing the risk of having to double-back because something was missed.
Additionally, as a deliverable, wireframes can be shared with the entire team so that everyone's on the same page. If you're using a specialized wireframing or prototyping tool, different team members can modify or comment on the same document, which encourages collaboration right from the start.
Moreover, wireframes can be shown to stakeholders who want to see results early on, and reveal potential edits before wasting time developing them further.
Because of wireframes' low fidelity, there are more hands-on methods to building them than the other phases:
- Sketching the old fashioned way. Simply draw on paper what's on your mind just don't get too bogged down by the details. This is fine for a quick wireframe in a situation like brainstorming, but they can be problematic in sharing with the entire team, and can be easily misinterpreted. If you prefer a methodical and structured way to sketch, we highly recommend layered sketching.
- Graphic design software: If using software like Photoshop or Sketch feels as natural to you as sketching on paper, go with that. However, this requires an innate knowledge of the program, and lacks the ability to add interactions provided by some wireframing apps.
- Presentation software: If you're wireframing specifically for a presentation, you can build it in software like PowerPoint or Keynote. The slide structure facilitates thinking of your design in terms of pages, but again this lacks interactivity. Presentation software, however, very familiar since most of us have all used Powerpoint or Keynote at some point.
- Design software: Today, software exists specifically for wireframing and beyond, like UXPin, Axure, Omnigraffle and Moqups. The advantage here are streamlined features for wireframing, like drag-and-drop usability and ease of adding interactivity through a couple clicks. The drawback is the cost some more than others. While Balsamiq is free, it lacks the interactive capabilities of Axure, Omnigraffle, and UXPin.
The method doesn't matter so much as long as it suits the project's needs and restrictions. The important thing is that you have a reliable idea of the entire project before you move forward to the more meticulous phases.
Next page: mockups and prototypes...