Section 12.2. Communicating Visually

12.2. Communicating Visually

Diagrams are useful for communicating the two basic aspects of an information system's structural elements (semantic aspects, like controlled vocabularies, don't easily lend themselves to visual representation). Diagrams define:

Content components

What constitutes a unit of content, and how those components should be grouped and sequenced

Connections between content components

How components are linked to enable navigating between them

That's really pretty simple, and no matter how complex your diagrams may ultimately become, their main goal will always be to communicate what your site's content components are and how they're connected.

To help information architects and other designers create diagrams, a variety of visual vocabularies have emerged to provide a clear set of terms and syntax to visually communicate components and their links. The best-known and most influential visual vocabulary is Jesse James Garrett's,^[] which has been translated into eight languages. Jesses vocabulary anticipates and accommodates many uses, but perhaps the greatest reason for its success is its simplicity; just about anyone can use it to create diagrams, even by hand.

^[] http://www.jjg.net/ia/visvocab

Visual vocabularies are at the heart of the many templates used to develop blueprints and wireframes. Thanks to their developers' generosity, there are many free templates you can use to create your own deliverables; we've provided a table of useful examples below. Each requires one of the common charting programs, like Microsoft's Visio (for PC compatibles) or Omni Group's OmniGraffle (for Macintosh computers).

Name	Creator	Application	URL
OmniGraffle Wireframe Palette	Michael Angeles	OmniGraffle	http://urlgreyhot.com/personal/resources/omnigraffle_wireframe_palette/
Sitemap Stencil and Template	Garrett Dimon	Visio	http://www.garrettdimon.com/resources/templates-stencils-for-visio-omnigraffle
Wireframe Stencil	Garrett Dimon	Visio	http://www.garrettdimon.com/resources/templates-stencils-for-visio-omnigraffle
Wireframe Template	Garrett Dimon	Visio	http://www.garrettdimon.com/resources/templates-stencils-for-visio-omnigraffle
Sitemap Stencil	Nick Finck	Visio	http://www.nickfinck.com/stencils.html
Wireframe Stencil	Nick Finck	Visio	http://www.nickfinck.com/stencils.html
Block Diagram Shapes Stencil	Matt Leacock, Bryce Glass, and Rich Fulcher	OmniGraffle	http://www.paperplane.net/omnigraffle/
Flow Map Shapes Stencil	Matt Leacock, Bryce Glass, and Rich Fulcher	OmniGraffle	http://www.paperplane.net/omnigraffle/
OmniGraffle GUI Design Palette	Robert Silverman	OmniGraffle	http://www.applepi.com/graffle/
Wireframe Stencil	Jason Sutter	OmniGraffle	http://jason.similarselection.org/omnigraffle/webwireframe.html

What if you're a nonvisual person who cringes at the idea of learning Visio? Or the people you're communicating your ideas to aren't visually oriented? Does your work have to be visual?

Absolutely not. As ugly as it can be, you can render your blueprints as outlines in a word processor, or use a spreadsheet's cells in a similar fashion. You can write page descriptions that cover the same bases as your wireframes. Just about anything can be rendered in text, and ultimately, these deliverables are first and foremost communication tools. You need to play to your own communication strengths and, more importantly, take advantage of whatever style works best for your audience.

But remember, there's a reason they say "a picture is worth a thousand words." The lines between information archicture and the more visual aspects of design are blurry, and at some point, you'll have to connect your IA concepts, however textual, to the work that is the responsibility of graphic designers and interaction designers. Hence we spend most of our time in this chapter on visual means for communicating information architectures.