On October 23rd, 2014, we updated our
By continuing to use LinkedIn’s SlideShare service, you agree to the revised terms, so please take a few minutes to review them.
An execution of a plan throughpatterned, organized andunderstood emotional,psychological and physiologicalhuman responses through eitherconscious or sub-consciouscommunication based on visual,physical, and auditory cues.
Getting people to dosomething or feel a certain way.
Designer : People ::Developer : Computers
Programming is objective. Design is subjective.
Luckily,you don’t have to ﬁgure it all out.
It’s OK to break the rules As long as you know what you’re doing
Research and Discovery
Know your audience You’ve probably heard that
Know your client A little less known, very valuable
What are you trying to say,do, or make others think?
Good Artists Copy,Great Artists Steal. - Pablo Picasso (supposedly) or whatever
Rules for Design
EmphasisHarmonyUnityOpposition built with...
Color & ContrastLine, Shape, VolumeCompositionTypography to name most important
Color & Contrast
Elements of ColorHue = colorSaturation = amount of hueBrightness = push towards whiteValue = lightness / darkness of a color,think along gray scales
energetic, passion, anger, danger, major alert, STOP
Color HarmoniesAnalogous – adjacent on color wheelComplementary – opposite hueMonochromatic – within the same hueTriad – 3 of equal distance on wheelNeutral – not found on color wheel
Color ParingSome colors go well togetherSome do notPairing gives relevance to another concept
ContrastMakes things easier to readHelps to draw attentionColor blind can distinguish better
More InformationColor Principles http://www.ncsu.edu/scivis/lessons/colormodels/color_models2.htmlColor Harmony http://kuler.adobe.com/#createBasic Color Theoryhttp://www.colormatters.com/color-and-design/basic-color-theoryIn fact, check out all of Colormatters.com
Line, Shape, Weight
Lines• Create division• Direct the eye• Can be implied
Shape• Fills an area• Makes solidarity• Forces posture• Important for things like icons
Weight or density• Gives dimension• Add grounding• Heavy vs Light
Grids• 960• Quarters, 3x (aka Rule of Thirds)• Columns, i.e. 2 vs 3• 24px and 40 px
Rule of Thirds
Golden RatioProportion of 1.618 - following 1,1,2,3,5,8,13,21,34...
Symmetry vs Asymmetry• Create balance• Draw importance• Deﬁne “pretty”
SpaceUse it wiselyUse it for goodDon’t try to force too much
Positive & Negative Space
White spaceJust like in your code, using whitespace well helps legibility
Visual Hierarchy• Equal Sizing, Color/Value, Weight! ! ! ! ! ! ! ! ! ! =! ! ! ! ! ! Same Importance• Larger Items are more Important• Placement of Elements• Group Similar Elements
More Information960 Grid http://www.960.gsGolden Ratio http://bit.ly/9OIfnA (Paul Trani)White Space http://bit.ly/a0ebKf (AlistApart)
Typography Tips• Text should be legible• No more than 3 fonts• Watch weight and size
Fonts and styles• Serif • Italic• San Serif • Bold• Monospaced • Thin/Light• Script • THick• Non Latin Alphabets • Never to be used, ever at penalty of death
TypesettingKerning – distance between two lettersTracking – distribution betweenmultiple charactersLeading – distance between baselines
Elements of a Typeface (some) Baseline X-height Serif Serif Sans Descender Ascender
More InformationTypeface Elements http://bit.ly/sOAOthFonts.com Glossary http://www.fonts.com/aboutfonts/glossary
More InformationWhat should I look for in a UI typeface?http://bit.ly/pWxY3sWhy you should care about Typography (checkout the “What it’s saying” section)http://bit.ly/ohghLY
Interaction Design10 Principles of Interaction Design:http://www.netmagazine.com/features/10-principles-interaction-designDeeper ThinkingUX Movement http://uxmovement.com
It ain’t easy
THANKSAntonio HolguinSenior Mobile Designer @SmashingIdeas@AntonioHolguinhttp://antonioholguin.com