Web Application Visual Design for Non-Designers

Web Application Visual and UI Design for Non-DesignersBOSTON CHI PROFESSIONAL DEVELOPMENT 2011Tania Schlatter & Deborah LevinsonNimble Partners

4. innovatecreate new paradigms3.elevate the ordinaryselect color, fonts and imagery that communicate personality2.make informed decisionscreate visual hierarchy to support use with type, color and placement1.avoid common mistakesalign elements | group like elements | use fonts appropriately | use colors appropriately | be consistent

We’ll focus on the green areas

Agenda1. BASIC PRINCIPLES: CONSISTENCY, HIERARCHY AND PERSONALITYexamples and discussion(break)2. LAYOUTexamples, discussion, two activities(BREAK)3. TYPEexamples and discussion4. COLOR examples and discussion5. IMAGERYexamples and discussion6. SUMMARYactivity and discussion

Why consistency, hierarchy and personality?

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

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/

1. BASIC PRINCIPLES: CONSISTENCY, HIERARCHY AND PERSONALITY“Is it self-evident?” Create a clear visual hierarchy

Break up pages into clearly defined areas

Make it obvious what’s clickable

Keep the noise down to a dull roar1. BASIC PRINCIPLES: CONSISTENCY, HIERARCHY AND PERSONALITY“Is it clear?“Is it accessible (does it engage)?”“Is it appropriate?”

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. 313.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 Holland1. BASIC PRINCIPLES: CONSISTENCY, HIERARCHY AND PERSONALITY

1. BASIC PRINCIPLES: CONSISTENCY, HIERARCHY AND PERSONALITYWhat’s going on here?Stack OverflowPivotalTrackerChase credit card Oracle jobs

goalstoolslayoutPosition and arrangement of elementstypeFont, size, stylescolorHue, shade, valueimageryLogo, photos, illustrations, patterns, treatmentconsistencyhierarchypersonality

Why “tools?”Understanding Comics Scott McCloud p. 179

2. TOOLS: LAYOUT – EXERCISEHow do you decide where things should go?

2. TOOLS: LAYOUTPosition ProximityAlignmentNestingGroupingGridHelp create relationshipsand tell a story

2. TOOLS: LAYOUTIs there an existing related system?Yes? How can you place things so that they make sense based on what people expect?No? How can you make decisions about placement based on what people will need to do? screen-level

widget-level2. TOOLS: LAYOUTGoogle booksGoogle docsIdentify existing related templates/paradigms/patterns at the screen level and reuse. Google does not do this very well, especially at the widget-level.

2. TOOLS: LAYOUTIdentify existing templates/paradigms/patterns/conventions at the widget/feature level

2. TOOLS: LAYOUT - GRIDGrid systems provide a structure and framework for change

2. TOOLS: LAYOUT - GRIDGrid systems help with consistency and hierarchyhttp://www.fuelyourcreativity.com/grid-based-design-toolbox/

2. TOOLS: LAYOUT – EXERCISE PositionPriorityFlow

3. TOOLS: TYPEChoosing a fontHow many fonts do you need?What size and weight? http://www.thinkingwithtype.com/contents/letter/

3. TOOLS: TYPETest and compare fonts, sizes, leading, spacinghttp://www.typetester.org/

3. TOOLS: TYPEFont familieshave variations that help with hierarchy, butmay need visual adjustmentTahoma hierarchyGeorgia hierarchy

3. TOOLS: TYPEMixing fontscreates greatercontrast butrequires handadjusting and careful selectionTahoma and Georgia hierarchy

3. TOOLS: TYPEhttp://www.thinkingwithtype.com/contents/text/#Hierarchy

3. TOOLS: TYPEhttp://www.useit.com

4. TOOLS: COLORHueValueShade Complementhttp://seahawk4.blogspot.com/2010_02_01_archive.html

4. TOOLS: COLORColor can:Create impactDirect the eyeConvey personalityComplementary colors are especially good at thishttp://www.slashfilm.com/orangeblue-contrast-in-movie-posters/

4. TOOLS: COLOROrange and blue are everywhere!

4. TOOLS: COLORHow to choose?http://kuler.adobe.com/

4. TOOLS: COLOROne “lead” colorOne secondary or accent colorVariations in shade/value

4. TOOLS: COLORStrategic use of accent color

4. TOOLS: COLORVisual spanking

4. TOOLS: COLORAlternatives:Gentle use of redLimited use of redNon-red accent and strategic positionStrategic position and catchy copy

5. TOOLS: IMAGERYLogoMay be text (logotype), symbolic, iconic, pictorial Photos/videoShould add informationIllustrationsCan be literal, data-derived or abstractPatterns/treatmentCan help create visual interest without communicating content

5. TOOLS: IMAGERYquestions to asktoolsWho Is the audience? What are they accustomed to?WhatIs the content?WhereAre they when using?WhyAre people using the application?HowShould the organization be perceived?LogoMay be text (logotype), symbolic, iconic, pictorialPhotos/videoShould add information, not distract IllustrationsCan be literal, data-derived or abstractPatterns/treatmentCan help create visual interest without communicating content

5. TOOLS: IMAGERYSite audience said the organization is:“Service-oriented Caring, expert [and] passionate”“Personal”“Friendly”before

5. TOOLS: IMAGERYStrategic 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 contentPhotos of the facility provide a sense of place - foreshadow first visit experiencePhotos of practitioners reduce uncertaintyafter

5. TOOLS: IMAGERYStrategic use of treatment: Rounded corners contrast angular logo and magazine imagesGradation provides some depth and unifies elementsDimension effect on buttons emphasizes clickabilityAnimation emphasizes the featured product

5. TOOLS: IMAGERYIcons engage the eye and are consistent with the visual system in a related appAre two icon systems too many?

5. TOOLS: IMAGERYWhat can contrast do?What creates contrast?DirectEmphasizeEngageAttract (distract)Round/angularWarm/coolFlat/dimensionalBig/smallCentered/off-centerLiteral/abstractText/imageDark/lightUppercase/lowercaseOn grid/off gridDense/open

5. TOOLS: IMAGERYContrast is powerful. Use sparingly.

Web Application Visual Design for Non-Designers

More Related Content

What's hot

Similar to Web Application Visual Design for Non-Designers

Recently uploaded

Web Application Visual Design for Non-Designers