Website Diagrams with OmniGraffle and Garrett IA

December 11 2005 – 08:25pm

In finally being on a team responsible for the development of some sites with considerable functionality, I have been searching for a way to communicate the site visually so that the entire team can have a set of documents to work off of for each release. After spending three years at an architecture firm and seeing the documents involved in getting a building built, I was sure there must be some equivalent visual language and documenting system for web design. After some research, I found that visual language, and a nicely-priced tool for executing it.

In my research I came across UML, which is a standardized language for developing Use Case Diagrams, Activity Diagrams, and Class Diagrams, amongst others. I was excited to discover these promising methods, but they still weren’t quite right for diagramming websites. Then I came across Garrett IA, which is much like UML, but is especially for diagramming websites.

The tool that I have found best for making Garrett IA website diagrams is OmniGraffle, of which a basic version is included most macs. It’s very simple to use, and it comes preloaded with a Garrett IA symbol library (Tools > Palettes > Garrett IA). The best resource I’ve found to study for creating your first Garrett IA drawing of your website is this sample Garrett IA diagram of MetaFilter. I think one of the keys to using Garrett IA is to not be too literal with your diagram and to prioritize what information you include in it, but thankfully, Garrett IA makes it simple to diagram very complex websites by separating sections into different pages ‚Äì just like a stack of architectural drawings. I am currently using my own modified version of Garrett IA for my website documents: I draw “things that are to be made so in this release” in red, and “things I would like to see change” in blue. It has thus far made it much easier for our team to communicate about where the current development cycle stands.