Website Wireframes

What is a website wireframe

A website wireframe is the basic structure of the website. It does not have any functionality or design it's the basic concept of the layout and works as a guideline for the designer.

The wireframe must incorporate all important information keeping the page structure clean and accessible. As a web consultant you decide the layout of the website not the client. In my experience I find that most clients accept structural changes very well when done right.

Why work with wireframes
Think of a website as a person where the wireframe is the skeleton. The skeleton alone does not do anything, can't even hold himself up, it needs muscles for that. That's where the design comes into action.
But a skeleton and muscles alone don't do anything you need a heart and a brain that's the development part.

The following example is a very basic wireframe built exclusively for this article as visual aid:

Notice that I did not specify any color, this is important because the designer might be influenced by any color or scheme you introduce in the wireframe.

A website wireframe must include all the non design elements that will show on the page. For example if the content is a text article you should define the title, article information like author, date, category, and body text to work as guideline for the designer.
Wireframing will allow the project run smother and easier from the design and development point of view by reducing their process to simple and quick question-answer issues.

Tips for producing high quality wireframes

Search Engine Optimization (SEO)

When building a website it's crucial to think of SEO. Basic SEO will help you understand key pages for the website as well as their layout. Do some keyword research this will help you build the navegation and key pages for the website. It helps if you create a flow chart or mind map.
Many people this of SEO as a final step when building a website when in fact SEO should be on everybody's mind from beginning to end.

SEOmoz has covered this very well on their article SEO Wireframing.

Grids
I'll be honest. I never really liked grid because they kind of make your mind get stuck to that grid structure but on the other hand you will need some sort of grid structure to guide yourself: Page width, sidebar, content area, menu area, logo area, advertisement area, etc are all part of a basic grid structure that will help you along the way.

Although times are changing 1024x768 is still considered the default screen resolution and therefore all websites should adequate to this resolution. Wireframing for 1024×768 resolutions means you have somewhere between 940 and 970 pixels width to work with and around 580 or 600 pixels of of the website visible on the browser so take these measures into consideration.
Don't overdue your header if it hides the content and doesn't add anything to the user experience when visiting the website.

One tool I find very useful is the Grids System Generator that facilitates the creation of a grid to help you, based on the most popular and effective grid systems.

Trip Wire Magazine wrote a kick ass article with allot of information and helpful tutorials about css grid systems called 45 CSS Grid system layout generators and Tutorials that every designer should know. It's a very interesting and helpful reading. I recommend it.

Be negative, think of the worst case scenario
This is a very common rookie mistake and very usual for individuals to forget about when wireframing on a tight deadline.
You start by creating a wireframe based on the best case scenario. This means the user will always do every action correctly, but what happens if he doesn't? What happens if the user is filling a form and puts letters on the phone number input? Or numbers on the name input? Or if the user doesn't fill an obligatory field?

By thinking of the worst case scenario you will be able to anticipate common error actions and improve your work quality, help the designer and the developer.

• Before starting a wireframe be sure to look for good examples of layouts you will be making. Making a company blog is allot different from making an e-commerce website.
• Make a 15min session with 4 or 5 other people to simply point out features they would think that might be a good practice to include on the website.
• Experience tells me designers and clients will be influenced by any colors or text you include in the wireframes. White and gray colors and never fill blocks with color unless necessary and, if possible use real text / actual text from a website instead of Lorem Ipsum. This way is easier to identify what will or will not work.
• Ask for feedback from your co-workers. You might think you have the perfect layout concept but if more people disagree on some aspect, maybe you should reconsider.

Tools for Wireframing

Unfortunately I don't know any good free wireframing tools. I've always been an Open-Source / Freeware apologist but in this case I had to give in it's worth to pay for the software:

• Pencil, Pen and Papper
  Sometimes it's just easier to sketch something on paper and later adapt that to a cleaner digital version. I'm not a big fan of using paper and pen to wireframe professional projects but it's always my start point. This is the only good free tool I know at this point.
• FlairBuilder is a very interesting tool built with Flex and with great potential. It's very intuitive and has a very good gallery of components and functional component. The only downside I see to this tool is the lack of guidelines althought it supports grid based backgrounds. It's just not the same.
• Axure (PC) - This is one of the most powerful tools I've experienced it would be my first choice for windows based computers but the price is over my available badget.
• OmniGraffle (mac) - This is probably the best tool I know for Wireframing. It's simplicity and effectiveness makes it extremely useful and easy to learn. Unfortunately it's only available for mac.
• Balsamiq mockups - I'm not a big fan of balsamiq mockups for me they look to to hand drawn to be taken serious when presenting this to other people but I have to admin this is a great peace of software if you are not looking to spend alot of money.
• SmartDraw - is a good peace of software, very feature complete but that doesn't support pixel units making it harder to build web projects. The have good user / client support over Twitter.
• Microsoft Visio - A very complete software from Microsoft that will allow you to do a whole lot more than wireframing. Not the most user friendly price though.

You can actually do wireframes with any software that can draw a line but many features will be missed. Photoshop, Illustrator, PowerPoint, inDesign, HTML and Adobe Flash are all valid options but do not allow you to do much more than the basic wireframe and will take longer.

For further reading visit:

• Excelent tutorial on Web Designer Depot: Using Wireframes to streamline your development process
• Website Wireframing @ Wikipedia
• About.com topic on Wireframes
• Wire frame your site, SitePoint Article
• Quickstar on prototyping with wireframes
• 20 Steps to better Wireframing