1 / 47

CMPUT 301: Lecture 25 Graphic Design

CMPUT 301: Lecture 25 Graphic Design. Lecturer: Martin Jagersand Department of Computing Science University of Alberta Notes based on previous courses by Ken Wong, Eleni Stroulia Martin Jagersand. Graphic Design. What:

Download Presentation

CMPUT 301: Lecture 25 Graphic Design

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. CMPUT 301: Lecture 25Graphic Design Lecturer: Martin Jagersand Department of Computing Science University of Alberta Notes based on previous courses by Ken Wong, Eleni Stroulia Martin Jagersand

  2. Graphic Design • What: • the use of typography, symbols, color, and other static and dynamic graphics to convey facts, concepts, and emotions

  3. Graphic Design • Why: • can be used in user interface design to convey information effectively about system functionality and state

  4. Graphic Design • Visible language: • layout • formats, proportions, alignment • typography • typefaces, typesetting • color • colors, texture • imagery • signs, symbols, icons • sequencing • animation, order of operations

  5. Graphic Design • Basic principles of design: • organize • provide a clear and consistent conceptual structure • economize • maximize the effectiveness of a minimal set of cues • communicate • match the presentation to the capabilities of the user

  6. Graphic Design • Apply these principles to design menus, control panels, dialog boxes, icons, etc.

  7. Organize • Internal consistency: • observe the same conventions and rules for all elements of the user interface

  8. Organize • External consistency: • follow existing platform and cultural conventions across user interfaces

  9. Organize • World consistency: • make conventions consistent with real-world experience

  10. Organize • Lexical consistency: • coding consistent with common usage • e.g., left = less, right = more • consistent abbreviation rules • e.g., Jan, Feb, Mar, etc. (equal length) • devices used consistently • e.g., esc key to cancel • symbols used consistently • e.g., ellipsis (…) to bring up a dialog box from a menu item or button

  11. Organize • Syntactic consistency: • status messages consistently placed • e.g., for Internet Explorer, at bottom of window • commands come first or last • e.g., verb then noun (command line) • e.g., noun then verb (direct manipulation) • menu items always at the same place • i.e., perceived stability; muscle memory

  12. Organize • Semantic consistency: • global commands always available • e.g., help, cancel, undo • e.g., cut/copy/paste

  13. CMPUT 301: Lecture 25b Graphic Design Lecturer: Martin Jagersand Department of Computing Science University of Alberta Notes based on previous courses by Ken Wong, Eleni Stroulia Martin Jagersand

  14. Graphic Design • Basic principles of design: • organize • provide a clear and consistent conceptual structure • economize • maximize the effectiveness of a minimal set of cues • communicate • match the presentation to the capabilities of the user

  15. Tools in graphic design • Visible language: • layout • formats, proportions, alignment • typography • typefaces, typesetting • color • colors, texture • imagery • signs, symbols, icons • sequencing • animation, order of operations

  16. Organize • Screen layout: • use grids and alignment • group related elements • use balance and symmetry • use task analysis for ordering • standardize placements • e.g., cancel button to left of OK button • address perceived stability

  17. Organize • Grouping methods: • proximity • alignment • separators • borders • background color • indentation

  18. Organize • Navigability • provide an initial focus for attention • direct attention to important, secondary, or peripheral items • assist navigation among the elements

  19. Example: Navigability

  20. Economize • Simplicity: • KISS principle • i.e., keep it simple, stupid • minimize the use of colors and styles • avoid the “circus” effect • minimize clutter • but do not hide essential information • e.g., reveal details, use tabs

  21. Example: KISS

  22. Economize • Clarity: • design all elements so that their meaning is not ambiguous • use affordances • use plain language

  23. Economize • Distinctiveness: • distinguish important properties of essential elements and make the most important elements obvious

  24. Communicate • Legibility: • design individual characters, symbols, and graphic elements to be easily noticeable and distinguishable • Readability: • design detailed displays to be comprehensible, inviting, and attractive

  25. Communicate • Typography: • limit the number of typefaces • e.g., max 3 legible/readable typefaces • limit the length of lines • i.e., max 40 to 60 characters • use appropriate justification • e.g., right justified for columns of numbers • avoid all caps for body text

  26. Example: Typography for edit boxes • Proportional spacing: • Hard to see errors when typing in: • Fixed spacing, bold: • Easy to see individual characters:

  27. Communicate • Imagery: • signs, symbols, icons • icon design is difficult • use standards if possible • label unfamiliar icons • avoid gratuitous images • e.g., animated icons

  28. Communicate • Color and texture: • use appropriate highlighting and deemphasis techniques to convey meaningful semantic distinctions

  29. Communicate • Aspects of visual design: • scale • size of a specific element relative to other elements and the whole composition • contrast • noticeable differences along a common visual dimension • proportion • balance and harmony of the relation between elements

  30. Specific design examples • Look at Joel's writings on UI: http://static.userland.com/gems/joel/uibookcomplete.htm

More Related