Five Design Tactics Jf 123009

  • 337 views
Uploaded on

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 …

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.

More in: Design , Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
337
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
19
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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