Intro to Design... For Devs

  • 1,247 views
Uploaded on

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

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

More in: Design , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,247
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
7
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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