Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Intro to Design For Devs, 360|Flex 2012

1,120 views

Published on

Published in: Design, Technology
  • Be the first to comment

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

×