When creating a new web page, whether a stand-alone landing page or multiple pages for a whole new website, we are sometimes asked:
- Why do we need to “wireframe” these pages?
- Why don’t we just get stuck straight into design?
There are a whole host of user experience reasons as to why the wireframing process is so important, but we wanted to summarise a few of the key ones, along with a few of the more practical reasons that wireframing is just a sensible part of planning and preparation.
What is a wireframe?
A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website1. They are not meant to be the design of a page, portray any graphic elements or convey the brand of the website.
Why are they important?
Wireframes allow you to properly plan the layout of your key page templates without distraction from other elements. If you don’t invest in this part of the planning process, then you are very likely to either (i) end up with a page layout that doesn’t work or (ii) spend even more time later on in the process revising and amending page layouts.
Prioritising content without being distracted by the design: Wireframes allow us to define the information hierarchy of your page/site, making it easier for us to plan the structure according to how you want your users to process and act on the information, without getting distracted by the subjectivity of the design itself.
Reduce costs during the design and build stages: Wireframes save you money. Planning and agreeing the page structure and content at this stage reduces the amount of iterations required further down the project. The wireframe allows you to give the designer a very specific requirement.
There will always be iterations at the design stage but if your information hierarchy is defined, the requests will then be down to the design itself.
Stakeholder management: In web development projects there are often many stakeholders with a view on what needs to be included on any given page. The wireframe allows you to enforce a sign off process where those stakeholders have to confirm and agree the content and layout of the page before you even start to consider how it will look and feel.
Early user testing: You can run Usability Testing on wireframes which allows you to ensure your foundations are achieving your objectives and that it’s intuitive from a user’s perspective. Don’t make your users think. For example, if a user can’t figure out where to go or what action they need to take on a black and white wireframe it doesn’t matter what styling you add!
Mobile/Tablet: This is also extremely important when planning and designing for smaller devices. In the past we’ve assumed that smartphone users were task-driven, e.g. I need to find the opening hours of that shop or I need a phone number. But nowadays people are just as likely to browse the Internet, as well as wanting to complete tasks quickly, irrelevant of what device they are using. Wireframing for these smaller devices allows us to define and translate the logic of how the CSS will adjust the styling at certain break points.
So in conclusion to the question, ‘do you need to wireframe this page, can’t you just design it?!’, in some cases, yes we may be able to jump straight to the design phase, but a lot of the time wireframes are needed to establish the information hierarchy of a page based on what you would like your users to do. It allows us to drill down to the value and structure of a page based on your users’ needs and requirements as part as a whole site strategy... which will save time and investment in the long run.
1Brown, Dan M. (2011). Communicating Design: Developing Web Site Documentation for Design and Planning, Second Edition. New Riders. ISBN 978-0-13-138539-9.