Graphic Design for Programmers

Given at Kansas City Developers Conference 2013

Transcript

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
5. “I wish I could write code. I’m just not a programmer.”
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 development.
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”
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 designers
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
33. Why does that button look so strange?
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/
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
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 bad”
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