This presentation was part of a seminar for Boston CHI Professional Development Day, March, 2011
The goal of the course was to provide an overview of the "tools" for achieving consistency, hierarchy and personality in web application visual design – placement, color, typography and imagery.
Best VIP Call Girls Noida Sector 47 Call Me: 8448380779
Web Application Visual Design for Non-Designers
1. Web Application Visual and UI Design for Non-Designers BOSTON CHI PROFESSIONAL DEVELOPMENT 2011 Tania Schlatter & Deborah LevinsonNimble Partners
2. 4. innovate create new paradigms 3.elevate the ordinary select color, fonts and imagery that communicate personality 2.make informed decisions create visual hierarchy to support use with type, color and placement 1.avoid common mistakes align elements | group like elements | use fonts appropriately | use colors appropriately | be consistent
4. Agenda 1. BASIC PRINCIPLES: CONSISTENCY, HIERARCHY AND PERSONALITY examples and discussion (break) 2. LAYOUT examples, discussion, two activities (BREAK) 3. TYPE examples and discussion 4. COLOR examples and discussion 5. IMAGERY examples and discussion 6. SUMMARY activity and discussion
6. 1. BASIC PRINCIPLES: CONSISTENCY, HIERARCHY AND PERSONALITY “The goal of communication-oriented design is to develop a message that can be accurately transmitted and correctly interpreted, and which will create the desired behavioral outcome after it has been understood by its recipient.” Mullet & Sano, p. 2
7. 1. BASIC PRINCIPLES: CONSISTENCY, HIERARCHY AND PERSONALITY “Differences can cause distraction.” “We need to establish a system of design… that allows people to feel comfortable…” David Hogue http://tv.adobe.com/watch/classroom-five-essential-principles-of- interaction-design/part-1-five-essential-principles-of-interaction-design/
13. 1. Are things placed and treated in a way I expect? Like any language, visual language only becomes apparent through consistent use. 2. Does it help me know what to do and what will happen? When the appearance of things – all visual cues – clearly and accurately portrays the relationships between the things it will be easier to grasp. Paraphrase Krug, p. 31 3.Do I get an appropriate sense of the characteristics? “…in design we should always create a persona for the product and ensure that everything in that product is consistent with that persona.”Don Norman, 1.11.2011, Johnny Holland 1. BASIC PRINCIPLES: CONSISTENCY, HIERARCHY AND PERSONALITY
14. 1. BASIC PRINCIPLES: CONSISTENCY, HIERARCHY AND PERSONALITY What’s going on here? Stack Overflow PivotalTracker Chase credit card Oracle jobs
15.
16.
17.
18.
19. goals tools layout Position and arrangement of elements type Font, size, styles color Hue, shade, value imagery Logo, photos, illustrations, patterns, treatment consistency hierarchy personality
39. 4. TOOLS: COLOR Hue Value Shade Complement http://seahawk4.blogspot.com/2010_02_01_archive.html
40. 4. TOOLS: COLOR Color can: Create impact Direct the eye Convey personality Complementary colors are especially good at this http://www.slashfilm.com/orangeblue-contrast-in-movie-posters/
47. 4. TOOLS: COLOR Alternatives: Gentle use of red Limited use of red Non-red accent and strategic position Strategic position and catchy copy
48. 5. TOOLS: IMAGERY Logo May be text (logotype), symbolic, iconic, pictorial Photos/video Should add information Illustrations Can be literal, data-derived or abstract Patterns/treatment Can help create visual interest without communicating content
49. 5. TOOLS: IMAGERY questions to ask tools Who Is the audience? What are they accustomed to? What Is the content? Where Are they when using? Why Are people using the application? How Should the organization be perceived? Logo May be text (logotype), symbolic, iconic, pictorial Photos/video Should add information, not distract Illustrations Can be literal, data-derived or abstract Patterns/treatment Can help create visual interest without communicating content
50. 5. TOOLS: IMAGERY Site audience said the organization is: “Service-oriented Caring, expert [and] passionate” “Personal” “Friendly” before
51. 5. TOOLS: IMAGERY Strategic use of color and imagery: Colorized logo reflects the diverse community. Abstract nature of the logo is a nice contrast to realist photos. Hot hues (orange,red) help draw attention to important content Photos of the facility provide a sense of place - foreshadow first visit experience Photos of practitioners reduce uncertainty after
52. 5. TOOLS: IMAGERY Strategic use of treatment: Rounded corners contrast angular logo and magazine images Gradation provides some depth and unifies elements Dimension effect on buttons emphasizes clickability Animation emphasizes the featured product
53. 5. TOOLS: IMAGERY Icons engage the eye and are consistent with the visual system in a related app Are two icon systems too many?
54. 5. TOOLS: IMAGERY What can contrast do? What creates contrast? Direct Emphasize Engage Attract (distract) Round/angular Warm/cool Flat/dimensional Big/small Centered/off-center Literal/abstract Text/image Dark/light Uppercase/lowercase On grid/off grid Dense/open