A central aim of most UX design for websites and apps is determining what the user will see at each step in their journey. Creating and testing wireframes of web and app screens gives designers, testers and other stakeholders relevant, non-precious options to help form the best interactions for each of those steps.
What is a wireframe?
One way to think of a wireframe is like thumbnails on steroids. Many kinds of designers draw thumbnail sketches to quickly grab the essence of a design or layout, usually in gray pencil or black pen, and usually at a scaled-down size, making them fast and avoiding non-essential details.
Just like that kind of thumbnail, wireframes show all the elements and general arrangement in a website or app layout. Unlike thumbnail sketches, wireframes are usually drawn at something like full size and may represent many screens in a sequence.
Most wireframes are drawn on computer using the Adobe CC suite, Sketch or various web apps. However, they can be hand drawn and many UX designers give their wireframes a hand drawn look, indicating the intended openness of the process. Placeholder content (text and images) is used in wireframes to show the amount of information, and may also indicate position and hierarchy.
You can see what wireframes look like in this Google Images search.
Wireframes should be informed by the journeys that users will take in the site and be created after the site information structure is understood. However, it can also work to cycle through journeys, structure and wireframes to refine the outcome.
I like to work towards having a clickable wireframe in most instances. When the main navigation links in a wireframe work, it’s a very clear tool for presentation and testing.
What is NOT a wireframe?
A wireframe should not indicate style, like font, colour and shapes. Style will be added in the visual design stage after the wireframes are tested and agreed to represent the best way to proceed.
For a project addressing significant UX issues or with a novel UX approach, visual design will stick closely to the wireframe setout. For other projects the visual design may vary quite a lot from the wireframe while still including all the same elements. But the bottom line is that a visual design is not a wireframe.
At Univers, we often make sketchboards before (and sometimes instead of) wireframes. A sketchboard is a hand-drawn screen, kind of half way between a thumbnail sketch and a wireframe in terms of detail. For us, a sketchboard is on paper and does not have any computer-generated effects.
Normally a wireframe shows the entire screen interface so something which just shows one aspect is more a sketch or test. At the other end of the spectrum, a fully functioning screen is more a prototype than a wireframe, though I feel the line is blurred.
Why are wireframes so good?
For large or complex websites and apps, wireframing is an essential part of getting the UX right. Wireframes are the most expedient way to test layouts and provide the designer with a good amount of flexibility with lower time and thought investment than more worked-up visuals.
For websites and apps of low to medium complexity, wireframes will probably help you get a good outcome quicker. However, time, budget and team dynamics may not allow for wireframes. In that case, and if the user journeys are simple or believed to be well understood by users, the designer should consider if sketchboards are more appropriate.