Joel Tachau — Fri, 09 May 2008 17:04:28 GMT

I studied with Paul Rand ten years ago and remember a couple points he made regarding design that are relevant to this discussion:

1) Early designs should look rough. Use paper such as newsprint so that the lines show that this is a rough design.
2) Use cheap materials for design exploration. If you use expensive paper, for example, you may be less inclined to crank out drawings or make mistakes.

Paper prototyping is the equivalent to the designer’s thumbnail sketch and should be a part of the IA’s skill set. Some have mentioned using tools such as whiteboards, easel pads or sticky notes to effectively create initial designs.

The “rough” and “cheap” qualities also apply to wireframes typically created using Visio or PowerPoint. By limiting wireframes to black and white and not using images, we are creating designs that look rough. True, they do not look realistic, but project teams and users can get past that with a little explanation. And unlike a high-fidelity mockup, a wireframe is easier to see as a prototype, a work in progress and thus open to change.

Visio is also a lightweight tool that makes it easy to try alternatives out. I find it’s much easier to try different approaches out in Visio than it is in Photoshop or Flash for example.

There is no substitute for interacting with a prototype however. For example, I have found that working out effective flyout navigation had to be done using an HTML wireframe with functional menus. The Visio wireframe showing all the menu combination did not convey to the designer or the user whether the menus were intuitive or easy to use. As the Web becomes more interactive and richer, the need for interactive wireframes and simulation will increase.

Joel Tachau — Fri, 26 Jan 2007 14:53:31 GMT

Excellent article! The great thing about Visio is that it is easy to try different layouts and alternatives. If you use templates and stencils, Visio is quite fast. Once you get into code, I find that you are locked in to some degree.

One problem is handing off Viso wires to designers who work in Flash or create HTML page templates. You can save a Visio as an SVG which can be opened in Illustrator. But if you were to draw the wires in Illustrator or Freehand, you could not only create equally effective storyboards, but designers could use these wires as starting points. The drawback is that these drawing files are not as portable or easy to use.

At the moment, I still think Visio is the best wireframing and storyboarding tool and Bill’s article seems to fill the gap on depicting RIA behaviors.

Is anyone using Illustrator or Freehand to create wireframes and storyboards?

Boxes and Arrows: Comments by Joel Tachau