designing look and feel

William H. Bowers – [email protected] H. Bowers – [email protected]

Designing Look and Designing Look and FeelFeel

Cooper 19Cooper 19


Visual Art vs. Visual Visual Art vs. Visual DesignDesign Artists produce artifacts to Artists produce artifacts to

provoke an aesthetic responseprovoke an aesthetic response Art is self-expressiveArt is self-expressive Art meets the artist’s goalsArt meets the artist’s goals Visual design meets the goals of Visual design meets the goals of

the user, not the designerthe user, not the designer Communicates to the end userCommunicates to the end user


Graphic Design and Visual Graphic Design and Visual Interface DesignInterface Design Design is within a functional Design is within a functional

frameworkframework Designer must understand color, Designer must understand color,

typefaces, form and compositiontypefaces, form and composition Also must understand interaction Also must understand interaction

with and the behavior of the with and the behavior of the softwaresoftware


Graphic Design and UIsGraphic Design and UIs

Graphic design has been mostly Graphic design has been mostly printprint

Graphic designers understand Graphic designers understand visual principlesvisual principles

Weaker understanding of Weaker understanding of software and UIssoftware and UIs


Visual Interface and Visual Interface and Information DesignInformation Design Some graphic design skills Some graphic design skills

necessarynecessary Focus is on organizational aspectsFocus is on organizational aspects Must be knowledgeable of Must be knowledgeable of

interactioninteraction Match visual structure with logicalMatch visual structure with logical


Visual Interface and Visual Interface and Information DesignInformation Design Communicate program states to Communicate program states to

usersusers In web design, content outweighs In web design, content outweighs

functionfunction Work closely with information Work closely with information

architectsarchitects


Visual InformationVisual InformationDesign PrinciplesDesign Principles Avoid visual noise and clutterAvoid visual noise and clutter Use contrast, similarity and Use contrast, similarity and

layeringlayering Provide structure and flowProvide structure and flow Be cohesive, consistent and Be cohesive, consistent and

appropriateappropriate Integrate style and functionIntegrate style and function


Avoid Visual Noise and Avoid Visual Noise and ClutterClutter Superfluous visual elementsSuperfluous visual elements Makes it impossible to Makes it impossible to

communicatecommunicate Over embellished elementsOver embellished elements Overuse of lines and rulesOveruse of lines and rules Jumbled, overcrowded screensJumbled, overcrowded screens Too much functionality in too little Too much functionality in too little

spacespace


Avoid Visual Noise and Avoid Visual Noise and ClutterClutter Keep non-entertainment UI’s simpleKeep non-entertainment UI’s simple Use simple forms and graphicsUse simple forms and graphics Muted (less saturated) colorsMuted (less saturated) colors One or two fonts in one or two sizesOne or two fonts in one or two sizes Make similar items appear similarMake similar items appear similar Use controls that can serve multiple Use controls that can serve multiple

purposespurposes


ContrastContrast

Visual contrast between active and Visual contrast between active and passive elementspassive elements

Contrast between logical setsContrast between logical sets Can indicate importanceCan indicate importance Pseudo 3DPseudo 3D Hue, saturation and brightnessHue, saturation and brightness Spatial (positional) contrastSpatial (positional) contrast Shape, orientation, sizeShape, orientation, size


LayeringLayering

RecedingReceding– DarkDark– Cool Cool – DesaturatedDesaturated– Small elementsSmall elements


LayeringLayering

AdvancingAdvancing– LightLight– WarmWarm– SaturatedSaturated– Large elementsLarge elements


Figure and GroundFigure and Ground

We usually perceiveWe usually perceive– Light objects as figuresLight objects as figures– Dark objects as backgroundDark objects as background

Center the figures on the Center the figures on the backgroundbackground

Give figures and background Give figures and background equal weightequal weight


Visual TestingVisual Testing

SquintSquint Use a mirrorUse a mirror Invert the screenInvert the screen


Structure and FlowStructure and Flow

GroupingGrouping– Position or proximityPosition or proximity– AlignmentAlignment– ColorColor– TextureTexture– Size ShapeSize Shape

Use clear, simple gridsUse clear, simple grids


Alignment and GridsAlignment and Grids


Logical FlowLogical Flow


Symmetry and BalanceSymmetry and Balance


Appropriate ImageryAppropriate Imagery

Understand what needs to be Understand what needs to be communicatedcommunicated

Understand how the user thinks Understand how the user thinks about what must be communicatedabout what must be communicated

Must know the visual language of Must know the visual language of the user’s domain and environmentthe user’s domain and environment

Culturally dependentCulturally dependent


Function Oriented IconsFunction Oriented Icons

Represent action and verbRepresent action and verb Make sure meanings are Make sure meanings are

appropriate for the audienceappropriate for the audience Group related functionsGroup related functions Keep icons simpleKeep icons simple Reuse elements, when possibleReuse elements, when possible


BrandingBranding

Sum of interactions people have Sum of interactions people have with a companywith a company

First impressions of product are First impressions of product are importantimportant

Build customer relationships Build customer relationships through brandingthrough branding


Principles of Visual Principles of Visual Information DesignInformation Design Two problems (according to Two problems (according to

Tufte)Tufte)– Difficult to display multidimensional Difficult to display multidimensional

information on 2D surfaceinformation on 2D surface– Resolution does not support dense Resolution does not support dense

informationinformation


Tufte’s Grand PrinciplesTufte’s Grand Principles

Enforce visual comparisonsEnforce visual comparisons Show causalityShow causality Show multiple variablesShow multiple variables Integrate text, graphics and dataIntegrate text, graphics and data Quality, relevance and integrityQuality, relevance and integrity Show things adjacent in spaceShow things adjacent in space Don’t de-quantify quantifiable dataDon’t de-quantify quantifiable data


Enforce Visual ComparisonsEnforce Visual Comparisons

Compare related variablesCompare related variables Show trendsShow trends Compare before and afterCompare before and after Use previewsUse previews


Show CausalityShow Causality

Show consequencesShow consequences Demonstrate cause and effectDemonstrate cause and effect


Show Multiple VariablesShow Multiple Variables

Display if relatedDisplay if related Don’t sacrifice clarityDon’t sacrifice clarity


Integrate Text, Graphics Integrate Text, Graphics and Dataand Data Separate keys and legends are Separate keys and legends are

less effectiveless effective Shifting focus is distractingShifting focus is distracting http://www.koa.com/where/pa/http://www.koa.com/where/pa/


Quality, Relevance and Quality, Relevance and IntegrityIntegrity Insure data supports goalsInsure data supports goals Insure quality of dataInsure quality of data Poor quality or missing data Poor quality or missing data

destroys credibilitydestroys credibility


Show Things Adjacent in Show Things Adjacent in SpaceSpace Don’t superimposeDon’t superimpose Show sequential imagesShow sequential images


Don’t De-quantify Don’t De-quantify Quantifiable DataQuantifiable Data Graphs are useful to see Graphs are useful to see

relationshipsrelationships Must retain numbers to be Must retain numbers to be

meaningfulmeaningful


TextText

Text forms recognizable shapesText forms recognizable shapes ALL CAPS ARE HARD TO READALL CAPS ARE HARD TO READ Visually show whatVisually show what Textually show whichTextually show which Use high contrast with backgroundUse high contrast with background Don’t use less than 10 point fontsDon’t use less than 10 point fonts Keep text shortKeep text short


ColorColor

Draws attentionDraws attention Improves navigation and Improves navigation and

scanning speedscanning speed Shows relationshipsShows relationships Seven or more degrades useSeven or more degrades use Don’t put complementary colors Don’t put complementary colors

togethertogether


Standards and GuidelinesStandards and Guidelines

Develop for the productDevelop for the product Does not insure a good UIDoes not insure a good UI Must evolve with technologyMust evolve with technology Should not be rigid rulesShould not be rigid rules Violate only when necessaryViolate only when necessary


Questions & DiscussionQuestions & Discussion

designing look and feel

Documents

visual principlesweaker

visual art

visual designartists

visual language

functionavoid visual

visual interface designdesign

little spaceavoid visual

uisgraphic design