Differentiating between different phases of the design process can be confusing, especially when the terminology is used so loosely. But that's no excuse for a designer not to 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. And not knowing how to make a lo-fi prototype is like a surgeon not knowing where to cut.
These are a designer's tools of the trade, and so should be learned inside and out. So if you want to learn how to create website mockups, learn the best wireframe tools or master rapid prototyping, you're in the right place.
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. Use the drop-down menu above to navigate to the page you want.
Wireframe => Mockup => Prototype
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.
It'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 follow a process favoured by designer Steven Bradley in which you progress from wireframes to mockups and finish in code.
Knowing that there isn't exactly a 'best' process (only the right process), let's explore what each type of design looks like.
Wireframes
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 organisation 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 are solidified.
That's not to say wireframes shouldn't concern themselves with visuals at all – you only need enough detail to visualise the overall layout and required space for element categories (like a sidebar, top navigation, footer, primary content and so on).
Mockups
Mockups do for visuals what wireframes do for structure.
They are static displays of how the visuals of the final product should look. This offers you the opportunity to make the vital decisions about colour schemes, typography and style; affording you some time to experiment to ensure your final choices are the best choices.
We use an online tool for proofing mockups, called Evrybo.
What benefits does Evrybo offer you as a client:
- With Evrybo you can share your design and gather feedback easy — right on the design itself.
Analyze how users interact with your interfaces so you can tweak and improve your designs.
Prototypes
Wireframes handle structure, mockups handle visuals, and prototypes handle usability.
Prototyping is the first phase in which you can actually interact with your creation, even if only slightly. Prototypes enable you to explore the UI, pinpointing which elements work best, and predicting usability problems before they become problems.
Original article sourced from CreativeBlog.