1 / 42

Visual design

Explore visual design for interface improvement. Learn usability, prototyping, graphic design role & principles, with focus on clarity, consistency, and alignment in design. Get ready to brainstorm and create original ideas!

susanb
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. Project: What to do now • Start brainstorming!! • Lots of ideas, then narrow down to 3 or 4 • Explore design space • Vary what you can – hardware, forms of input, forms of output, features, requirement priorities, usability priorities • Be off the wall, crazy • This will lead to less crazy but original ideas • Project poster – March 4 • Project report + prototype: April 1

  3. Midterm review • How to study: • Look at slides for topics, bullets, vocabulary, etc. • Find details and examples in the book • Test format • 25-50% true/false, multiple choice, fill-in-blank • Rest short answer, with one longer answer

  4. Review • What is usability? • What is design? Why is it hard? • The user centered design process • General steps • various models – high level understanding • What is waterfall model?

  5. Requirements Review • Functional vs. non functional • What pieces are part of this? • User characteristics, task analysis, environment, etc.etc. • Persona – what is it and what makes a good one? • Scenario – what is it and what makes a good one? • Stakeholders (primary, secondary, tertiary, facilitating) • How do you gather data? Tradeoffs? • Interview, questionnaire, observation, etc. etc. • Task models • Hierarchical task analysis - how to do it? • Use cases – what are they good for?

  6. Humans review • What are issues concerning our senses? • Model Human Processor model of memory • What are pieces of memory (STM, LTM, etc.) • What’s a chunk? Why do we care? • What are implications? (recognition over recall, externalizing, etc.) • Other processes – what are they? (attention, learning) • What are the implications?

  7. Interaction Review • Command line • WIMP • Direction manipulation • Pen & mobile • Speech & natural language • Issues, advantages, disadvantages, etc.

  8. Prototyping • Prototyping • What’s vertical vs. horizontal? • What’s low vs. high fidelity? • What are various methods? • Scenarios, mockups/sketches, etc. • Issues and tradeoffs?

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

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

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

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

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

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

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

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

  17. Example Clear, clean appearance Opinion?

  18. Example Does this convey different impressions?

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

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

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

  22. Grids – use them

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

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

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

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

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

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

  29. Example Overuse of 3D effects

  30. Haphazard layoutfrom mullet & sano

  31. Repairing a Haphazard layoutfrom mullet &sano

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

  33. Example Visual noise

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

  35. How many small ovals?

  36. Now how many small ovals?

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

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

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

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

  41. 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.microsoft.com/

More Related