Design Hacks for the Pragmatic Minded

5f2da528927a2ec9ba4fec2069cbc958?s=47 Kyle Neath
March 24, 2011

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.

5f2da528927a2ec9ba4fec2069cbc958?s=128

Kyle Neath

March 24, 2011
Tweet

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

  66. None
  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