1 / 35

Visual design

Visual design. The “look” of your interface. Role of Graphic Design. What someone initially encounters Sets a framework for understanding content. Role of Graphic Design. What someone initially encounters Sets a framework for understanding content. Role of Graphic Design.

mvoss
Download Presentation

Visual 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. Visual design The “look” of your interface

  2. Role of Graphic Design • What someone initially encounters • Sets a framework for understanding content

  3. Role of Graphic Design • What someone initially encounters • Sets a framework for understanding content

  4. Role of Graphic Design • What someone initially encounters • Sets a framework for understanding content

  5. Graphic Design • A comprehensible mental image • Appropriate organization of data, functions, tasks and roles • High-quality appearances • The “look” • Effective interaction sequencing • The “feel” • Classes at UNCC • http://www.uncc.edu/schedule/subject/artg.html

  6. Graphic Design • Involves knowledge of: • Sequencing • Organization • Layout • Imagery • Color • Typography

  7. Graphic Design Principles • Metaphor • Clarity • Consistency • Contrast • Alignment • Proximity

  8. Clarity • Every element in an interface should have a reason for being there • Make that reason clear too! • White/open space • Leads the eye • Provides symmetry and balance • Strengthens impact of message • Allows eye to rest between elements of activity • Used to promote simplicity, elegance, class, refinement

  9. Clarity via “White” Space • White = Open

  10. Example Home page Content page 1 Content page 2 www.santafean.com

  11. Example Clear, clean appearance Opinion?

  12. Example Does this convey different impressions?

  13. Consistency • In layout, color, images, icons, typography, text, … • Within screen, across screens • Stay within metaphor everywhere • Platform may have a style guide • Follow it!

  14. Alignment • Western world • Start from top left • Novices often center things • No definition, calm, very formal • Grids • (Hidden) horizontal and vertical lines to help locate window components • Align related things • Group items logically

  15. Grids – use them

  16. Layout Grids http://hotwired.lycos.com/webmonkey/98/28/index4a_page2.html?tw=design

  17. Three Column Layout Grids From http://www.cultsock.ndirect.co.uk/MUHome/cshtml/print/grids.html

  18. Symmetry vs. Asymmetry Beware of too much symmetry From http://www.cultsock.ndirect.co.uk/MUHome/cshtml/print/grids.html

  19. Proximity • Items close together appear to have a relationship • Distance implies no relationship Time Time:

  20. Example Name Name Name Addr1 Addr1 Addr1 Addr2 Addr2 Addr2 City City City State State State Phone Phone Phone Fax Fax Fax

  21. Slide from Saul Greenberg • Two-level Hierarchy • indentation • contrast Logic of organizationalflow Grouping by white space Alignment connects visual elements in a sequence

  22. Economy of visual elements • Minimize number of controls • Include only those that are necessary • eliminate, or relegate others to secondary windows • (but don’t want too many extra windows!) • Minimize clutter • so information is not hidden

  23. Haphazard layoutfrom mullet & sano

  24. Repairing a Haphazard layoutfrom mullet &sano

  25. Example Overuse of 3D effects

  26. Example Visual noise

  27. Contrast • Pulls you in – set off most important item • Guides your eyes around the interface • Supports skimming • Add focus

  28. Color • Use for a purpose and sparingly • Draw attention, communicate organization, to indicate status, to establish relationships, aid search • Use redundant cues • Color-blindness • Enhances performance • Be consistent with color associations from jobs and cultures

  29. How many small ovals?

  30. Now how many small ovals?

  31. Color Meanings: Contextually Specific • Red • aggression, love • hot, warning, stop, radiation • Pink • female, cute, cotton candy • Orange • warm, autumn, Halloween • Blue • cold, off • Yellow • happy, caution, joy • Brown • warm, fall, dirt, earth • Green • go, on, safe, envy, lush, pastoral • Purple • royal, sophisticated, Barney

  32. Color Meanings: Culturally Specific http://www.ricklineback.com/culture2.htm

  33. Legibility and readability • Characters, symbols, graphical elements should be easily noticable and distinguishable Text set in Helvetica TEXT SET INCAPITOLS Text set in Braggadocio Text set in Times Roman Saul Greenberg U. Calgary

  34. Readable Unreadable Design components to be inviting and attractive Design components to be inviting and attractive Design components to be inviting and attractive Design components to be inviting and attractive Legibility and readability • Proper use of typography • 1-2 typefaces (3 max) • normal, italics, bold • 1-3 sizes max Large Medium Small Large Medium Small Saul Greenberg U. Calgary

  35. Remember • Form follows function • Visual elements should help convey purpose and meaning • Be consistent • Just like all design – iterate and get feedback!! • Let’s analyze: • http://www.cnn.com/ & http://www.nytimes.com/ • http://www.microsoft.com/

More Related