What is a wireframe?
Essentially it is a blueprint or skeleton for a website, it may look very basic from a visual point of view, but the purpose of a wireframe is to develop the layout of content on a page and to determine how elements of functionality can be integrated. A wireframe should look almost like a sketch (in some forms it may only be a sketch!), made up of outlines, basic icons and placeholder elements.
What are the benefits of wireframing?
The idea behind a wireframe is to demonstrate to the client/stakeholder/user what elements will exist on the page and how those elements will interact with other areas of the website.
Before we go ahead with a visual design, it’s incredibly important to get the structure and user journey correct first, so a wireframe can help us achieve this at an early stage. It saves us time too because when we begin the wireframing process, it’s so easy to make changes to the page structure. Doing this at the visual design stage is a hugely time-consuming process so we strive to get the wireframe correct and approved before we continue to visual design.
Wireframes also allow our clients to not be clouded by visuals and focus initially on the user experience and functionality of the site. It allows the viewer to take a step back to assess why we have chosen to lay the page out as such, instead of being distracted by an image they might not think is right.
As well as this, wireframes allow us to design for responsive websites a lot more efficiently too as we can visualise how the site will flow across a range of devices and how elements will shift and adapt. Fifteen doesn’t do websites that aren’t responsive, so it’s a pretty key element of our design process.
What cons come with wireframing?
Although we would always advocate wireframing within a website design project, there are some cons involved.
Firstly, if the wireframes are too ‘designed’, you can run the risk of disappointing certain stakeholders who may view it as a final design. However, as long as you make sure that the client is fully aware of what a wireframe is and why you wireframe this shouldn’t be a problem. Just make sure your wireframes are devoid of elements like logos, images, iconography and too much colour – in fact, we’d recommend sticking to black and white.
Second, wireframing does create another step within website design, although we would argue that it’s an incredibly important step. While it may seem a time-consuming exercise initially, it can save you a great deal of time further down the line. For example, when structural changes are pointed out at the wireframing stage, they’re very easy to rectify, if they are pointed out at design stage it can take a much longer amount of time to put right. So while it may seem tiresome initially, it will be a time saver in the end!
How to wireframe?
Wireframing doesn’t require fancy tools, although it can be enhanced by using them. You could begin with good old fashioned pencil and paper, sketching our your initial wireframe by hand. Once you want to move onto a digital format there are a number of ways you can create your wireframes, choose which one works for you! There is software that can facilitate this, like the Adobe Creative Suite, Balsamiq and Axure. There are also some web based apps such as Wireframe.cc, Moqups and UXPin. This is not a definitive list as there are lots of options out there!
When to wireframe?
At Fifteen, almost all of our digital projects will go through a wireframing process, whether it’s a brand new website, an app design, or a landing page – all will require a level of wireframe design. We view it as an essential part of digital design, when done well it can help ensure that a page’s content structure and functionality hits the mark and delivers what the client and their users will want.