1 / 34

CS 160: Lecture 12

CS 160: Lecture 12. Professor John Canny Fall 2001 Oct 11, 2001. 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….

wchristensen
Download Presentation

CS 160: Lecture 12

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CS 160: Lecture 12 Professor John Canny Fall 2001 Oct 11, 2001

  2. Administrivia • Please sign up for a group meeting with JFC or Miriam. E.g. today 4-5:15pm

  3. Design is… • About function: • Good designs support user tasks • About form: • Good designs should be a pleasure to use

  4. Design is… • About communication, not just about the medium • Its not abstract expressionism:

  5. Principles • Simplicity • Scale, Contrast, Proportion • Organization and Visual Structure • Grid-based Design

  6. Simplicity • Simple designs are usually the most effective • “Form ever follows function” - Sullivan

  7. Simplicity

  8. Simplicity - History • Constructivism between the wars

  9. Simplicity - Unity • One path to simplicity is through unifying themes: • Forms, colors, components with like qualities

  10. Simplicity - Refinement

  11. 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 Be careful of slant

  12. Simplicity - Common mistakes • Clutter and noise

  13. Simplicity - Common mistakes • Interference between competing elements

  14. Simplicity - Common mistakes • Using explicit structure as a crutch

  15. Simplicity - Common mistakes • Belaboring the obvious

  16. Simplicity - Common mistakes • Overly literal translation

  17. Simplicity - Common mistakes • Excessive Detail

  18. Simplicity - Common mistakes • Gratuitous dimensionality

  19. Administrivia • Please sign up for a group meeting with JFC or Miriam. E.g. today 4-5:15pm

  20. 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.

  21. Grid-based Design

  22. Grid-based Design

  23. Grid-based Design

  24. Principles - Focus • Focus: the design shouldhighlight one or a small number of modular elements

  25. Principles - Flexibility • Flexibility: The program should allow variation from a theme Univers Font

  26. Principles - Consistency • Consistent application: The program should maximize consistency in size, position, texture...

  27. Common mistakes • Arbitrary component positions • Arbitrary component dimensions • Random window sizes and layouts • Unrelated icon sizes and imagery • Inconsistent control presentations • Inconsistent visual language

  28. Techniques • Reinforcing structure through repetition: Repeat design elements across the program • Stylesheets can help

  29. Techniques • Establish modular units

  30. 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

  31. 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.

  32. Canonical Grid

  33. Canonical Grid

  34. Places to go • MetaDesign: www.metadesign.com • IDEO: www.ideo.com • Frog Design: www.frogdesign.com • Swim studio www.swimstudio.com • Cooper Interaction Design www.cooper.com • Aaron Marcus and Associates www.amanda.com • Icarian www.icarian.com

More Related