Design Hacks for the Pragmatic Minded

A lot of developers think they either can't or don't need to design. But that's just a myth — everyone can benefit from a few simple design concepts. Learn some simple design hacks you can apply to your documentation, presentations and products to make them just a little bit prettier.

Transcript

1. DESIGN HACKS PRAGMATIC MINDED for the a hoppy talk from Kyle Neath with a sweet finish
2. Kyle Neath is...
3. ~designer @
4. @kneath
5. warpspire.com
6. My favorite beer What’s Important
7. Dogfish Head 90 minute IPA
8. But Firestone’s DBA is so delicious…
9. I can always go for a Black Butte Porter
10. And Sierra Nevada has never let me down
11. Luckily, I don’t have to choose
12. Oh yeah, and I like to fall in the snow
13. What am I doing at a Ruby Conference? If I’m a designer…
14. Developers design lots of things
15. Documentation Admin Sections Miniapps & Side Projects
16. But more importantly..
17. Designers vs. Developers is a false separation it’s a lot more like a spectrum
18. Design is just as important as Tech it’s all about the end product
19. You should want to be a better designer
20. My design background A little bit about
21. I just wanted to build websites
22. Steal Everything
23. Turns out good design is just a collection of hacks
24. Design theory Anything I learned in school Organized or coherent This talk is not…
25. A collection of hacks Tips to polish your designs A couple design strategies This talk is…
26. Type A little bit about
27. Good typography is 90% what you aren’t doing you don’t have to be fancy
28. Helvetica, Arial, sans-serif Times New Roman, Georgia, serif Monaco, Courier New, monospace Classic fonts go a long ways
29. Playing with font weights and styles is easy & less risky
30. Playing with font weights and styles is easy & less risky font-weight:300 font-weight:bold font-weight:normal
31. We're GitHub! If you're ordering a tshirt, you probably know that this isn't the main gig. Please enjoy one of our cheeky grey shirts and be sure to check back periodically for new designs. Exercise patience while waiting for your crisp new attire - we are busy every day doing things… Increase line height to improve readability
32. We're GitHub! If you're ordering a tshirt, you probably know that this isn't the main gig. Please enjoy one of our cheeky grey shirts and be sure to check back periodically for new designs. Exercise patience while waiting for your crisp new… Increase line height to improve readability
33. A baseline grid can be a great tool but don’t be too obsessive about it
34. A baseline grid can be a great tool but don’t be too obsessive about it font-size:100px font-size:50px Vertical Grid = 50px
35. Color A little bit about
36. Color can be a great way to highlight content
37. Hey guys! We just restocked the GitHub mugs today. Head on over to the GitHub Shop to pick one up today! It can also serve to set expectations
38. But using color for the sake of color can be distracting & harmful
39. Start with greyscale Add color later
40. A lot of people use grey on colored backgrounds
41. Add some of the background hue instead
42. Wondering why your gradients look so... drab?
43. Blend Mode Superpower Overlay Gradient
44. Blend Mode Superpower Color Burn Gradient
45. Adding black or white desaturates colors Lesson Learned
46. Stock Icons & Images Cheating with
47. Salads are hilarious and spice up boring pages
48. But seriously
49. Icon sets are crazy helpful Insanely cheap
50. 648 Icons PNG & Vector & Fonts $240 Pictos
51. Your time is better spent elsewhere
52. Spacing & Alignment It’s all about
53. Your text is crying for padding We're GitHub! If you're ordering a tshirt, you probably know that this isn't the main gig. Please enjoy one of our cheeky grey shirts and be sure to check back periodically for new designs.
54. We're GitHub! If you're ordering a tshirt, you probably know that this isn't the main gig. Please enjoy one of our cheeky grey shirts and be sure to check back periodically for new designs.
55. We're GitHub! If you're ordering a tshirt, you probably know that this isn't the main gig. Please enjoy one of our cheeky grey shirts and be sure to check back periodically for new designs. When in doubt... padding = margin = font size
56. Grids are awesome http://960.gs will make your design 10x better
57. ALIGN ALL PLEASE JUST THE THINGS
58. Alignment is not hard It is not a special skill It just takes effort
59. ALIGN ALL THE THINGS
60. Visual Hierarchy Bring it together with
61. Visual hierarchy is all about boxes within boxes
62. Related elements should be grouped together Scottocat Chacon Dashboard Your Profile Log Out 800 whiskey points
63. Scottocat Chacon Dashboard Your Profile Log Out 800 whiskey points Scottocat’s links (and no one else’s) The avatar (Scottocat) owns this box: everything descends from it
64. Scottocat Chacon 800 whiskey points This doesn’t belong! It’s not owned by Scottocat Search the whole site... Always be thinking about what owns the box
65. UI design is just a series of boxes within boxes
67. Owned by the logo (site) Global Actions
68. Owned by the activity stream
69. Owned by pie0
70. These are post-specific actions …because the post owns this box
71. Write out an outline of your UI elements
72. Header ‣ Logo ‣ Global navigation ‣ User box Dashboard ‣ Activity stream ➡ My friends’ actions ➡ My actions ‣ Repository list ➡ Owned repositories ➡ Watched repositories
73. Try the squish test
74. 1000px → 400px
75. 1000px → 400px
76. Presentations Improve your
77. For the love of all that is good in this world… FONT SIZE INCREASE YOUR
78. def code_blocks warning = "Long strings should be trunca…" display(warning) end 80 characters is way too many
79. def code_blocks warning = "Long strings should be trunca…" warning = check_warning(warning) warning = spellcheck_warning(warning) warning = fix_problems(warning) warning = create_problems(warning) warning = add_dimension(warning) warning = move_forward(warning) warning = move_backward(warning) display(warning) end Got a big hunk of code?
80. def code_blocks ... warning = fix_problems(warning) ... end Step through it one line at a time
81. def code_blocks ... warning = create_problems(warning) ... end Step through it one line at a time
82. 40 characters wide 4 lines of code Font size as big as will fit Brevity over correctness
83. Contrast is awesome
84. Contrast is awesome
85. Does it look sleek? Increase the contrast
86. Add 75% white overlay Add 75% black overlay
87. Add 75% white overlay Add 75% black overlay
88. Be a better designer How to
89. Steal Everything
90. Side Projects
91. Practice
92. FIN