6 steps to a good wireframe session

What is a wireframe session?

A wireframe is a model or representation of the broad structure or layout of a web or app page. It shows where the various elements go, such as sections, tabs, products, information and calls to action, and how the space is used. Because the wireframe serves as the very first layout of a web page, colours, multimedia content, typefaces and other stylistic elements are kept to a minimum.

The purpose of a wireframe is to give every element and function a logical, user-friendly place. You should really see it as the blueprint of your website or app, where the focus is on the content and not on the graphic side.

The key question is always: how do you make a strong wireframe? We will explain!

1. Do research to get direction and clarity

It can be tempting to throw all your ideas straight into a wireframe, but think first about the ultimate goal: creating a solid foundation that can be built on in the actual design phase. For that you need to map out the requirements of your design project and the expectations of all stakeholders.

Your design should not only convey your organisation's products, services or message to customers and new visitors, but above all make them easy to find and ensure visitors find their way around the page quickly and easily.

To tackle this you can map out the following:

• Carry out market research and competitor analysis to establish design trends and best practices.
• Ask stakeholders what the main project goals are. That clarity is essential for designing the wireframe.
• Research the end users, their preferences and buying behaviour so you can work that information into the wireframe.
• Based on your research into the end users, define use cases in order to understand better the scenarios you are designing for.

2. Make it easy to find the research data again

During your research you will gather quite a lot of data, such as use cases, buyer profiles, market research data and project requirements. At various points in the design process you need to be able to fall back on that data.

So first of all, make sure all research data is documented and organised in such a way that finding it again does not cost much time or effort. That way none of the work you put into the research is lost and it finds the right place in your wireframe.

Here are a few ways to arrange that quickly:

• Document every important piece of information you come across.
• Organise the research using macro and micro categories; you can do that with folders and subfolders.
• Make notes to capture core concepts such as buyer use cases, buying behaviour or important user feedback you came across during your research.

3. Map out user flows

User flows relate to the path a user follows during a website or app session. That journey includes the point where users enter your website or app, all the points where they take an action, such as the pages they visit, the buttons they click or making a payment, for example) and where they leave the website or app.

A simple example of a user flow: a user lands on your webshop after clicking an advert for men's shoes. On the website the user can filter the shoes by price, brand, size and colour, zoom in on one or more of the shoes, view the specifications, put one of the items in the basket and finally complete the payment. 

It is these kinds of interactions within your website or app that together form the user flow.

This process has to be mapped out in a user flow so that you do not forget crucial design elements such as the basket, the filter or the list of specifications. If elements like that are missing, it can confuse visitors and they may drop out, which means fewer conversions. And that is exactly what we do not want!

User flows form the basis of your wireframe, so take the time to get them clear. You can do that as follows:

• Map out user needs by asking yourself the following: what goal do visitors have on the website/app? What might their first questions be? What kind of functions and features are they looking for? What information do they need in order to navigate smoothly?
• Draw up a diagram covering the user's route to the website/app, along with all the steps they have to take up to the ultimate main goal (requesting a quotation, completing a transaction). 
• Keep the user flow logical and take into account every possible need and wish a user may have while navigating.

4. Create a minimalist layout for the design

Now take pen and paper to sketch out all your ideas for the layout. At this stage you create a basic structure indicating which elements the page must contain, which UI element goes where, which tabs are used and where the text boxes appear. 

The point is to create an elementary structure of the web page that incorporates all the needs of the users and the business.

Please note: none of this has to be set in stone yet. Make sure you do not get bogged down in details. Less is more at this stage. Do not worry yet about typefaces and colours, and concern yourself only with a sketch rather than the final design.

Below are a few questions you can use to carry out this step well:

• How can I best arrange the UI elements with a visitor's end goal in mind?
• What should the user see the moment the page opens?
• Which information should be displayed most prominently?
• Where should the page's main message ultimately sit?
• Which buttons does the user need to navigate the website or app design well and efficiently?

Once the basic structure is there, show it to your colleagues or your manager, for instance, for a first round of feedback. Adjust the layout further as needed to improve usability.

5. Determine the level of fidelity and fill in the details

Now that there is enough clarity about the direction of the project, the user flow and the basic layout of the wireframe, it is time to fill in the details.

At this point you have to decide how detailed your wireframe will be. Once you have established that, you can fill in the details for your wireframe as follows:

• Fill in the details progressively, so from top to bottom and from left to right.
• Add the basic details for the usability of the website or web app. Such as the navigation bar and search bar at the top left or right.
• Add elements you think will be useful for visitors while using the page and consider where they are best placed.

6. Test and optimise

With all the details in place, your wireframe is ready to be put to the test. You need to test the wireframe to determine its usability. Are all the design elements a user needs present? And are they in the right place?

Testing also establishes whether essential elements are missing or whether there are other requirements to be met. Enlist the help of your colleagues or have real users test the final product. Any misses should be corrected before the definitive wireframe moves on to the next steps of the design process.

Tip: use wireframe software

Besides the traditional pen-and-paper session for wireframing, you can also use wireframe software. Doing so has a few important advantages over working on paper.

With a wireframing tool you can dramatically shorten the time needed to design a wireframe. You can make use of handy drag-and-drop placeholder elements and ready-made wireframe templates, for example. A tool also makes it easy to collaborate with team members or clients and receive feedback in real time.

Do you still have questions about making a wireframe, or could you use some help with it? Feel free to get in touch and we will gladly help you further!

Get in touch