1 / 40

Visual design

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

arnaud
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. Your Screen?

  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. Role of Graphic Design • What someone initially encounters • Sets a framework for understanding content

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

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

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

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

  10. Example Clear, clean appearance Opinion?

  11. Example Does this convey different impressions?

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

  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. Example Home page Content page 1 Content page 2 www.santafean.com

  15. Alignment • Western world • Start from top left • Allows eye to parse display more easily • Grids • (Hidden) horizontal and vertical lines to help locate window components • Align related things • Group items logically

  16. Alignment • Left, center, or right • Choose one, use it everywhere • Novices often center things • No definition, calm, very formal Here is somenew text Here is somenew text Here is somenew text

  17. Grids – use them

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

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

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

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

  22. How many small ovals?

  23. Now how many small ovals?

  24. Color Meanings: Contextually Specific • Red • aggression, love • hot, warning, stop • 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

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

  26. Color Palettes • Color palette – set of colors used on one screen • Choose color palette from HSV space by varying and two of H, S, and V. • Don’t vary hue, saturation and brightness at the same time. • Unless want continuous tone or ‘artsy’ effect, best to use only 4-6 colors per screen

  27. Color Palettes/Suites • Designers often pick a palette of 4 or 5 colors Variations of 2 colors Monochromatic (variations of 1 color) Southwestern (culturally evocative)

  28. Effect of Colored Text on Colored Background Black text on red Gray text on red Yellow text on red Light yellow text on red Green text on red Light green text on red Blue text on red Pale blue text on red Dark red text on red Red text on red Rose text on red

  29. Effect of Colored Text on Colored Background Black text on dark blue Gray text on dark blue Yellow text on dark blue Light yellow text on dark blue Green text on dark blue Light green text on dark blue Blue text on dark blue Pale blue text on dark blue Dark red text on dark blue Red text on dark blue Rose text on dark blue

  30. Color Guidelines • Display color images on a black, white, or gray background • Be sure foreground colors contrast (in both brightness and hue) with background colors • Avoid using color in non-task related ways

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

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

  33. Example Disorganized

  34. Example Visual noise

  35. Example Overuse of 3D effects

  36. Remember • Form follows function • Visual elements should help convey purpose and meaning • Be consistent • Just like all design – iterate and get feedback!!

  37. Review • Introduction • What were the major interaction paradigms? • Requirements • Functional vs. Non-Functional • Formative vs. Summative evaluation • Gathering methods • Advantages, disadvantages, why use

  38. Review • Requirements • Representation & Communication • Personas • Scenarios • Task analysis & HTA • Flow chart, Workflow, Entity Relationship • Ethics • What is involved? • why does it matter?

  39. Review • Human Abilities • Senses • Memory – model human processor • Other cognitive abilities • Problem solving • Learning • Attention • Predictive Models • Fitt’s Law • KSLM • Hick’s

  40. Review • Design • General process • Norman’s principles • Norman’s Execution-Evaluation model • Learnability, Flexibility, Robustness principles • Error prevention • Prototyping • Fidelity, horizontal vs. vertical • Methods: storyboards, scenarios, mockups, wizard of oz, etc.

More Related