Upload
antonioholguin
View
1.097
Download
1
Embed Size (px)
DESCRIPTION
Citation preview
Intro to Design...for Devs
Antonio HolguinSr. Mobile Designer at Smashing Ideas@antonioholguin
Design is just as much of a talent as it is a skill.
Design is a language.
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 figure it all out.
It’s OK to break the rules
As long as you know what you’re doing
Getting Started
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.
or whatever
- Pablo Picasso (supposedly)
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
royalty, happiness,accomplishment,
nightmares, insanity
soothing, trust, loyalty,commitment, sadness
Luck, nature, envy, decay,toxic, GO
Happy, warmth, caution,energetic, alert
Joy, heat, excitement, passion, alert, distrust, action
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 attention Color blind can distinguish better
More InformationColor Principles http://www.ncsu.edu/scivis/lessons/colormodels/color_models2.html
Color Harmony http://kuler.adobe.com/#create
Basic 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
Composition
LayoutBalance (Symmetry)SpaceHierarchy
Grids• 960• Quarters, 3x (aka Rule of Thirds)• Columns, i.e. 2 vs 3• 24px and 40 px
Rule of Thirds
Golden Ratio
Proportion of 1.618 - following 1,1,2,3,5,8,13,21,34...
Symmetry vs Asymmetry• Create balance• Draw importance• Define “pretty”
Folded Symmetry
Radial Symmetry
Asymmetry
SpaceUse it wiselyUse it for goodDon’t try to force too much
Found Him!
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.gs
Golden Ratio http://bit.ly/9OIfnA (Paul Trani)
White Space http://bit.ly/a0ebKf (AlistApart)
Typography
Typography Tips• Text should be legible• No more than 3 fonts• Watch weight and size
Fonts and styles• Serif• San Serif• Monospaced• Script• Non Latin Alphabets
• Italic• Bold• Thin/Light• THick
• 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
Descender Ascender
Serif Sans
More InformationTypeface Elements http://bit.ly/sOAOth
Fonts.com Glossary http://www.fonts.com/aboutfonts/glossary
More InformationWhat should I look for in a UI typeface?http://bit.ly/pWxY3s
Why 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-design
Deeper ThinkingUX Movement http://uxmovement.com
It ain’t easy
Antonio HolguinSenior Mobile Designer @SmashingIdeas
@AntonioHolguinhttp://antonioholguin.com
THANKS