1 / 109

Graphic Design

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

brennanr
Télécharger la présentation

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” The system of imagery

  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 IAT 410

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

  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 IAT 410

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

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

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

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

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

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

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

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

  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. IAT 410

  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 IAT 410

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

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

  30. Principles: Hierarchy • . IAT 410

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

  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 IAT 410

  33. Principles: Clarity • White space IAT 410

  34. Principles: Clarity IAT 410

  35. Principles: Clarity • White space IAT 410

  36. 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! IAT 410

  37. Principles: Alignment • Western world • Start from top left • Allows eye to parse display more easily IAT 410

  38. 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 IAT 410

  39. Principles: Alignment • Grids - use them IAT 410

  40. 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 IAT 410

  41. 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 IAT 410

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

  43. Principles: Proximity • Items close together appear to have a relationship • Large distance implies -- no relationship Time IAT 410

  44. 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 IAT 410

  45. 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 IAT 410

  46. Agenda: • The Role of Graphic Design • Principles of Graphic Design • Animation/Rollovers • Typography • Color • Icons IAT 410

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

  48. Agenda: • The Role of Graphic Design • Principles of Graphic Design • Animation/Rollovers • Typography • Color • Icons IAT 410

  49. 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 IAT 410

  50. 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 IAT 410

More Related