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
   

   View Slide

2. Kyle Neath is...
   

   View Slide

3. ~designer
   @
   

   View Slide

4. @kneath
   

   View Slide

5. warpspire.com
   

   View Slide

6. My favorite beer
   What’s Important
   

   View Slide

7. Dogfish Head
   90 minute IPA
   

   View Slide

8. But Firestone’s DBA
   is so delicious…
   

   View Slide

9. I can always go for a
   Black Butte Porter
   

   View Slide

10. And Sierra Nevada has
    never let me down
    

    View Slide

11. Luckily, I don’t have to choose
    

    View Slide

12. Oh yeah, and I like to
    fall in the snow
    

    View Slide

13. What am I doing at
    a Ruby Conference?
    If I’m a designer…
    

    View Slide

14. Developers design
    lots of things
    

    View Slide

15. Documentation
    Admin Sections
    Miniapps & Side Projects
    

    View Slide

16. But more importantly..
    

    View Slide

17. Designers vs. Developers
    is a false separation
    it’s a lot more like a spectrum
    

    View Slide

18. Design is just as
    important as Tech
    it’s all about the end product
    

    View Slide

19. You should want to be
    a better designer
    

    View Slide

20. My design background
    A little bit about
    

    View Slide

21. I just wanted to build
    websites
    

    View Slide

22. Steal Everything
    

    View Slide

23. Turns out good design is
    just a collection of hacks
    

    View Slide

24. Design theory
    Anything I learned in school
    Organized or coherent
    This talk is not…
    

    View Slide

25. A collection of hacks
    Tips to polish your designs
    A couple design strategies
    This talk is…
    

    View Slide

26. Type
    A little bit about
    

    View Slide

27. Good typography is 90%
    what you aren’t doing
    you don’t have to be fancy
    

    View Slide

28. Helvetica, Arial, sans-serif
    Times New Roman, Georgia, serif
    Monaco, Courier New, monospace
    Classic fonts go a long ways
    

    View Slide

29. Playing with font weights
    and styles is easy & less risky
    

    View Slide

30. Playing with font weights
    and styles is easy & less risky
    font-weight:300
    font-weight:bold
    font-weight:normal
    

    View Slide

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
    

    View Slide

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
    

    View Slide

33. A baseline grid can be
    a great tool
    but don’t be too obsessive about it
    

    View Slide

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
    

    View Slide

35. Color
    A little bit about
    

    View Slide

36. Color can be a great way
    to highlight content
    

    View Slide

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
    

    View Slide

38. But using color for the
    sake of color can be
    distracting & harmful
    

    View Slide

39. Start with greyscale
    Add color later
    

    View Slide

40. A lot of people use grey
    on colored backgrounds
    

    View Slide

41. Add some of the
    background hue instead
    

    View Slide

42. Wondering why your
    gradients look so... drab?
    

    View Slide

43. Blend Mode Superpower
    Overlay Gradient
    

    View Slide

44. Blend Mode Superpower
    Color Burn Gradient
    

    View Slide

45. Adding black or white
    desaturates colors
    Lesson Learned
    

    View Slide

46. Stock Icons & Images
    Cheating with
    

    View Slide

47. Salads are hilarious and
    spice up boring pages
    

    View Slide

48. But seriously
    

    View Slide

49. Icon sets are crazy helpful
    Insanely cheap
    

    View Slide

50. 648 Icons
    PNG & Vector & Fonts
    $240
    Pictos
    

    View Slide

51. Your time is better
    spent elsewhere
    

    View Slide

52. Spacing & Alignment
    It’s all about
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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
    

    View Slide

56. Grids are awesome
    http://960.gs will make your design 10x better
    

    View Slide

57. ALIGN ALL
    PLEASE JUST
    THE THINGS
    

    View Slide

58. Alignment is not hard
    It is not a special skill
    It just takes effort
    

    View Slide

59. ALIGN ALL
    THE THINGS
    

    View Slide

60. Visual Hierarchy
    Bring it together with
    

    View Slide

61. Visual hierarchy is all
    about boxes within boxes
    

    View Slide

62. Related elements should
    be grouped together
    Scottocat Chacon
    Dashboard Your Profile Log Out
    800 whiskey points
    

    View Slide

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
    

    View Slide

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
    

    View Slide

65. UI design is just a series
    of boxes within boxes
    

    View Slide

66. View Slide

67. Owned by the
    logo (site)
    Global Actions
    

    View Slide

68. Owned by the activity stream
    

    View Slide

69. Owned by pie0
    

    View Slide

70. These are post-specific
    actions
    …because the post owns
    this box
    

    View Slide

71. Write out an outline of
    your UI elements
    

    View Slide

72. Header
    ‣ Logo
    ‣ Global navigation
    ‣ User box
    Dashboard
    ‣ Activity stream
    ➡ My friends’ actions
    ➡ My actions
    ‣ Repository list
    ➡ Owned repositories
    ➡ Watched repositories
    

    View Slide

73. Try the squish test
    

    View Slide

74. 1000px → 400px
    

    View Slide

75. 1000px → 400px
    

    View Slide

76. Presentations
    Improve your
    

    View Slide

77. For the love of all that is good in this world…
    FONT SIZE
    INCREASE YOUR
    

    View Slide

78. def code_blocks
    warning = "Long strings should be trunca…"
    display(warning)
    end
    80 characters is
    way too many
    

    View Slide

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?
    

    View Slide

80. def code_blocks
    ...
    warning = fix_problems(warning)
    ...
    end
    Step through it one line
    at a time
    

    View Slide

81. def code_blocks
    ...
    warning = create_problems(warning)
    ...
    end
    Step through it one line
    at a time
    

    View Slide

82. 40 characters wide
    4 lines of code
    Font size as big as will fit
    Brevity over correctness
    

    View Slide

83. Contrast is awesome
    

    View Slide

84. Contrast is awesome
    

    View Slide

85. Does it look sleek?
    Increase the contrast
    

    View Slide

86. Add 75% white overlay
    Add 75% black overlay
    

    View Slide

87. Add 75% white overlay
    Add 75% black overlay
    

    View Slide

88. Be a better designer
    How to
    

    View Slide

89. Steal Everything
    

    View Slide

90. Side Projects
    

    View Slide

91. Practice
    

    View Slide

92. FIN
    

    View Slide