Intro to Design...for DevsAntonio HolguinSr. Mobile Designer at Smashing Ideas@antonioholguin
Design is just as muchof a talent as it is a skill.
Design is a language.
An execution of a plan throughpatterned, organized andunderstood emotional,psychological and physiologicalhuman responses ...
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.                - 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 col...
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...
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://kul...
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 RatioProportion 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...
More Information960 Grid http://www.960.gsGolden Ratio http://bit.ly/9OIfnA (Paul Trani)White Space http://bit.ly/a0ebKf (...
Typography
Typography Tips• Text should be legible• No more than 3 fonts• Watch weight and size
Fonts and styles• Serif                      • Italic• San Serif                  • Bold• Monospaced                 • Thi...
TypesettingKerning – distance between two lettersTracking – distribution betweenmultiple charactersLeading – distance betw...
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...
Interaction Design10 Principles of Interaction Design:http://www.netmagazine.com/features/10-principles-interaction-design...
It ain’t easy
THANKSAntonio HolguinSenior Mobile Designer @SmashingIdeas@AntonioHolguinhttp://antonioholguin.com
Intro to Design For Devs, 360|Flex 2012
Intro to Design For Devs, 360|Flex 2012
Intro to Design For Devs, 360|Flex 2012
Intro to Design For Devs, 360|Flex 2012
Intro to Design For Devs, 360|Flex 2012
Intro to Design For Devs, 360|Flex 2012
Intro to Design For Devs, 360|Flex 2012
Intro to Design For Devs, 360|Flex 2012
Intro to Design For Devs, 360|Flex 2012
Intro to Design For Devs, 360|Flex 2012
Intro to Design For Devs, 360|Flex 2012
Intro to Design For Devs, 360|Flex 2012
Intro to Design For Devs, 360|Flex 2012
Intro to Design For Devs, 360|Flex 2012
Intro to Design For Devs, 360|Flex 2012
Intro to Design For Devs, 360|Flex 2012
Upcoming SlideShare
Loading in …5
×

Intro to Design For Devs, 360|Flex 2012

914
-1

Published on

Published in: Design, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
914
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
18
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Intro to Design For Devs, 360|Flex 2012

  1. 1. Intro to Design...for DevsAntonio HolguinSr. Mobile Designer at Smashing Ideas@antonioholguin
  2. 2. Design is just as muchof a talent as it is a skill.
  3. 3. Design is a language.
  4. 4. 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.
  5. 5. Getting people to dosomething or feel a certain way.
  6. 6. Designer : People ::Developer : Computers
  7. 7. Programming is objective. Design is subjective.
  8. 8. Luckily,you don’t have to figure it all out.
  9. 9. It’s OK to break the rules As long as you know what you’re doing
  10. 10. Getting Started
  11. 11. Research and Discovery
  12. 12. Know your audience You’ve probably heard that
  13. 13. Know your client A little less known, very valuable
  14. 14. What are you trying to say,do, or make others think?
  15. 15. Good Artists Copy,Great Artists Steal. - Pablo Picasso (supposedly) or whatever
  16. 16. Rules for Design
  17. 17. EmphasisHarmonyUnityOpposition built with...
  18. 18. Color & ContrastLine, Shape, VolumeCompositionTypography to name most important
  19. 19. Color & Contrast
  20. 20. Elements of ColorHue = colorSaturation = amount of hueBrightness = push towards whiteValue = lightness / darkness of a color,think along gray scales
  21. 21. energetic, passion, anger, danger, major alert, STOP
  22. 22. royalty, happiness, accomplishment,nightmares, insanity
  23. 23. soothing, trust, loyalty,commitment, sadness
  24. 24. Luck, nature, envy, decay, toxic, GO
  25. 25. Happy, warmth, caution, energetic, alert
  26. 26. Joy, heat, excitement, passion, alert, distrust, action
  27. 27. Color HarmoniesAnalogous – adjacent on color wheelComplementary – opposite hueMonochromatic – within the same hueTriad – 3 of equal distance on wheelNeutral – not found on color wheel
  28. 28. Color ParingSome colors go well togetherSome do notPairing gives relevance to another concept
  29. 29. ContrastMakes things easier to readHelps to draw attentionColor blind can distinguish better
  30. 30. 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
  31. 31. Line, Shape, Weight
  32. 32. Lines• Create division• Direct the eye• Can be implied
  33. 33. Shape• Fills an area• Makes solidarity• Forces posture• Important for things like icons
  34. 34. Weight or density• Gives dimension• Add grounding• Heavy vs Light
  35. 35. Composition
  36. 36. LayoutBalance (Symmetry)SpaceHierarchy
  37. 37. Grids• 960• Quarters, 3x (aka Rule of Thirds)• Columns, i.e. 2 vs 3• 24px and 40 px
  38. 38. Rule of Thirds
  39. 39. Golden RatioProportion of 1.618 - following 1,1,2,3,5,8,13,21,34...
  40. 40. Symmetry vs Asymmetry• Create balance• Draw importance• Define “pretty”
  41. 41. Folded Symmetry
  42. 42. Radial Symmetry
  43. 43. Asymmetry
  44. 44. SpaceUse it wiselyUse it for goodDon’t try to force too much
  45. 45. Found Him!
  46. 46. Positive & Negative Space
  47. 47. White spaceJust like in your code, using whitespace well helps legibility
  48. 48. Visual Hierarchy• Equal Sizing, Color/Value, Weight! ! ! ! ! ! ! ! ! ! =! ! ! ! ! ! Same Importance• Larger Items are more Important• Placement of Elements• Group Similar Elements
  49. 49. More Information960 Grid http://www.960.gsGolden Ratio http://bit.ly/9OIfnA (Paul Trani)White Space http://bit.ly/a0ebKf (AlistApart)
  50. 50. Typography
  51. 51. Typography Tips• Text should be legible• No more than 3 fonts• Watch weight and size
  52. 52. 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
  53. 53. TypesettingKerning – distance between two lettersTracking – distribution betweenmultiple charactersLeading – distance between baselines
  54. 54. Elements of a Typeface (some) Baseline X-height Serif Serif Sans Descender Ascender
  55. 55. More InformationTypeface Elements http://bit.ly/sOAOthFonts.com Glossary http://www.fonts.com/aboutfonts/glossary
  56. 56. 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
  57. 57. Interaction Design10 Principles of Interaction Design:http://www.netmagazine.com/features/10-principles-interaction-designDeeper ThinkingUX Movement http://uxmovement.com
  58. 58. It ain’t easy
  59. 59. THANKSAntonio HolguinSenior Mobile Designer @SmashingIdeas@AntonioHolguinhttp://antonioholguin.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×