This is a short presentation that I created for a financial services client. They needed an extremely simple rationale to guide and support their design decisions. The document is the output of a one-day worksession during which I worked with core members of the e-Commerce team to wireframe new sections of their banking services site and craft a very basic, repeatable, (and teachable) approach for information design. Yes, it draws heavily on Tufte. As it should.

1. five design tactics
Jon Freach
12.30.09

2. overview
The ingredients of information design consist of words, images,
numbers, and diagrams. The designer is responsible for
arranging all of these elements to produce an intuitive and
useful display.

3. overview
This presentation describes a basic approach to screen layout
that includes five tactics to help you put the right mark in the
right place to achieve clarity in your designs.

4. 1 evaluate
Critically examine all your data
(you may end up revising the original content and design intent).
Break down the material into its simplest components – the
what, why, and how of the idea you are trying to communicate.

5. 2 reduce
Hunt for redundancy in your message and data.
Look for opportunities to reduce the amount of information
and elements that are interacting on each screen.

6. 3 order
Determine the macro- and microstructure of the content.
The macrostructure consists of the main ideas that you
want to communicate; its attributes are explicit and include
headlines, and primary and secondary navigation.
The microstructure plays a functional role by supporting
the overall design intent; its attributes are usually more subtle
and include labels, calls-to-action, bold fonts, and other
details and visual cues.

7. 4 design
Design and adhere to grids but make them implicit not explicit.
Only use graphic rules when absolutely necessary.
If you must use rules, then make them thin not thick.
Horizontal rules are more useful and effective than vertical
rules because they order items top to bottom and enable
comparisons across data.
Be conservative in your choice of fonts and styles. Define a
rationale for your typographic design and apply it consistently
across each screen in your application or site.

8. 5 separate
Color and weight (the visual mass of form, field, line, and letters)
are the most important materials to use to help you separate
layers of information, establish hierarchy, and achieve clarity.
“If one limits strong, heavy, rich, and solid colors to the small areas of extremes, then
expressive and beautiful colored area patterns occur....Large area background or base-colors
do their work most quietly, allowing the smaller, bright areas to stand out most vividly, if the
former are muted, grayish, or neutral.”
Eduard Imhof
Cartographic Relief Presentation
(Berlin, 1982)

9. thanks
Jon Freach
Design Research and Interaction Design
jon@jonfreach.com
512 297 8373