Using wireframes for great UX
Wireframes are an essential tool of UX designers. They come early in the design process, acting as a way for designers, developers and stakeholders to agree on how sites, apps and services are structured and laid out before it becomes difficult to make changes.
What is a wireframe?
A wireframe is a sketch of a web page which shows the layout – where all the key elements on the page are located in relation to each other. Wireframes are useful in the early stages of web design for helping agree on the functionality and layout which best meets the needs of the users (and the organisation).
Wireframes are also great for communicating with stakeholders. People are much better able to provide feedback on sketched designs than on flowcharts full of arrows and boxes. They can also be iterated on quickly – especially when using paper in a face-to-face meeting or workshop.
How to use wireframes
Wireframes should be used early in the design process. Once the team has figured out the user journeys, wireframes are very helpful for bringing those journeys to life and getting feedback from the stakeholders.
Initially they shouldn’t be much more than a few boxes on a piece of paper with labels which say what each element is. This is enough to make the idea clear and start a conversation that avoids distracting people with things that are irrelevant for now like copy and colour.
It’s a good idea to sketch the early wireframes on paper with thick markers. The thick pens force you to focus on high-level features by making it impossible to draw smaller details. And because you’re working on paper you can quickly iterate through different versions as the conversation develops.
The next step is to take your wireframes digital. Once you’ve agreed on the high-level features you can start producing high-res versions using brand guidelines. These will help work out the finer details and can be presented to actual end-users for feedback.
The great thing about wireframes is they allow you to nail down large swathes of your designs before you’ve written a line of code. The closer you get to the end of the project, the harder (and costlier) it gets to unpick the high-level design decisions that were made earlier, so it pays to get it right.
How we use wireframes at Manifesto
We normally get the Uxer, graphic designer and a dev group together in the same room for about two hours. On the wall we hang the personas, the user journey(s) and any other research deliverables that we found useful. Then we start sketching. We bounce ideas around, dismissing a lot of them, until we arrive at a first level wireframe. We share that wireframe with the client, invite their feedback and then iterate, incorporating the feedback, as many times as necessary.
At Manifesto we like to use Invision or Marvel (here’s an extensive list of wireframing tools). Both make it easy to share wireframes very quickly with the client. We sketch, take pictures of the wireframes, upload it to the tool and in 30min we have clickable wireframe, just a day after the first initial kick off meeting.
These tools are also very good for capturing all the assets related to the process: style guide, copy notes, links to staging environments etc. There are also features which allow the client to comment, suggest and share the designs with other stakeholders.
Things to remember
Wireframes are not all about UI. Rather they are just the first milestone on the way to good UI and UX in general. You should think of them as a document that captures in a visual way the shared understanding (of the project and the deliverables) between the UX designer, graphic designer, developers and stakeholders.