Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.

Basic Elements and Conventions


It's incredibly useful to think about, and simplify the imagery used in diagrams. For instance, the layering convention is frequently used to denote multiples. Also, it's best to 'flatten out' diagrams into their simplest, or most representative form.

Jesse James Garrett


"Site diagrams are also useful when your project moves from planning to web page production. As the new site is built up in a directory on the web server, the site diagram is often the first place programmers look to gain an understanding of how the site files should be subdivided into directories (folders) on the server. The pattern of directories and subdirectories of the site files should mirror the major content divisions and structures as shown on the site diagram."

Patrick J. Lynch and Sarah Horton

The Big Picture

"Information architecture and interaction design are two sides of the same coin. (See "The Elements of User Experience" for definitions of these terms as they are used here.) Diagrams of contemporary sites inevitably involve both sides. But for each, the objectives of the diagram are slightly different."

In both cases, the diagram focuses on what we call macrostructure, providing just enough detail to enable team members to get the "big picture". The task of the architect is to determine the appropriate level of detail to meet this objective. The specific page-level detail, or microstructure, is detailed in other documents that the architect may not be primarily responsible for developing."

Jesse James Garrett

Object, User and Sequence

"There are three key aspects of an IA diagram – object model, user stories, sequence. When systems have multiple actors, all working together to achieve some task, it is essential that the architect maintain a keen awareness of choreography."

Aubrey Goodman

Object Models

UML is very formalised, this is so it can be understood by anyone - if they know the language.

A style guide is a description of how the site will look, it can include key display elements, colours, fonts and css rules.

Site maps are used to formalise the navigation and structure of the site.

User Story

These diagrams are a little less formal.

Diagrammatic elements can be taken from other sources, as there aren't many conventions.

These mainly revolve around text-descriptions, as people are hard to deconstruct into images.


With the exception of swim lanes, these diagrams can be even less formal.

Storyborads can also be sketched, but can also take the form of wireframes.

Paper prototypes are efficient, but are often just sketches.

Swim lanes use elements from UML, but built up to form a planning mechanism.

Abstact Diagrams

Rich Pictures

With all these elements from different diagrams, we can start to build them up into more abstract and more meaningful things. The most abstract diagram is called a rich picture, this is where you can literally use any imagery to convey the idea, and it's for ideas that are hard to formalise from the offset.


"Sketchnotes are a way of capturing ideas in an engaging and visual way by combining the power of sketching and writing."

Eva Lotta Lamm

Whiteboard Animations

A way of combining storyboards and rich pictures into an impressive and descriptive deliverable.

RSA Animate