I’ve talked about wireframes a couple of times before. As website designers and developers we often use them in house to enable us to decide on the layout of a page or website. For the larger websites we would really struggle without them as we need the whole team to be “on the same page” – so to speak.
We don’t often share our wireframes with our clients. This is because essentially they are a bit like technical architect drawings. We have found previously that not all of our clients want to be involved at this level and certainly not all would be able to visualize the finished website. At worst some clients might be completely put off by the wireframe and it could cause some unnecessary stress.
We usually create the wireframes using pen/paper, kids drawing tools and perhaps Microsoft paint! So not very sophisticated and not particularly client facing but perfect for our internal meetings and not very time consuming (our time is your money!)
However our current project for Digital Invoicing did require a functional wireframe. The clients were technically minded and wanted to be involved fully in order to achieve the best possible results. The wireframe is below.
So how do we do it?
As you can see this is so very different from their existing website. Essentially we
- Held a number of meetings to discuss with Rob and Tim what wanted form their new website revamp.
- We brain-stormed everything that we could include.
- We completed some competitor research and also some vertical research to see what other companies were doing to solve similar issues for unrelated products.
- Refined our list into a manageable number of features for the number of pages.
- Once we had our “must have” features for the home pages it is a case of dividing up the page and creating the wireframe.
The page needs to remain aesthetically pleasing, balanced and use a tight grid. Rob and Tim were also keen that the page did not feel cluttered and didn’t scroll too far.
We are really pleased with the results.
- The new layout is interactive, allows for lots of important information and uses plently of whitespace to make it easy to read.
- Importantly we highlight their target market in the banner so that visitors can quickly decide if the product is for them. Targeting your website (and business) in this way means less time is wasted trying to convert customers who do not really need/want your product and you can really focus your message.
- Clear call to action (did you spot the bright red sign up button !?!)
We have since made some adjustments to the wireframe and are now working on the graphic design to add colors, textures and a bit of magic to the dull wireframe. Check out the bog soon for an update!
