Intro to Design For Devs, 360|Flex 2012
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Intro to Design For Devs, 360|Flex 2012

on

  • 1,081 views

 

Statistics

Views

Total Views
1,081
Views on SlideShare
1,045
Embed Views
36

Actions

Likes
1
Downloads
17
Comments
0

1 Embed 36

https://twitter.com 36

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Intro to Design For Devs, 360|Flex 2012 Presentation Transcript

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