A while ago my brother advised me to give wireframing a go, he suggested Mockingbird as a free and simple tool and I was keen to try it out. Many layout ideas and the realisation that there actually are endless possibilities later, I decided I needed more information.
A Smashing Magazine article on this subject (http://www.smashingmagazine.com/2009/09/01/35-excellent-wireframing-resources/) seemed a good place to start and with an abundance of links providing varied advice, it resembled a wireframing gold-mine.
The article is almost two years old, but I’m guessing that the basics remain relevant, and as always when reading articles and blogs, the links lead you on an unplanned path in to a world of information. At one point I found myself on Jason Santa Maria’s old site reading about his Grey Box method (http://v3.jasonsantamaria.com/archive/2004/05/24/grey_box_method.php) which has some interesting comments both in the article and from readers. My favourite article however explained one company’s use of paper wireframing – http://v3.jasonsantamaria.com/archive/2004/05/24/grey_box_method.php. I guess this is unsurprising considering my passion for paper cutting (see previous blog posts).
From what I have read the wireframing stage serves to ensure no time is wasted on visual designs that are then scrapped, and to allow the client/designer to ensure that the UX is appropriate and optimised. So theoretically no time is wasted – sounds good to me!
My design experiments are carried out on a new site for my Mother’s cake business, and as she has never been a client before and I have never designed a website before, it should be a pretty interesting process. The site will have two main purposes, to allow potential customers to view my Ma’s cakes and to find her contact details. I began by paper wireframing the home page.
I really found myself thinking through how people will use the site and although I hadn’t labelled the buttons and images on the paper I actually have a clear idea of which is which. And once I had paper wireframed and thought through the designs a little more I had a go at wireframing in Photoshop.
Now I guess it’s time to see what the client thinks…
clare lisbeth 