CS 160: Lecture 12
Administrivia
- Please sign up for a group meeting with JFC or Miriam. E.g. today 4-5:15pm
Design is…
- About function:
- Good designs support user tasks
- About form:
- Good designs should be a pleasure to use
Design is…
- About communication, not just about the medium
- Its not abstract expressionism:
Principles
- Scale, Contrast, Proportion
- Organization and Visual Structure
Simplicity
- Simple designs are usually the most effective
- “Form ever follows function” - Sullivan
Simplicity
Simplicity - History
- Constructivism between the wars
Simplicity - Unity
- One path to simplicity is through unifying themes:
- Forms, colors, components with like qualities
Simplicity - Refinement
Simplicity - Fitness
- Match the design to the capabilities of the technology and the user
Why not use Roman fonts ?
Sans-serif fonts fit the medium
Simplicity - Common mistakes
Simplicity - Common mistakes
- Interference between competing elements
Simplicity - Common mistakes
- Using explicit structure as a crutch
Simplicity - Common mistakes
Simplicity - Common mistakes
- Overly literal translation
Simplicity - Common mistakes
Simplicity - Common mistakes
- Gratuitous dimensionality
Administrivia
- Please sign up for a group meeting with JFC or Miriam. E.g. today 4-5:15pm
Module and Program
- A systematic approach to the design of many artifacts:
- web pages on a site
- documentation pages
- devices in a family
-
- Programs describe how to build designs from modules.
Grid-based Design
Grid-based Design
Grid-based Design
Principles - Focus
- Focus: the design should highlight one or a small number of modular elements
Principles - Flexibility
- Flexibility: The program should allow variation from a theme
Principles - Consistency
- Consistent application: The program should maximize consistency in size, position, texture...
Common mistakes
- Arbitrary component positions
- Arbitrary component dimensions
- Random window sizes and layouts
- Unrelated icon sizes and imagery
- Inconsistent control presentations
- Inconsistent visual language
Techniques
- Reinforcing structure through repetition: Repeat design elements across the program
Techniques
Techniques - Canonical grid
- The canonical grid (see notes)
- An six-column basic grid with column separators and label templates
- Can be implemented with HTML tables
Canonical Grid
- Determine any size restrictions
- Define horizontal and vertical modules
- Develop a rough sketch of sizes, positions, orientations
- Use the canonical grid to adjust sizes and positions of control elements
- For dynamic layouts, figure out the minimum workable size.
Canonical Grid
Canonical Grid
Places to go
- MetaDesign: www.metadesign.com
- Frog Design: www.frogdesign.com
- Swim studio www.swimstudio.com
- Cooper Interaction Design www.cooper.com
- Aaron Marcus and Associates www.amanda.com