Our Beginner’s Guide series is designed to help those who are just starting to learn about user experience, or those who want to brush up on the basics. In this part, we take a look at wireframes.
What is a wireframe?
A wireframe is a visual representation of a user interface, stripped of any visual design or branding elements. It is used by UX Designers to define the heirachy of items on a screen and communicate what the items on that page should be based on user needs.
The wireframes are the floor plan for your website, creating a vessel for which design and content can flow into.
The easiest way to think about a wireframe is in terms of building a house. Before you apply all the paint and furnishings the architect needs to draw the floor plan. He needs to make sure the spaces in the house function well and that they are where the occupants would expect them – no good having a kitchen in the master bedroom or a light switch behind the toilet! The wireframes are the floor plan for your website, creating a vessel for which design and content can flow into.
Wireframes can stretch from a low fidelity pencil sketch to a high fidelity and fully annotated diagram and all that comes in-between.
They are useful for a number of reasons:
- Giving UI designers a basis to begin creating screens
- Using as a reference point for development
- Communicating the experience with stakeholders without muddying the waters with visual design elements or branding
- Exploring ideas rapidly
- Using as a basis for prototyping and for user testing ideas early on
Listen: Design Untangled Podcast – Wireframe or Wirelame?
When do I create a wireframe?
Wireframes are generally created after your initial persona, user journey, sitemap and other discovery activities are completed. However, lower fidelity wireframes can appear during the discovery process itself in order to explore possible options for different functionality. These will typically be in sketch like format and will more than likely be throwaway designs, rather than something which can be used as a basis for visual design treatment or development.
Before you start to create a wireframe you will certainly want to have a strong grasp on your user’s goals, motivations and tasks they will want to achieve. You will also want to understand the structure of the website and it’s content. This is so that you know what the purpose of each page should be in terms of getting the user to their goal.
If you don’t have this information yet, look back at our beginner’s guide to personas, beginner’s guide to user journeys and beginner’s guide to sitemaps.
How do I create a wireframe?
Tools
If you are going low fidelity then all you need is a pen and paper. If you are going the software route you are best off using one designed for the task as they contain reusable common UI elements to make the process faster.
Tools such as Axure, Sketch, Adobe XD and Figma are all commonly used by UX Designers. This is because in addition to wireframing, they also allow for powerful prototyping capabilities.
The most important thing to remember here is you aren’t trying to create a fully designed page. It is important that the wireframe provides a realistic representation of the intended final page, but your time should be spent making sure the right things are on the page, in the right place and on the right page rather than making it look pretty.
Content
You should also be doing your best to think about what the content on the page will be. Lorem Ipsum works ok for print design, but you need to be thinking about:
- what sort of information the user needs to see on this page
- what type of language should be used
- where supporting content should be
Whilst the content certainly doesn’t need to be the final article it should be a close approximation.
With some rare exceptions, you don’t want to be putting images into your wireframes. If it is a particularly brand led site then you may wish to provide a comment indicating what sort of image you envision going there.
Layout
You will need to have at least a basic appreciation for web page layouts as you need to keep in mind that this page may eventually have to be built. There may be a Design System in place or your developers may use a particular grid based system. It is worth checking with them as to what layout options are available, particularly in heavily templated or locked down systems.
In most cases you should be able to create a wireframe fairly quickly by simply dragging and dropping various UI elements onto the screen using a dedicated wireframe tool. You should use this flexibility and speed to come up with multiple routes and assess the pros and cons of each.
What should a wireframe contain?
Aside from the UI design your wireframes should contain a number of things which will help when using them as a reference point, or when discussing them with either the client or the project team:
- A reference number which links the page back to your site map if you have one
- A page title, again linking back to the site map
- Depending on the intended audience you may wish to place call outs in order to describe interactions or different states on the UI
- Any other supplementary information such as if you are using a particular template (in the case of a CMS) or notes on the rationale for certain decisions
What should a wireframe look like?
Most wireframes are essentially black and white diagrams with various UI elements and notes upon them. In most cases they should be devoid of imagery, branding and colour (aside from links/call outs).
Some tools, such as Balsamiq, lend themselves more towards a ‘sketched’ appearance which has the (supposed) benefit that it reinforces the idea that the wireframe is disposable, hasn’t had weeks of time taken on it and therefore can be openly fed back on without offending the designer.
Some clients may have trouble making the leap of imagination from sketch representation to final page so use your best judgement to decide how ‘finalised’ the wireframe should appear.
What’s next?
You should now have a set of wireframes which can be used to present to your client, gain user feedback or present to your project team. It is likely you will need to do a few iterations at least on your wireframes so don’t be too protective of them, it’s all part of the process. Next time, we will take a look at prototyping.
Images courtesy Mike Rohde, Joe Crawford