Web Words explained.
Web design is full of specialist terms and acronyms. Some are just fancy jargon that we use to show how technical we are and others are essential to identify processes that are specific to the medium where terms from other disciplines would not quite fit. I am not sure which category the word wireframing fits in but it’s a very useful and time saving part of the process of web design. Anyone involved in the construction of a new charity or social enterprise website should be aware of what it is and when you are likely to come across it.
The benefits of this exercise to a third sector organisation may not immediately be apparent, you might be tempted to lop bits off your website budget if you are under pressure. Think of it like taking a map or a sat-nav on a journey, it might be an easier journey if you didn’t bother but then of course you might end up in the wrong place…
Here’s a rather thorough definition from wikipedia:
The pencil on paper approach to wireframing helps get things started but is not flexible enough when successive changes need to be made - which happens a lot.
So a wireframe in it’s simplest form is a diagram of a web page layout without the design and functionality. It’s a development of the sketch on the back of an envelope. In very broad strokes it shows what you are going to put on the pages of a website. We make wireframes so we can discuss what should be on a page, how it should be ordered and to test the flow of the users journey from page to page.
Wireframing is an important part of the website design process but it’s not where the process starts. Wireframing can’t start at all until a lot of decisions have been made about what the website is for, who the users are and how they will need the website to be structured to meet their needs. We refer to this stage as the Research/Scoping phase. Wireframing is part of the Design and Test phase which follows on from it.
Online apps streamline the process
Two examples of wireframes made with online applications, Google documents on the left, allows editing and commenting access for multiple users and Mockingbird on the right allows you to make multiple links on each page so it is better to demonstrate flow or user journeys.
To make the process easier to do but also to share and make comments on there are now online applications that we can make use of. Some of the apps have basic versions that are are free and others have to be paid for, the more complex ones tend to cost more, the two that currently seem to be strong contenders to become industry standards at the time of writing are Balsamiq and Axure RP.
A simple page mock-up made in Balsamiq Mockups
They are actually very different tools, Balsamiq mockups is a static wireframe drawing application with only one link per page and Axure is a software in which you could build a complete working website mock-up. Both companies make very convincing arguments on their websites for their own approach. I suspect there are different occasions when each would be preferable. Axure costs a lot more than Balsamiq but it also does a lot more.
Wireframing is an integral part of the web design process and helps designers and developers to improve the user experience (UX) and gives charities and social enterprises an opportunity to visualise how their new websites will work before all the bells and whistles are added and make it so much more difficult and expensive to change.
Simon Fell is senior web designer at Pedalo. Follow Simon on Twitter
Here are some of examples of our own web design work for the public and third sectors
www.beatingbowelcancer.org/
www.toughstuffonline.com/
www.east-thames.co.uk/
See our portfolio.
Keep an eye out for next week’s blog, follow us on Twitter.
