intro to design... for devs
DESCRIPTION
Presentation for Seattle Web App Developer meeting on 12/8/2011. I'll make this cleaner, pretty, better for 360|FlexTRANSCRIPT
Intro to Design...for Devs
Antonio HolguinSr. Designer - Smashing Ideas@antonioholguin
1Thursday, December 8, 2011
Design is just as much of a talent as it is a skill.
2Thursday, December 8, 2011
Design is language.
3Thursday, December 8, 2011
My own definition:
4Thursday, December 8, 2011
An execution of a plan through patterned, organized and understood emotional, psychological and physiological human responses through either conscious or sub-conscious communication based on visual, physical, and auditory cues.
5Thursday, December 8, 2011
Getting people to do something or feel a
certain way.
6Thursday, December 8, 2011
Designer : People::
Developer : Computers
7Thursday, December 8, 2011
Programming is objectivewhereas Design is
subjective.
8Thursday, December 8, 2011
Design can be just as rational as programming
9Thursday, December 8, 2011
Luckily, you don’t have to figure it out.
10Thursday, December 8, 2011
Getting Started
11Thursday, December 8, 2011
Research and Discovery
12Thursday, December 8, 2011
Know your audience
You’ve probably heard that.
13Thursday, December 8, 2011
Know your client
14Thursday, December 8, 2011
What are you trying to say, do, or make others
think?
15Thursday, December 8, 2011
or whatever.
Good Artists Copy, Great Artists Steal
- Pablo Picasso (supposedly)
16Thursday, December 8, 2011
Rules for Design
17Thursday, December 8, 2011
EmphasisHarmonyUnityOpposition
built with...
18Thursday, December 8, 2011
ColorLine, Shape, VolumeCompositionTypography
to name most important
19Thursday, December 8, 2011
Color
20Thursday, December 8, 2011
What makes up colors?
21Thursday, December 8, 2011
Elements of color
Hue = colorSaturation = amount of hueBrightness = push towards whiteValue = lightness / darkness of a color, think along gray scales
22Thursday, December 8, 2011
What do colors mean?
23Thursday, December 8, 2011
Redenergetic, passion, anger,
danger, massive alert, STOP
24Thursday, December 8, 2011
Purpleroyalty, happiness, accomplishment,
nightmares, insanity
25Thursday, December 8, 2011
Bluesoothing, trust, loyalty, commitment, sadness
26Thursday, December 8, 2011
GreenLuck, nature, envy, decay,
toxic, GO
27Thursday, December 8, 2011
YellowHappy, warmth, caution,
alert
28Thursday, December 8, 2011
Color harmonies:
Analogous – adjacent on color wheelComplementary – opposite hue Monochromatic – within the same hueTriad – 3 of equal distance on wheelNeutral – not found on color wheel
29Thursday, December 8, 2011
More informationColor Principles: http://www.ncsu.edu/scivis/lessons/colormodels/color_models2.html
Color Harmony: http://kuler.adobe.com/#create
Basic Color Theory:http://www.colormatters.com/color-and-design/basic-color-theoryIn fact, check out all of Colormatters.com
30Thursday, December 8, 2011
Line - Shape - Volume
31Thursday, December 8, 2011
Lines • Create division• Direct the eye• Can be implied
32Thursday, December 8, 2011
33Thursday, December 8, 2011
Shape • Fills an area• Makes solidarity • Forces posture• Important for things like icons
34Thursday, December 8, 2011
35Thursday, December 8, 2011
Weight or density • Gives dimension• Add grounding• Heavy vs Light
36Thursday, December 8, 2011
37Thursday, December 8, 2011
Composition
38Thursday, December 8, 2011
LayoutBalance (Symmetry)SpaceHierarchy
39Thursday, December 8, 2011
Grids • 960• Quarters, 3x (aka Rule of Thirds)• Columns, i.e. 2 vs 3• 24px and 40 px
40Thursday, December 8, 2011
960 Grid with 24 column
41Thursday, December 8, 2011
Rule of Thirds
42Thursday, December 8, 2011
43Thursday, December 8, 2011
Golden Ratio
Proportion of 1.618 - following 1,1,2,3,5,8,13,21,34...
44Thursday, December 8, 2011
45Thursday, December 8, 2011
Symmetry vs Asymmetry • Create balance • Draw importance• Define “pretty”
46Thursday, December 8, 2011
Folded symmetry
47Thursday, December 8, 2011
48Thursday, December 8, 2011
Radial symmetry
49Thursday, December 8, 2011
Asymmetry
50Thursday, December 8, 2011
Space Use it wisely Use it for goodDon’t try to force too much
51Thursday, December 8, 2011
52Thursday, December 8, 2011
WTF? SoaB.
53Thursday, December 8, 2011
Oh OK.
54Thursday, December 8, 2011
Positive / Negative Space
55Thursday, December 8, 2011
White space Just like your code, using whitespace well helps legibility.
56Thursday, December 8, 2011
57Thursday, December 8, 2011
Visual hierarchy • Equal Sizing = Same Importance• Larger Items are more Important• Placement of Elements • Group Similar Elements
58Thursday, December 8, 2011
More information960 Grid: http://www.960.gs
Golden Ratio: http://bit.ly/9OIfnA (Paul Trani)
White Space (AlistApart): http://bit.ly/a0ebKf
59Thursday, December 8, 2011
Typography
60Thursday, December 8, 2011
Typography tips
• Text should be legible• No more than 3 fonts• Watch weight and size
61Thursday, December 8, 2011
Fonts and styles• Serif• San Serif• Monospaced• Script• Non Latin Alphabets• Italic• Bold
62Thursday, December 8, 2011
63Thursday, December 8, 2011
Typesetting
• Kerning – distance between two letters• Tracking – distribution between multiple characters• Leading – distance between baselines
64Thursday, December 8, 2011
Elements of a typeface
Baseline X-height
Serif Sans Serif
Descender Ascender
65Thursday, December 8, 2011
More informationTypeface Elements: http://bit.ly/sOAOth
Fonts.com Glossary: http://www.fonts.com/aboutfonts/glossary
66Thursday, December 8, 2011
More informationWhat should I look for in a UI typeface?:http://bit.ly/pWxY3s
Why you should care about Typography: (check out the “What it’s saying” section)http://bit.ly/ohghLY
67Thursday, December 8, 2011
Interaction Design10Principles of Interaction Design:http://www.netmagazine.com/features/10-principles-interaction-design
Deeper Thinking: UX Movement http://uxmovement.com
68Thursday, December 8, 2011
Antonio HolguinSenior Designer @SmashingIdeas@AntonioHolguinhttp://swfhead.com < gonna be changing
69Thursday, December 8, 2011