Graphic Design Principles for Usable Interfaces
Suzanne Watzman

1. Introduction
   "Graphic design is essentially about visual relationships- providing meaning to a mass of unrelated needs, ideas, words and pictures. It is the designers job to select and fit this materials together- and make it interesting." Paul Rand, A Designer's Art
   
   "Form follows function" Louis Sullivan
   • In these times, the current environment (think "visual Las Vegas")
   • Making things interesting AND useful
   • Designers must understand the user's goal: to get what they want and move on to the next task
   • Design must support and enhance user goals
   • Understanding user goals is the only path to good design
   • Design interprets and presents information so that it can most efficiently be understood and used
   • Defining, then designing the user experience
   • Why bad design happens
   • All things are designed- defining and deciding what is good design
     • Good design is transparent; it just works
     • Visual framework reflects/reinforces content/functional goals
     • Appropriate solutions
     • Makes complex things understandable and useful
   • How the medium defines design choices
   • Defining a common language: useful terms to know
2. Getting to Good Design - a Process for Insuring Success
   Getting to good design (many disciplines contribute to a good design) "daisy" illustration
   • How to discover what the problem is
   • The Information Design Process:
     • an iterative and ongoing process
     • insures appropriate and useful design for product lifecycle
   • An informed design process includes 3 parts:
     • AUDIT: understanding the problems, defining goals discovery
     • DEVELOPMENT: design, testing and refining all three are inseparable components
     • IMPLEMENTATION: monitoring, updating and refining
   • Designer is the user advocate
   • Skills required- who is this person anyway
3. The Tools for Good Design
   Understanding the tools and appropriate choices determines the difference between a successful solution and one that hinders user access to the information and overall goals of the product
   • Typography
     • Typography has a major impact on overall usability
     • Appropriate choices must be based on: user requirements, viewing situation, output devices, resolution, size, color, relationship to/interaction with other design elements, other technical parameters
     • Typographic principles include:
       • typographic style (light, bold, italic, condensed, expanded)
       • font
       • size
       • letterform variations (serif, san serif, thick, thin, etc)
       • contrast and highlighting
       • relationships ("white" space, kerning, letter/word/line spacing, column width, justified vs. ragged, etc.)
     • Readability and legibility depend on many criteria and are impacted by: letter spacing, word spacing, color, background, resolution
     • examples and self-test
   • Page Design
     • How to define a readable page
     • How visual structure/design of the page reinforces the content/informational structure of the page
     • The grid
     • The basic tools for structuring a page: chunking, queuing, filtering, mixing modes, abstracting
     • examples and self-test
   • Graphic Elements
     • Graphic Elements are "visual shorthand"
     • Can improve efficiency and save space
     • Charts, diagrams, graphics, illustrations, icons
     • When to use graphics
     • Creating a consistent visual language
     • "field of vision"
     • examples and self-test
   • Color
     • Basic principles of color: hue, saturation, lightness, brightness
     • Considerations when choosing color (user, viewing device and situation, cultural impact, other associations, background, contrast, etc.)
     • examples and self-test
   • Graphic Standards, Branding/Identity
     • What are graphic standards and their value to a good design solution
     • What is branding/identity
     • Ways to expand a design structure
     • Ways to create visual consistency
     • Understanding a system of design; beyond the "cookie-cutter" approach
     • How to begin to create a set of graphic standards guidelines
   • Guidelines for Good Design: Putting it All Together
     • There are no rules, just guidelines
     • All choices depend on context of viewing, use, technology
     • "squint" test
     • "visual diagramming"
     • "field of vision, peripheral vision
     • visual hints and cues
     • relationships tell a story (perspective, Italian Renaissance
     • paintings)
     • how/what the eye sees: determining eye path
     • Design guidelines with examples and explanations