1 / 108

Graphic Design

Graphic Design. The “look & feel”. Graphic Design. It shares aspects of engineering, but with aesthetic, communicative aspects and consumer appeal. Graphic Design. As a practice, it has been around for thousands of years. . Graphic Design.

siran
Download Presentation

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. Graphic Design The “look & feel”

  2. Graphic Design It shares aspects of engineering, but with aesthetic, communicative aspects and consumer appeal.

  3. Graphic Design As a practice, it has been around for thousands of years.

  4. Graphic Design With the industrial revolution, art and design began to diverge.

  5. Graphic Design In the US, it grew into a profession after WWII.

  6. Graphic Design It relies on a BALANCE and integration of: & feel

  7. Graphic Design Objective: relies on quantitative studies, like usability and legibility measures. Does the “look and feel” work?

  8. Graphic Design Subjective: “look and feel” relies on subjective judgement by experts, depends on contextual factors.

  9. Graphic Design Subjective: “look and feel” Culture is learned, cultural meanings change, meanings can be multiple. Uniqueness is valued (not programmable).

  10. Graphic Design You cannot empirically measure its subjective aspects, but it is rigorous in its own epistemological realm (knowledge base).

  11. Graphic Design It is rigorous in its own epistemological realm. 1. Graphic Design experts. vs. 2. Deploying graphic design principles (anybody).

  12. Graphic Design So what? Deploying graphic design principles will: - enhance your ability to communicate w/designers & feel

  13. Graphic Design Deploying graphic design principles will: - enable you to create more user-friendly interfaces

  14. Graphic Design Deploying graphic design principles will: - enhance the knowledge base of HCI, which is increasingly necessary with millions of users

  15. Agenda: • The Role of Graphic Design • Principles of Graphic Design • Animation/Rollovers • Typography • Color • Icons CS 4455

  16. Role of Graphic Design • The “look and feel” portion of an interface: • What someone initially encounters CS 4455

  17. Role of Graphic Design • The “look and feel” portion of an interface: • What someone initially encounters • Sets a framework for understanding content • Conveys an impression, mood CS 4455

  18. Role of Graphic Design • The “look and feel” portion of an interface: • What someone initially encounters • Sets a framework for understanding content CS 4455

  19. Role of Graphic Design • The “look and feel” portion of an interface: • What someone initially encounters • Sets a framework for understanding content CS 4455

  20. Role of Graphic Design • The “look and feel” portion of an interface: • What someone initially encounters • Sets a framework for understanding content CS 4455

  21. Role of Graphic Design • The “look and feel” portion of an interface: • What someone initially encounters • Sets a framework for understanding content CS 4455

  22. Role of Graphic Design • The “look and feel” portion of an interface: • What someone initially encounters • Sets a framework for understanding content CS 4455

  23. Role of Graphic Design • The “look and feel” portion of an interface: • What someone initially encounters • Sets a framework for understanding content CS 4455

  24. Agenda: • The Role of Graphic Design • Principles of Graphic Design • Animation/Rollovers • Typography • Color • Icons CS 4455

  25. Principles of Graphic Design • Concept/Metaphor • Hierarchy • Clarity • Consistency • Alignment • Proximity • Contrast CS 4455

  26. Principles: Concept/Metaphor • Concept: what is the overarching idea that every visual aspect of the interface relates to? (It MUST be relevant) • Metaphor: (Means of “explaining” concept) If you’re building an interface for a grocery application, maybe mimic a person walking through a store with a cart. CS 4455

  27. Principles: Concept/Metaphor • Concept: what is the overarching idea that every visual aspect of the interface relates to? (It MUST be relevant) • Apple: accessible, fun, familiar; “for the rest of us” • Metaphor: (Means of “explaining” concept) If you’re building an interface for a grocery application, maybe mimic a person walking through a store with a cart. desktop metaphor CS 4455

  28. Principles: Hierarchy • What are the relative “levels” of importance? • What should the user see first? Second? CS 4455

  29. Principles: Hierarchy • What are the relative “levels” of importance? CS 4455

  30. Principles: Hierarchy • . CS 4455

  31. Principles: Clarity • Every element in an interface should have a reason for being there • Make that reason clear! • Less is more CS 4455

  32. Principles: Clarity • White space • Leads the eye • Provides symmetry and balance through its use • Strengthens impact of message • Allows eye to rest between elements of activity (increases legibility) • Used to promote simplicity, elegance, refinement CS 4455

  33. Principles: Clarity • White space CS 4455

  34. Principles: Clarity • White space CS 4455

  35. Principles: Consistency • Be consistent in every aspect: • In layout, color, images, icons, typography, text • Within screen, across screens • Stay within metaphor everywhere • Platform may have a style guide -- follow it! CS 4455

  36. Principles: Alignment • Western world • Start from top left • Allows eye to parse display more easily CS 4455

  37. Principles: Alignment • Grids • (Hidden) horizontal and vertical lines to help locate window components • Align related things • Group items logically • Minimize number of controls, reduce clutter CS 4455

  38. Principles: Alignment • Grids - use them CS 4455

  39. Principles: Alignment • Grids • (Hidden) horizontal and vertical lines to help locate window components • Align related things • Group items logically • Minimize number of controls, reduce clutter CS 4455

  40. Principles: Alignment • Left, center, or right • Ragged right or justified • Choose one, use it everywhere • Novices often center things • Hard to read! • No definition, calm, very formal • Use only in small quantities Here is somenew text Here issomenew text Here is somenew text CS 4455

  41. Principles: Proximity • Items close together appear to have a relationship • Large distance implies -- no relationship Time CS 4455

  42. Principles: Proximity • Items close together appear to have a relationship • Large distance implies -- no relationship Time CS 4455

  43. Principles: Contrast • Pulls you in • Guides your eyes around the interface • Supports skimming • Take advantage of contrast to guide user through hierarchy of information; add focus; or to energize an interface with “texture” • Can be used to distinguish active control CS 4455

  44. Principles: Contrast • Can be used to set off most important item • Allow it to dominate • Ask yourself what is the most important item in the interface, highlight it • Use geometry to help sequencing CS 4455

  45. Agenda: • The Role of Graphic Design • Principles of Graphic Design • Animation/Rollovers • Typography • Color • Icons CS 4455

  46. Animation/Rollovers • Blinking • Good for grabbing attention, but easily becomes obnoxious; use very sparingly • Reverse video, bold • Good for making something stand out CS 4455

  47. Agenda: • The Role of Graphic Design • Principles of Graphic Design • Animation/Rollovers • Typography • Color • Icons CS 4455

  48. Typography: White space • White space • Leads the eye • Provides symmetry and balance through its use • Strengthens impact of message • Allows eye to rest between elements of • activity (increases legibility) • Used to promote simplicity, elegance, refinement CS 4455

  49. Typography: Hierarchy • How do you lead the user through visual • information (by visual means)? • Some traditional navigation devices (conventions): • Size • Color • Composition (where it is on the rectangle) • Page numbers • Type and Image emphases CS 4455

  50. Typography • Characters and symbols should be easily noticeable and distinguishable • AVOID HEAVY USE OF ALL UPPERCASE • Studies have found that: mixed case promotes fastest reading and that 55 characters per line is optimal CS 4455

More Related