The science of a good wireframe
Science. What a great subject. From revealing a watery past on Mars to the discovery of new particles – the subject is brimming with truly amazing feats. So when I had the chance to work on a new project with the British Science Association, I felt… well cosmic!
From the word go, I knew that working with the British Science Association to create a new project brand and website was going to be right up my periodic table. But what I was most excited about was creating the wireframes for their new responsive website.
For me, wireframes are the beginning of something beautiful. Getting them right and following a process to work most effectively with people involved in the project can save valuable time further down the line and result in very happy clients. Not every wireframe is the same, but there are some components and methods that are common to getting the best results.
Here are my five key thoughts on a successful wireframe journey:
Step 1: Enjoy & get into the mindsets
The secret of delivering a good wireframe is to really get into your subject matter and enjoy learning about it. The chance to work on a science project was new and exciting to me, and I took the time to enjoy getting into the topic. Do your research, check out what other websites are out there and get into the mindset of your users. Do they have a current website and what can you learn from this? What are the most popular pages and search terms? To quote Nelson Mandela:
“If you talk to a man in a language he understands, that goes to his head. If you talk to him in his language, that goes to his heart.”
Step 2: Be inclusive
It’s unlikely that you can crack a good wireframe on your own. Interaction from your users is key so it’s a good idea to arrange a workshop date to get the key players involved right from the beginning. Here are a few tips:
- Arrange a workshop date as soon as possible
- Discuss what websites your clients like/dislike and why
- Get them to work in pairs to discuss personas and identify typical user needs
- Do a card sort to identify important areas of navigation
- Get them to draw a picture of their ideal homepage
Use the information from your workshop to create and agree an information architecture, and get feedback before continuing to Step 3.
Step 3: Doodle
Put your computer away and out with your notebook and pencil! Go to the pub or relax on the couch and draw, draw, draw. Use the information gained in your workshop to create wireframes that can be re-used to accommodate every persona and need. Share your findings with your team and get feedback before continuing to step 4.
Step 4: Technical drawing
I’ve tried many a wireframing technique, including various pieces of specialist software. However, I always come back to using Illustrator, partnered with a wireframing kit. Here’s what I’ve found to be useful:
- Use soft greys, white and one colour – a wireframe shouldn’t look like a polished design.
- Take your time drawing up your first page – it sets the scene for the rest of your pages.
- Keep it simple. It’s true – it’ll be much better for your client in the long run.
- Ensure that all user needs and journeys identified in the persona exercise are met.
- Make your drawings flexible so that templates can be re-used and keep costs down for your client.
- Ensure that your wireframes have sufficient annotation so that your client can refer to these notes whilst soaking them up in their own time.
Step 5: Share
This is a very important step in the process. Some people feel a bit lost when viewing a set of wireframes, so it’s essential to run through them with your client and to be open to feedback. Be sure also to collaborate with your designer and developer before sending to your client.
I hope that you’ve found these 5 steps to be useful. And above all enjoy the process – like all great explorations, the journey is the fun part!
Image credits
Finding liquid water on Mars image by AFP Agence France-Presse
Nelson Mandela image by Flickr user lasanta.com.ec
Card sort image by Flickr user Rosenfeld Media
