What is wireframes?

A wireframe (also “web wire frame”, “web wireframe”, “web wireframing”) is a basic visual guide used in web design to suggest the structure of a website and relationships between its pages.

So if you don’t know wireframe or don’t have the habit to integrate it into your work flow, can you call yourself a web designer? It may not be necessary to use wireframe to do a simple web brochure, but do you want to do web brochures for the rest of your career? I don’t. Here I decided to gather some useful information and tools on wireframing. Another motivation of this post is I wish more people could recognize the power of Firework CS4 and how it can same your time. By the way, Adobe did not pay me for this, and I think Dreamweaver is quite stupid.

Why you need to use wireframes

• Wireframes help you communicate the fact that your design is a work in progress—and therefore subject to change based on feedback
• Wireframes help ensure that the functional design is evaluated separately from the visual design
• Wireframes don’t become dated like comps, so you can reuse those unchanged dialog box sketches in your version 2.0 functional specifications even though you have completely reskinned the application
• You can create wireframes much faster than you can design high-quality graphics—and it doesn’t require much artistic skill
• Using wireframes instead of comps for initial design reviews helps you to avoid the inevitable “please make the logo bigger” request until the functionality has been decided

from Adobe tutorial Wireframing with Fireworks CS3

In one word, it keeps things organized.

What could wireframes look like?

It could be boring like this one. Or much more interesting.

• Component Based Wireframes this is an inDesign template available on unifiy

• Sketchboarding
  

• Object-Oriented Wireframes (unfortunately this is still under development)
  

• Engaging Paper Wireframe this looks fun
  

• Structure Juxtaposed Wireframe personlly I think this is only good for large coporations who are already used to using visio on a daily basis. For general clients, they will only ask me. What the heXX are you talking about?
  

• Coloured Paper Templates

Anyway, you have an idea about the approaches you can take. A survey on twitter says most people use pencil and pen. So “analogue“. True it is quick. In most cases, Wireframes is the first step of web design, do you want to give your client a professional impression or an “analogue” impression? There are better ways to do it digitally and professionally.

Who should create the wireframes? IT geeks or designers?

After reading an article about the past and the future of wireframe. I was assured this job should be the designer’s (hope we can charge them for it). A lots of people still have the impression that “designers” only can do artistic Photoshop jobs, so they are free to ask you to make the logo bigger, center align the text. We should show them with wireframes that we are also good at information architect.

Instead of boring documents wireframes should be visualized more lively. A picture worth a thousand words. There are tools to help you do that:

• free wireframe graph paper for your convenience.
• commercial softwares OminiGraffle has been around for quite a long time. Personally I think it is over priced.(USD200)
• Flairbuilder: Interactive wireframe builder (Commercial license)
• InDesign Photoshop and Illustrator
• Fireworks

Why use Fireworks for this job

Things you can do with Fireworks cs4 but not the others

1. Design and linking pages as an interactive PDF
2. Export Your Website Layout as CSS and Images in Fireworks CS4
3. Rollover Buttons in Fireworks
4. Create a slideshow
5. Since you have already been using Photoshop for PSD layout why not choose the software integrates it most conveniently.
   

Put wireframes and fireworks together, who would benefit from them?

An unfortunate web designer who has a control freak client. Bingo!

Esthetically, can Fireworks do Photoshop and illustrator’s job ?

No,but in web design, not all components need very detailed the graphic work, and FireWorks is good enough for most of the jobs. You can always import Photoshop works into Fireworks since integration between these two isn’t a problem.

Tutorials on doing some amazing graphic works in Fireworks

qrayg.com

Firetuts
Adbobe

Further reading on wireframes

• Improving Your Process: How Wireframes Can Help
• Wireframing with Fireworks CS3
• wireframes magazine

Fireworks resources

• cbt cafe
• firetuts
• fireworkzone
• Designing a website application with Fireworks CS4

Further reading on interface design

• Design Interfaces: this is an online book, full version is available at Amazon