Your SlideShare is downloading. ×
0
Intro to Design...                             for Devs               Antonio Holguin               Sr. Designer - Smashin...
Design is just as much                  of a talent as it is a skill.Thursday, December 8, 2011                        2
Design is language.Thursday, December 8, 2011                         3
My own definition:Thursday, December 8, 2011                       4
An execution of a plan through               patterned, organized and               understood emotional,               ps...
Getting people to do                             something or feel a                                 certain way.Thursday,...
Designer : People                             ::                   Developer : ComputersThursday, December 8, 2011        ...
Programming is objective               whereas Design is                  subjective.Thursday, December 8, 2011           ...
Design can be just as              rational as programmingThursday, December 8, 2011              9
Luckily,                             you don’t have to                               figure it out.Thursday, December 8, 20...
Getting StartedThursday, December 8, 2011                     11
Research and DiscoveryThursday, December 8, 2011                12
Know your audience                                    You’ve probably heard that.Thursday, December 8, 2011               ...
Know your clientThursday, December 8, 2011                      14
What are you trying to                  say, do, or make others                           think?Thursday, December 8, 2011...
Good Artists Copy,                             Great Artists Steal                                              - Pablo Pi...
Rules for DesignThursday, December 8, 2011                      17
Emphasis               Harmony               Unity               Opposition                             built with...Thurs...
Color               Line, Shape, Volume               Composition               Typography                             to ...
ColorThursday, December 8, 2011           20
What makes up colors?Thursday, December 8, 2011                 21
Elements of color          Hue = color          Saturation = amount of hue          Brightness = push towards white       ...
What do colors mean?Thursday, December 8, 2011                  23
Red            energetic, passion, anger,             danger, massive alert,                      STOPThursday, December 8...
Purple                              royalty, happiness,                               accomplishment,                     ...
Blue                    soothing, trust, loyalty,                    commitment, sadnessThursday, December 8, 2011        ...
Green            Luck, nature, envy, decay,                    toxic, GOThursday, December 8, 2011               27
Yellow               Happy, warmth, caution,                        alertThursday, December 8, 2011               28
Color harmonies:          Analogous – adjacent on color wheel          Complementary – opposite hue          Monochromatic...
More information          Color Principles: http://www.ncsu.edu/scivis/          lessons/colormodels/color_models2.html   ...
Line - Shape - VolumeThursday, December 8, 2011                  31
Lines          • Create division          • Direct the eye          • Can be impliedThursday, December 8, 2011    32
Thursday, December 8, 2011   33
Shape          • Fills an area          • Makes solidarity          • Forces posture          • Important for things like ...
Thursday, December 8, 2011   35
Weight or density          • Gives dimension          • Add grounding          • Heavy vs LightThursday, December 8, 2011 ...
Thursday, December 8, 2011   37
CompositionThursday, December 8, 2011                 38
Layout          Balance (Symmetry)          Space          HierarchyThursday, December 8, 2011     39
Grids          • 960          • Quarters, 3x (aka Rule of Thirds)          • Columns, i.e. 2 vs 3          • 24px and 40 p...
960 Grid with 24 columnThursday, December 8, 2011               41
Rule of ThirdsThursday, December 8, 2011                    42
Thursday, December 8, 2011   43
Golden Ratio                   Proportion of 1.618 - following 1,1,2,3,5,8,13,21,34...Thursday, December 8, 2011          ...
Thursday, December 8, 2011   45
Symmetry vs Asymmetry          • Create balance          • Draw importance          • Define “pretty”Thursday, December 8, ...
Folded symmetryThursday, December 8, 2011                     47
Thursday, December 8, 2011   48
Radial symmetryThursday, December 8, 2011                     49
AsymmetryThursday, December 8, 2011               50
Space          Use it wisely          Use it for good          Don’t try to force too muchThursday, December 8, 2011      ...
Thursday, December 8, 2011   52
WTF? SoaB.Thursday, December 8, 2011                53
Oh OK.Thursday, December 8, 2011   54
Positive / Negative SpaceThursday, December 8, 2011            55
White space          Just like your code, using white          space well helps legibility.Thursday, December 8, 2011     ...
Thursday, December 8, 2011   57
Visual hierarchy          • Equal Sizing = Same Importance          • Larger Items are more Important          • Placement...
More information          960 Grid: http://www.960.gs          Golden Ratio: http://bit.ly/9OIfnA   (Paul Trani)          ...
TypographyThursday, December 8, 2011                60
Typography tips          • Text should be legible          • No more than 3 fonts          • Watch weight and sizeThursday...
Fonts and styles          • Serif          • San Serif          • Monospaced          • Script          • Non Latin Alphab...
Thursday, December 8, 2011   63
Typesetting          • Kerning – distance between two letters          • Tracking – distribution between          multiple...
Elements of a typeface                              Baseline    X-height                                  Serif   Sans Ser...
More information          Typeface Elements: http://bit.ly/sOAOth          Fonts.com Glossary: http://www.fonts.com/      ...
More information          What should I look for in a UI typeface?:          http://bit.ly/pWxY3s          Why you should ...
Interaction Design          10Principles of Interaction Design:          http://www.netmagazine.com/features/10-          ...
Antonio Holguin          Senior Designer @SmashingIdeas          @AntonioHolguin          http://swfhead.com < gonna be ch...
Upcoming SlideShare
Loading in...5
×

Intro to Design... For Devs

1,310

Published on

Presentation for Seattle Web App Developer meeting on 12/8/2011. I'll make this cleaner, pretty, better for 360|Flex

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

No Downloads
Views
Total Views
1,310
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Intro to Design... For Devs"

  1. 1. Intro to Design... for Devs Antonio Holguin Sr. Designer - Smashing Ideas @antonioholguinThursday, December 8, 2011 1
  2. 2. Design is just as much of a talent as it is a skill.Thursday, December 8, 2011 2
  3. 3. Design is language.Thursday, December 8, 2011 3
  4. 4. My own definition:Thursday, December 8, 2011 4
  5. 5. 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.Thursday, December 8, 2011 5
  6. 6. Getting people to do something or feel a certain way.Thursday, December 8, 2011 6
  7. 7. Designer : People :: Developer : ComputersThursday, December 8, 2011 7
  8. 8. Programming is objective whereas Design is subjective.Thursday, December 8, 2011 8
  9. 9. Design can be just as rational as programmingThursday, December 8, 2011 9
  10. 10. Luckily, you don’t have to figure it out.Thursday, December 8, 2011 10
  11. 11. Getting StartedThursday, December 8, 2011 11
  12. 12. Research and DiscoveryThursday, December 8, 2011 12
  13. 13. Know your audience You’ve probably heard that.Thursday, December 8, 2011 13
  14. 14. Know your clientThursday, December 8, 2011 14
  15. 15. What are you trying to say, do, or make others think?Thursday, December 8, 2011 15
  16. 16. Good Artists Copy, Great Artists Steal - Pablo Picasso (supposedly) or whatever.Thursday, December 8, 2011 16
  17. 17. Rules for DesignThursday, December 8, 2011 17
  18. 18. Emphasis Harmony Unity Opposition built with...Thursday, December 8, 2011 18
  19. 19. Color Line, Shape, Volume Composition Typography to name most importantThursday, December 8, 2011 19
  20. 20. ColorThursday, December 8, 2011 20
  21. 21. What makes up colors?Thursday, December 8, 2011 21
  22. 22. Elements of color Hue = color Saturation = amount of hue Brightness = push towards white Value = lightness / darkness of a color, think along gray scalesThursday, December 8, 2011 22
  23. 23. What do colors mean?Thursday, December 8, 2011 23
  24. 24. Red energetic, passion, anger, danger, massive alert, STOPThursday, December 8, 2011 24
  25. 25. Purple royalty, happiness, accomplishment, nightmares, insanityThursday, December 8, 2011 25
  26. 26. Blue soothing, trust, loyalty, commitment, sadnessThursday, December 8, 2011 26
  27. 27. Green Luck, nature, envy, decay, toxic, GOThursday, December 8, 2011 27
  28. 28. Yellow Happy, warmth, caution, alertThursday, December 8, 2011 28
  29. 29. Color harmonies: Analogous – adjacent on color wheel Complementary – opposite hue Monochromatic – within the same hue Triad – 3 of equal distance on wheel Neutral – not found on color wheelThursday, December 8, 2011 29
  30. 30. More information Color 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-theory In fact, check out all of Colormatters.comThursday, December 8, 2011 30
  31. 31. Line - Shape - VolumeThursday, December 8, 2011 31
  32. 32. Lines • Create division • Direct the eye • Can be impliedThursday, December 8, 2011 32
  33. 33. Thursday, December 8, 2011 33
  34. 34. Shape • Fills an area • Makes solidarity • Forces posture • Important for things like iconsThursday, December 8, 2011 34
  35. 35. Thursday, December 8, 2011 35
  36. 36. Weight or density • Gives dimension • Add grounding • Heavy vs LightThursday, December 8, 2011 36
  37. 37. Thursday, December 8, 2011 37
  38. 38. CompositionThursday, December 8, 2011 38
  39. 39. Layout Balance (Symmetry) Space HierarchyThursday, December 8, 2011 39
  40. 40. Grids • 960 • Quarters, 3x (aka Rule of Thirds) • Columns, i.e. 2 vs 3 • 24px and 40 pxThursday, December 8, 2011 40
  41. 41. 960 Grid with 24 columnThursday, December 8, 2011 41
  42. 42. Rule of ThirdsThursday, December 8, 2011 42
  43. 43. Thursday, December 8, 2011 43
  44. 44. Golden Ratio Proportion of 1.618 - following 1,1,2,3,5,8,13,21,34...Thursday, December 8, 2011 44
  45. 45. Thursday, December 8, 2011 45
  46. 46. Symmetry vs Asymmetry • Create balance • Draw importance • Define “pretty”Thursday, December 8, 2011 46
  47. 47. Folded symmetryThursday, December 8, 2011 47
  48. 48. Thursday, December 8, 2011 48
  49. 49. Radial symmetryThursday, December 8, 2011 49
  50. 50. AsymmetryThursday, December 8, 2011 50
  51. 51. Space Use it wisely Use it for good Don’t try to force too muchThursday, December 8, 2011 51
  52. 52. Thursday, December 8, 2011 52
  53. 53. WTF? SoaB.Thursday, December 8, 2011 53
  54. 54. Oh OK.Thursday, December 8, 2011 54
  55. 55. Positive / Negative SpaceThursday, December 8, 2011 55
  56. 56. White space Just like your code, using white space well helps legibility.Thursday, December 8, 2011 56
  57. 57. Thursday, December 8, 2011 57
  58. 58. Visual hierarchy • Equal Sizing = Same Importance • Larger Items are more Important • Placement of Elements • Group Similar ElementsThursday, December 8, 2011 58
  59. 59. More information 960 Grid: http://www.960.gs Golden Ratio: http://bit.ly/9OIfnA (Paul Trani) White Space (AlistApart): http://bit.ly/a0ebKfThursday, December 8, 2011 59
  60. 60. TypographyThursday, December 8, 2011 60
  61. 61. Typography tips • Text should be legible • No more than 3 fonts • Watch weight and sizeThursday, December 8, 2011 61
  62. 62. Fonts and styles • Serif • San Serif • Monospaced • Script • Non Latin Alphabets • Italic • BoldThursday, December 8, 2011 62
  63. 63. Thursday, December 8, 2011 63
  64. 64. Typesetting • Kerning – distance between two letters • Tracking – distribution between multiple characters • Leading – distance between baselinesThursday, December 8, 2011 64
  65. 65. Elements of a typeface Baseline X-height Serif Sans Serif Descender AscenderThursday, December 8, 2011 65
  66. 66. More information Typeface Elements: http://bit.ly/sOAOth Fonts.com Glossary: http://www.fonts.com/ aboutfonts/glossaryThursday, December 8, 2011 66
  67. 67. More information What 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/ohghLYThursday, December 8, 2011 67
  68. 68. Interaction Design 10Principles of Interaction Design: http://www.netmagazine.com/features/10- principles-interaction-design Deeper Thinking: UX Movement http://uxmovement.comThursday, December 8, 2011 68
  69. 69. Antonio Holguin Senior Designer @SmashingIdeas @AntonioHolguin http://swfhead.com < gonna be changingThursday, December 8, 2011 69
  1. A particular slide catching your eye?

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

×