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
![Page 1: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/1.jpg)
Intro to Design...for Devs
Antonio HolguinSr. Designer - Smashing Ideas@antonioholguin
1Thursday, December 8, 2011
![Page 2: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/2.jpg)
Design is just as much of a talent as it is a skill.
2Thursday, December 8, 2011
![Page 3: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/3.jpg)
Design is language.
3Thursday, December 8, 2011
![Page 4: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/4.jpg)
My own definition:
4Thursday, December 8, 2011
![Page 5: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/5.jpg)
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
![Page 6: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/6.jpg)
Getting people to do something or feel a
certain way.
6Thursday, December 8, 2011
![Page 7: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/7.jpg)
Designer : People::
Developer : Computers
7Thursday, December 8, 2011
![Page 8: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/8.jpg)
Programming is objectivewhereas Design is
subjective.
8Thursday, December 8, 2011
![Page 9: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/9.jpg)
Design can be just as rational as programming
9Thursday, December 8, 2011
![Page 10: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/10.jpg)
Luckily, you don’t have to figure it out.
10Thursday, December 8, 2011
![Page 11: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/11.jpg)
Getting Started
11Thursday, December 8, 2011
![Page 12: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/12.jpg)
Research and Discovery
12Thursday, December 8, 2011
![Page 13: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/13.jpg)
Know your audience
You’ve probably heard that.
13Thursday, December 8, 2011
![Page 14: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/14.jpg)
Know your client
14Thursday, December 8, 2011
![Page 15: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/15.jpg)
What are you trying to say, do, or make others
think?
15Thursday, December 8, 2011
![Page 16: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/16.jpg)
or whatever.
Good Artists Copy, Great Artists Steal
- Pablo Picasso (supposedly)
16Thursday, December 8, 2011
![Page 17: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/17.jpg)
Rules for Design
17Thursday, December 8, 2011
![Page 18: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/18.jpg)
EmphasisHarmonyUnityOpposition
built with...
18Thursday, December 8, 2011
![Page 19: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/19.jpg)
ColorLine, Shape, VolumeCompositionTypography
to name most important
19Thursday, December 8, 2011
![Page 20: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/20.jpg)
Color
20Thursday, December 8, 2011
![Page 21: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/21.jpg)
What makes up colors?
21Thursday, December 8, 2011
![Page 22: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/22.jpg)
Elements of color
Hue = colorSaturation = amount of hueBrightness = push towards whiteValue = lightness / darkness of a color, think along gray scales
22Thursday, December 8, 2011
![Page 23: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/23.jpg)
What do colors mean?
23Thursday, December 8, 2011
![Page 24: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/24.jpg)
Redenergetic, passion, anger,
danger, massive alert, STOP
24Thursday, December 8, 2011
![Page 25: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/25.jpg)
Purpleroyalty, happiness, accomplishment,
nightmares, insanity
25Thursday, December 8, 2011
![Page 26: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/26.jpg)
Bluesoothing, trust, loyalty, commitment, sadness
26Thursday, December 8, 2011
![Page 27: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/27.jpg)
GreenLuck, nature, envy, decay,
toxic, GO
27Thursday, December 8, 2011
![Page 28: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/28.jpg)
YellowHappy, warmth, caution,
alert
28Thursday, December 8, 2011
![Page 29: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/29.jpg)
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
![Page 30: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/30.jpg)
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
![Page 31: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/31.jpg)
Line - Shape - Volume
31Thursday, December 8, 2011
![Page 32: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/32.jpg)
Lines • Create division• Direct the eye• Can be implied
32Thursday, December 8, 2011
![Page 33: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/33.jpg)
33Thursday, December 8, 2011
![Page 34: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/34.jpg)
Shape • Fills an area• Makes solidarity • Forces posture• Important for things like icons
34Thursday, December 8, 2011
![Page 35: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/35.jpg)
35Thursday, December 8, 2011
![Page 36: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/36.jpg)
Weight or density • Gives dimension• Add grounding• Heavy vs Light
36Thursday, December 8, 2011
![Page 37: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/37.jpg)
37Thursday, December 8, 2011
![Page 38: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/38.jpg)
Composition
38Thursday, December 8, 2011
![Page 39: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/39.jpg)
LayoutBalance (Symmetry)SpaceHierarchy
39Thursday, December 8, 2011
![Page 40: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/40.jpg)
Grids • 960• Quarters, 3x (aka Rule of Thirds)• Columns, i.e. 2 vs 3• 24px and 40 px
40Thursday, December 8, 2011
![Page 41: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/41.jpg)
960 Grid with 24 column
41Thursday, December 8, 2011
![Page 42: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/42.jpg)
Rule of Thirds
42Thursday, December 8, 2011
![Page 43: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/43.jpg)
43Thursday, December 8, 2011
![Page 44: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/44.jpg)
Golden Ratio
Proportion of 1.618 - following 1,1,2,3,5,8,13,21,34...
44Thursday, December 8, 2011
![Page 45: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/45.jpg)
45Thursday, December 8, 2011
![Page 46: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/46.jpg)
Symmetry vs Asymmetry • Create balance • Draw importance• Define “pretty”
46Thursday, December 8, 2011
![Page 47: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/47.jpg)
Folded symmetry
47Thursday, December 8, 2011
![Page 48: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/48.jpg)
48Thursday, December 8, 2011
![Page 49: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/49.jpg)
Radial symmetry
49Thursday, December 8, 2011
![Page 50: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/50.jpg)
Asymmetry
50Thursday, December 8, 2011
![Page 51: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/51.jpg)
Space Use it wisely Use it for goodDon’t try to force too much
51Thursday, December 8, 2011
![Page 52: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/52.jpg)
52Thursday, December 8, 2011
![Page 53: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/53.jpg)
WTF? SoaB.
53Thursday, December 8, 2011
![Page 54: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/54.jpg)
Oh OK.
54Thursday, December 8, 2011
![Page 55: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/55.jpg)
Positive / Negative Space
55Thursday, December 8, 2011
![Page 56: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/56.jpg)
White space Just like your code, using whitespace well helps legibility.
56Thursday, December 8, 2011
![Page 57: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/57.jpg)
57Thursday, December 8, 2011
![Page 58: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/58.jpg)
Visual hierarchy • Equal Sizing = Same Importance• Larger Items are more Important• Placement of Elements • Group Similar Elements
58Thursday, December 8, 2011
![Page 59: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/59.jpg)
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
![Page 60: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/60.jpg)
Typography
60Thursday, December 8, 2011
![Page 61: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/61.jpg)
Typography tips
• Text should be legible• No more than 3 fonts• Watch weight and size
61Thursday, December 8, 2011
![Page 62: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/62.jpg)
Fonts and styles• Serif• San Serif• Monospaced• Script• Non Latin Alphabets• Italic• Bold
62Thursday, December 8, 2011
![Page 63: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/63.jpg)
63Thursday, December 8, 2011
![Page 64: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/64.jpg)
Typesetting
• Kerning – distance between two letters• Tracking – distribution between multiple characters• Leading – distance between baselines
64Thursday, December 8, 2011
![Page 65: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/65.jpg)
Elements of a typeface
Baseline X-height
Serif Sans Serif
Descender Ascender
65Thursday, December 8, 2011
![Page 66: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/66.jpg)
More informationTypeface Elements: http://bit.ly/sOAOth
Fonts.com Glossary: http://www.fonts.com/aboutfonts/glossary
66Thursday, December 8, 2011
![Page 67: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/67.jpg)
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
![Page 68: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/68.jpg)
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
![Page 69: Intro to Design... For Devs](https://reader033.vdocuments.us/reader033/viewer/2022050801/54bfe7394a795974398b459c/html5/thumbnails/69.jpg)
Antonio HolguinSenior Designer @SmashingIdeas@AntonioHolguinhttp://swfhead.com < gonna be changing
69Thursday, December 8, 2011