The art of Wireframes - how not to get tangled in wires

Summary of blog post: u want to design a wireframe so that u can visually represent the site or page to others. I'll be discussing a low-tech version, high-tech version, and a summary of key things to consider when designing websites.

So, u want to design a basic visual representation of your idea.
You know what u want, but u really don't know how to visually represent your ideas.

Well there are two solutions that u can use:
The Low-tech version and the high-tech version of a wireframe. The low-tech wireframe involves paper, the high tech a computer.

So lets start of with the first option. The low-tech wireframe.
1 - grab a sheet of A3 paper (yes the big one) and ensure the long end is nearest to u. This represents all the space that you have available on your website
2- grab some different shaped post-it notes
3 - grab a large thick texta/marker/sharpie pen

Lets look at what we call the globals ie the parts of the website that will not change.
* logo in top left of site that hyperlinks back to your home page - write down on a small post it note "logo/home" and place it in the very top left corner of the paper. This will not change across the site.
* header and footer - this will have repeating information at the very top (header) and bottom (footer) of the page/site. For example the header may have a menu, and it may have a banner image and it could have text. The footer will tend to have copyright information and dates , a link to privacy statement , information about the company etc. Again write "header" and "footer" on the long rectangle pieces with key things you want to display
* there could be a left and/or right hand menu column that runs down the entire page for navigation, or the more familiar right hand side blog information eg about me, archive posts, image gallery, links etc. Again label this "left menu" and/or "right menu" with a few notes on large horizontal post it note
* unique page title - to ensure that search engine results can be displayed with accurate content to facilitate better searchability and findability (with the exception of framed pages etc)

You then have content specific to a page layout. Here I suggest that u consider the idea of templates and re-using content. But that's a topic all in itself that we can look at later. Lets keep going with wireframes.

Again, write on post-it notes that roughly represent your ideas for dimensions for the layout and content, and then keep placing notes on the A3 sheet of paper. When you have moved the notes around, re-labelled the post-it notes, and are happy with how it looks, use clear sticky tape to stick everything down and maybe even take a photo that you can send to others, or yourself (just in case the paper is lost and you were not lucky to have someone taking or typing notes).

At this point I would show it to a few people currently involved with the project, so they can look visually at what you've done and comment. Now pat yourself on the back for a job well done. Congratulations.

So now we look at the high-tech wireframe.
You could start off in much the same was as the low-tech version, but use a computer program like powerpoint. Use the landscape orientation as it provides a rough screen image that maps/is a visual representation of the computer screen. In powerpoint u have a multitude of shapes and dimensions that u can use to create your page. Also remember that with powerpoint and other packages, u may be able to copy images that u own or currently use on your website into the powerpoint slide. Use whatever is available to u, and that u have permission/copyright to access eg company logos or brand images, an images folder that u can use to to pull images into your slide, or marketing material. Just ensure that the images are web ie compressed and in a format that u can use eg gif, jpg or png. Images are great because they can provide a richer user experience to people instead of a few coloured boxes. However DO NOT get caught up in the image too much. People can and do get very distracted by images - as they see the image in their mind and then cannot change their mind once they have seen something. U have to manager your client's expectations. At least by keeping it basic, it allows u to assess the content and framework without a visual distraction.

If you want to get more fancy then there are programs out there that the pro's use, but unless u want to do this professionally, u may find that you can get good results via low-tech or high-tech solutions mentioned above.

So, in summary:
~ understand what u want the website to look like
~ get a feel for what other sites do and what u want your website to be able to do, or behave
~ why are u creating this website - who will view the site and why will they visit your site more than once
~ what is your market and what information do they want to see. Is there a particular format that everyone
~ seems to use that you can adapt to your own purposes ?
~ what are the key messages that u want to get across on the site
~ what content do you want and how will u get it - is it in a database or just typed in
~ you must use a unique page title - for searchability and findability
~ most important content goes at the top of the page unless you have deep links direct to content - avoid going "below the fold" in you can help it
~ ensure standard based coding is used to ensure the website looks and functions well in all browsers