Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Graphic Design for Programmers

Graphic Design for Programmers

Given at Kansas City Developers Conference 2013


Garrett Pennington

May 04, 2013

More Decks by Garrett Pennington

Other Decks in Design


  1. Graphic Design for Programers Garrett Pennington @gpennington

  2. Customers who bought this item also bought UX design for

    developers Andrew Dunkman Designers? We don’t need no stinkin’ Designers Jon von Gillern Ajax Best Practices Me!
  3. Who I am Not claiming to be a great designer

    I HAVE worked as both designer and developer Web, Product, Print Design Enjoy both design and development Not Me
  4. None
  5. “I wish I could write code. I’m just not a

  6. “I wish I could design. I’m just not a designer.”

  7. “I’m not a designer” means “I don’t have a need

    to design” “I have no context for design” “I have little experience designing” “I’m afraid my designs will be bad”
  8. “I’m not a programmer” means “I don’t have a need

    to program” “I have no context for programming” “I have little experience programming” “I’m afraid my code will be bad”
  9. Left Brain vs Right Brain Mercedes-Benz

  10. Skinny Jeans vs Cargo Pants Shane Snow for wix.com

  11. The Ying and the Yang

  12. Talent for design is a learned skill, just like software

  13. “I don’t have a need to design” “I have no

    context for design” “I have little experience designing” “I’m afraid my designs will be bad”
  14. None
  15. Why should you be a designer? “I have no need

    to design”
  16. Why should you be a designer? Be a “T Shaped”

    person Have a new way to communicate Increase your ability to work in a team Be able to execute your vision from start to finish
  17. “T-Shaped” people “We often have to pass on people who

    are very strong generalists without expertise, or vice versa. An expert who is too narrow has difficulty collaborating. A generalist who doesn’t go deep enough in a single area ends up on the margins, not really contributing as an individual.” - Valve Handbook, p46 http://assets.sbnation.com/assets/1074301/ Valve_Handbook_LowRes.pdf
  18. Did you see that ludicrous display last night? Communicating with

  19. Communicating with designers Font Type I totally know Dreamweaver I

    totally know Photoshop The client has no idea what they want The client has no idea what they want
  20. Communicating with designers Is the design accomplishing its communication goal?

    Why or why not? Replace “Like/Don’t Like” with “More Successful/ Less Successful” Unconstructive criticism (“Not a fan of that blue.”) marginalizes their efforts.
  21. Execute your vision Be a Designoper...er, Devsigner? Be a Hybrid.

    The potency of a vision can be diluted because of: Poor communication Lack of resources Conflicting ideas Can’t be a true “full stack” engineer without it
  22. Design Principles “I have no context for design”

  23. Design Principles Psychology Color Digital Images Typography

  24. Gestalt “Shape of an entity’s complete form” or “whole” Visual

    Information is understood holistically before separately. Proximity Closure Similarity Symmetry Continuity Past Experience http://en.wikipedia.org/wiki/Gestalt_psychology
  25. Brain Assumptions Unconscious Inference: Assumptions from incomplete data Faces are

    seen and recognized upright Light comes from above Objects are not normally viewed from above Closer objects can block the view of more distant objects
  26. None
  27. None
  28. None
  29. None
  30. None
  31. None
  32. None
  33. Why does that button look so strange?

  34. None
  35. Additive Color

  36. Subtractive Color

  37. 12-step Itten color wheel

  38. Complementary

  39. http://boxofficequant.com/oranges-and-blues/ http://winningappliancesblog.com.au/kitchen-design/choosing-colourful-appliances-for-your-kitchen-design/

  40. None
  41. None
  42. Analogous

  43. Split Complementary

  44. Useful Color Tool Color Scheme Designer http://colorschemedesigner.com/

  45. RGB Color

  46. Hue Saturation

  47. Lightness

  48. Color Channels 24-bit RGB Image 3 Channels, 8-bit each On

    each Channel, each pixel has value between 0-255
  49. Expressing RGB as RGB R G B 75 137 208

    (75, 137, 208) This color
  50. Expressing RGB as Hex #4b89d0 R G B 4b 89

    d0 04 11 08 09 14 00 04x16+11, 08x16+9, 13x16+00 (75, 137, 208)
  51. Expressing RGB as HSL H S L 0-360 0-100% 0-100%

    But Why?
  52. HSL in Practice

  53. http://www.garrettpennington.me

  54. Digital Images Raster vs Vector Raster is matrix pixels, doesn't

    scale well Vector is just MATH!!! Scales infinitely
  55. Raster Image Matrix of Pixels Doesn’t scale well Editing can

    be destructive Cheap in computing, Expensive in size Photoshop (ok, yeah, or GIMP)
  56. PNG (24 bit) JPG (24 bit) GIF (8 bit) Lossy

    Size Colors Best Use Special Powers No Yes Maybe (If more than 256 colors) Largest Medium...est Smallest 16.7M 16.7M 256 Transparent UI Photos Simple UI 8 bit Alpha Channel Colors on the Cheap Cat Animations
  57. Raster Image Formats Lossless Lots Colors Small Size Interface Icons

    GIF Gradients Shadows PNG JPG Photos
  58. JPG

  59. JPG

  60. http://www.flickr.com/photos/kazandrew2/2530872878/ GIF

  61. GIF

  62. http://www.flickr.com/photos/tinney/7720547124/ JPG - 466kb PNG - 1,341kb

  63. Vector Images Vector images are just MATH!!one! Scales infinitely Cheap

    size, Expensive in computing Best for print Best for dynamic images 3D Charts/Visualizations Illustrator
  64. Typography Sans-Serif Modern More readable on screens Serif Traditional Readable

    in printed text
  65. Rule of Thirds http://www.flickr.com/photos/peopleofplatt/6984010533/in/pool-1885263@N20/

  66. Applied Programming Concepts “I have little experience designing”

  67. You DO have experience! Apply your developer experience to design.

  68. Progressive Enhancement Providing an enhanced experience to more capable clients.

    client ≈ media / medium
  69. None
  70. None
  71. The Frisbee Test 1 color 2 color Full color

  72. Version Control Work towards a commit, don’t doodle Have short

    achievable goals: -m “Increase contrast in header” -m “Stub out layout” Experiment in separate branch Github image diff is sweet https://github.com/cameronmcefee/Image-Diff-View-Modes/
  73. Abstraction Frameworks Twitter Bootstrap 960 grid system Don’t make a

    design, make a design library Create solutions for interface patterns Libraries can better account for changes in requirements Roll one-offs back into the library
  74. Refactor In design, refactoring is just called editing Just like

    code, difference between good and great is a refactor Idan Gazit - Pycon US 2012 branding timline http://vimeo.com/36072477
  75. Steal “Good artists copy, great artists steal.” -Garrett Pennington Copy/paste

    from Gist or Stack Overlfow CGForums Deviant Art
  76. Steal “Good artists copy, great artists steal.” -Garrett Pennington -Pablo

    Picaso Copy/paste from Gist or Stack Overlfow CGForums Deviant Art
  77. Bringing it all together “I’m afraid my designs will be

  78. Spoiler Alert: They will be

  79. Spoiler Alert: They will be

  80. So is your code (from 6 months ago)

  81. Close the gap “All of us who do creative work,

    we get into it because we have good taste. But there is this gap. For the first couple years you make stuff, it’s just not that good. It’s trying to be good, it has potential, but it’s not.” -Ira Glass, Host of This American Life Ira Glass on Storytelling, part 3 http://www.youtube.com/watch?v=BI23U7U2aUY
  82. Putting it all together Goals What is the goal? What

    are trying to communicate? What does achieving the goal mean? What are the requirements? Are there restraints?
  83. Putting it all together Information Hierarchy List every peice of

    information you have, group them by importance by size by number by relation Header, body, title, social media What is most/least important?
  84. Putting it all together Color Color should support your goal

    Choose 1 or 2 colors Choose 1 or 2 accent color Use color scheme designer to help http://colorschemedesigner.com/ Contrast contrast checker
  85. Putting it all together Readability Choose 1 or 2 fonts

    Google Web Fonts DaFont Buy a sweet, quality font Appropriate paragraph width, line spacing
  86. Putting it all together Layout Show Hierarchy using spacing and

    weight Define a "currency" lowest denomination of distance make longer distances multiple of that denomination Use that currency with precompilers like SASS or LESS View layout as a whole
  87. Putting it all together Practice Programmers Program Designers Design Get

    out there and design!
  88. Thanks for listening! @gpennington