you're in home | talents | tools | wireframes



"boxes and arrows"

Wireframe downloads
examples & illustrations

Wireframes :: 1 of 2

< previous | next >

What is it?

Wireframes are website page designs - without the graphic design. They should look, without wanting to sounding too obvious, like frames made of wire.

Depending upon their resolution (see below), wireframes can specify the content, position, layout, size, prominence and organisation of a web page.


A wireframe is typically created in a drawing application like Visio or Illustrator. As the name suggest, a wireframe is (usually) a black and white, "boxes and arrows" diagram akin to an architect's plans for a building.

Wireframes climb in resolution (qua accuracy or verisimilitude) as a project matures, and as the graphic design process gets underway: from low through mid to high resolution is a typical progression, but this is not always the case.

  • High resolution wireframes - is only a whisker away from a finished web page, complete with highly accurate renditions of palette, font, use of real estate and imagery, text, provocation and so on
  • Mid resolution wireframes - where imagery and palette particularly are not included to any significant degree
  • Low-resolution wireframes - is little more than a "thumbnail" sketch

What's it for?

Storyboarding is useful for rapid development of a creative idea. The quality of the execution takes second (or third) place to movement, transition, concept and sequencing. Storyboards are used extensively in projects using significant amounts of animation or movement, i.e. where there is heavy use of Flash or Ajax.

Storyboards can vary greatly in graphical sophistication. They can sometimes be little more than individual thumbnail sketches; at other times highly polished designs in and of themselves. Sometimes they're used to present "static" ideas (used in this way, they can be very similar to moodboards); other times they're used almost exclusively to visualise the key frames of a sequence in an animation.

< previous | next >


Talents: Skills
Talents: Principles
Talents: Tools
Talents: Techniques
Email on brown