Design for Non-Designers — Lean Product

Transcript

1. LEAN PRO DU CT
   T RAC Y O S B OR N @limedaring
   Design for Non-Designers
   Basics of designing so you can make 

   effective, lovely interfaces.
   

   View Slide

2. LEAN PRO DU CT
   T RAC Y O S B OR N @limedaring
   Hi, I’m Tracy!
   @limedaring
   (daring, not darling)
   slides (also speakerdeck
   username)
   

   View Slide

3. LEAN PRO DU CT
   T RAC Y O S B OR N @limedaring
   

   View Slide

4. LEAN PRO DU CT
   T RAC Y O S B OR N @limedaring
   

   View Slide

5. LEAN PRO DU CT
   T RAC Y O S B OR N @limedaring
   I will be tweeting all links:
   @limedaring
   (“daring” — not “darling”)
   #talkpay
   

   View Slide

6. LEAN PRO DU CT
   T RAC Y O S B OR N @limedaring
   

   View Slide

7. LEAN PRO DU CT
   T RAC Y O S B OR N @limedaring
   image credit: Dan Saffer
   

   View Slide

8. LEAN PRO DU CT
   T RAC Y O S B OR N @limedaring
   Design:
   Making an interface that 

   works well.
   

   View Slide

9. LEAN PRO DU CT
   T RAC Y O S B OR N @limedaring
   Design for Non-Designers
   Basics of designing so you can make effective,
   lovely interfaces.
   #talkpay
   

   View Slide

10. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    Design for Non-Designers
    Basics of designing so you can make effective,
    lovely interfaces.
    #talkpay
    

    View Slide

11. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    Design for Non-Designers
    Basics of designing so you can make effective,
    lovely interfaces.
    #talkpay
    

    View Slide

12. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    

    View Slide

13. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    Design for Non-Designers
    Basics of designing so you can make effective,
    lovely interfaces.
    #talkpay
    

    View Slide

14. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    Design for Non-Designers
    Basics of designing so you can make effective,
    lovely interfaces.
    #talkpay
    

    View Slide

15. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    Design for Non-Designers
    Basics of designing so you can make effective,
    lovely interfaces.
    #talkpay
    

    View Slide

16. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    

    View Slide

17. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    How can we create
    effective, simple designs?
    

    View Slide

18. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    Let’s talk about clutter
    

    View Slide

19. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    Pay attention to
    clutter
    #talkpay
    

    View Slide

20. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    Fastest way for better
    looking designs:
    Cut down on clutter.
    

    View Slide

21. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    

    View Slide

22. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    grid
    

    View Slide

23. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    Line things up — pixel differences
    are definitely unconsciously noticed.

    

    View Slide

24. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    Shortcut:
    Use integrated grid systems 

    and guides!
    

    View Slide

25. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring getbootstrap.com
    

    View Slide

26. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring foundation.zurb.com
    

    View Slide

27. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring getskeleton.com
    

    View Slide

28. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring mozilla.org/en-US/developer/css-grid/
    

    View Slide

29. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    

    View Slide

30. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    

    View Slide

31. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    color
    

    View Slide

32. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    Color principles
    Keep your colors complimentary.
    Use mostly neutrals + one brighter
    color for important bits.
    

    View Slide

33. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring https://www.smashingmagazine.com/2016/04/web-developer-guide-color/
    

    View Slide

34. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    Shortcut:
    Use color palette websites!
    

    View Slide

35. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring color.adobe.com
    

    View Slide

36. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring material.io
    

    View Slide

37. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    colormind.io
    #talkpay
    colormind.io
    

    View Slide

38. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    

    View Slide

39. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    

    View Slide

40. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    

    View Slide

41. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    

    View Slide

42. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    

    View Slide

43. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    fonts
    

    View Slide

44. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    Keep the number of fonts low — two
    different fonts is usually a good rule of
    thumb.
    Use fancy/display fonts sparingly — 

    very cluttery.
    Vary weights (bold), style (italics), and
    transforms (uppercase, etc.) to 

    differentiate bits.
    

    View Slide

45. CO DE EURO PE
    T RAC Y O S B OR N @limedaring
    

    View Slide

46. CO DE EURO PE
    T RAC Y O S B OR N @limedaring
    

    View Slide

47. CO DE EURO PE
    T RAC Y O S B OR N @limedaring
    

    View Slide

48. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    Shortcut:
    Use curated font websites!
    

    View Slide

49. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring http://hellohappy.org/beautiful-web-type/
    

    View Slide

50. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    http://hellohappy.org/beautiful-web-type/
    

    View Slide

51. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring fontpair.co
    

    View Slide

52. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring fontpair.co
    

    View Slide

53. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    

    View Slide

54. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    

    View Slide

55. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    white space
    

    View Slide

56. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    The ultimate clutter
    reducer
    

    View Slide

57. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    

    View Slide

58. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    

    View Slide

59. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    

    View Slide

60. CO DE EURO PE
    T RAC Y O S B OR N @limedaring
    

    View Slide

61. CO DE EURO PE
    T RAC Y O S B OR N @limedaring
    

    View Slide

62. CO DE EURO PE
    T RAC Y O S B OR N @limedaring
    

    View Slide

63. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    White space makes a website feel
    more professional and
    luxurious.
    

    View Slide

64. CO DE EURO PE
    T RAC Y O S B OR N @limedaring
    

    View Slide

65. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    

    View Slide

66. CO DE EURO PE
    T RAC Y O S B OR N @limedaring
    

    View Slide

67. CO DE EURO PE
    T RAC Y O S B OR N @limedaring
    

    View Slide

68. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    White space makes your
    website easier to use — 

    affecting your bottom line.
    

    View Slide

69. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    “By replacing the extra links around the Add to Cart buttons with whitespace, Xerox
    saw a 20% improvement in engagement, 5% boost in products added to cart, and
    a 33% improvement in customers continuing through purchase.”
    https://studio.uxpin.com/blog/ux-case-study-designing-whitespace-to-improve-conversions/
    

    View Slide

70. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    

    View Slide

71. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    

    View Slide

72. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    Reduce visual clutter, by keeping the
    number of fonts and colors low, add
    white space, and line things up.
    Aim for a “clean” design.
    

    View Slide

73. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    User experience
    principles
    

    View Slide

74. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    What’s the most important 

    action on your design?
    Make it easy to find and use.
    

    View Slide

75. CO DE EURO PE
    T RAC Y O S B OR N @limedaring
    

    View Slide

76. CO DE EURO PE
    T RAC Y O S B OR N @limedaring
    vs
    sign up
    email address
    I believe folks who know a bit
    about design will be more
    likely to hire a professional
    designer when the time is
    right. I’m a designer, and
    even I hire designers for
    things bigger than me. And if
    you agree, you should join
    my newsletter.
    I believe folks who know a bit
    about design will be more
    likely to hire a professional
    designer when the time is
    right. I’m a designer, and
    even I hire designers for
    things bigger than me.
    If you agree, you should
    join my newsletter.
    

    View Slide

77. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    

    View Slide

78. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    

    View Slide

79. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    

    View Slide

80. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    

    View Slide

81. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    Pay attention to your goals.
    Make them easy to find and use.
    

    View Slide

82. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    Content principles
    Less is more.
    Big paragraphs are a sign of clutter.
    Break into bullets if you can.
    

    View Slide

83. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    Please note that although
    Chrome is supported for both
    Mac and Windows operating
    systems, it is recommended
    that all users of this site switch
    to the most up-to-date version
    of the Firefox web browser for
    the best possible results.
    

    View Slide

84. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    For best results, use the
    latest version of Firefox.
    Chrome for Mac and
    Windows is also
    supported.
    Please note that although
    Chrome is supported for both
    Mac and Windows operating
    systems, it is recommended
    that all users of this site switch
    to the most up-to-date version
    of the Firefox web browser for
    the best possible results.
    

    View Slide

85. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    We made a bunch of changes: The
    registration chapter has been split
    in two, between adding
    registration and then associating
    users with objects. The chapter
    was giant before so this makes it
    more manageable. Screenshots of
    the admin have been updated to
    reflect the new Django 1.9 styles.
    The few minor typos have been
    fixed. Updated the version of
    django-registration-redux that we
    use to 1.3. Last but not least, the
    Introduction has been updated.
    We made a bunch of changes:
    • The registration chapter has
    been split in two, between
    adding registration and then
    associating users with objects.
    The chapter was giant before so
    this makes it more manageable.
    • Screenshots of the admin have
    been updated to reflect the new
    Django 1.9 styles.
    • The few minor typos have been
    fixed.
    • Updated the version of django-
    registration-redux that we use
    to 1.3.
    • Introduction has been updated.
    

    View Slide

86. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    We made a bunch of changes:
    • The registration chapter has
    been split in two, between
    adding registration and then
    associating users with objects.
    The chapter was giant before
    so this makes it more
    manageable.
    • Screenshots of the admin have
    been updated to reflect the
    new Django 1.9 styles.
    • The few minor typos have
    been fixed.
    • Updated the version of django-
    registration-redux that we use
    to 1.3.
    • Introduction has been updated.
    We made a bunch of changes:
    • The registration chapter has
    been split in two, between
    adding registration and then
    associating users with objects.
    The chapter was giant before so
    this makes it more manageable.
    • Screenshots of the admin have
    been updated to reflect the
    new Django 1.9 styles.
    • The few minor typos have been
    fixed.
    • Updated the version of django-
    registration-redux that we use
    to 1.3.
    • Introduction has been updated.
    

    View Slide

87. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    We made a bunch of changes:
    • The registration chapter has been split in
    two, between adding registration and then
    associating users with objects. The chapter
    was giant before so this makes it more
    manageable.
    • Screenshots of the admin have been
    updated to reflect the new Django 1.9 styles.
    • The few minor typos have been fixed.
    • Updated the version of django-registration-
    redux that we use to 1.3.
    • Introduction has been updated.
    We made a bunch of changes:
    • The registration chapter has
    been split in two, between adding
    registration and then associating
    users with objects. The chapter
    was giant before so this makes it
    more manageable.
    • Screenshots of the admin have
    been updated to reflect the new
    Django 1.9 styles.
    • The few minor typos have been
    fixed.
    • Updated the version of django-
    registration-redux that we use to
    1.3.
    • Introduction has been updated.
    

    View Slide

88. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    Headlines:
    Talk benefits, not details.
    Keep it short.
    Use natural, friendly language.
    

    View Slide

89. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    

    View Slide

90. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    

    View Slide

91. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    

    View Slide

92. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    

    View Slide

93. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    

    View Slide

94. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    

    View Slide

95. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    

    View Slide

96. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    Images and imagery
    

    View Slide

97. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    Images:
    - Stock photos usually look like stock photos.
    - You can accomplish a lot with just type and
    screenshots.
    - Remember to pay attention to file size.
    - Don’t forget retina-quality images.
    

    View Slide

98. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    

    View Slide

99. LEAN PRO DU CT
    T RAC Y O S B OR N @limedaring
    unsplash.com
    unsplash.com
    

    View Slide

100. LEAN PRO DU CT
     T RAC Y O S B OR N @limedaring
     photopin.com
     photopin.com
     

     View Slide

101. LEAN PRO DU CT
     T RAC Y O S B OR N @limedaring fiverr.com
     

     View Slide

102. LEAN PRO DU CT
     T RAC Y O S B OR N @limedaring
     

     View Slide

103. LEAN PRO DU CT
     T RAC Y O S B OR N @limedaring
     

     View Slide

104. LEAN PRO DU CT
     T RAC Y O S B OR N @limedaring
     Don’t be afraid of
     imitation.
     

     View Slide

105. LEAN PRO DU CT
     T RAC Y O S B OR N @limedaring
     Great designers steal 

     (and use shortcuts)
     #talkpay
     

     View Slide

106. LEAN PRO DU CT
     T RAC Y O S B OR N @limedaring
     Great designers steal 

     (and use shortcuts)
     #talkpay
     

     View Slide

107. LEAN PRO DU CT
     T RAC Y O S B OR N @limedaring
     

     View Slide

108. LEAN PRO DU CT
     T RAC Y O S B OR N @limedaring
     

     View Slide

109. LEAN PRO DU CT
     T RAC Y O S B OR N @limedaring
     

     View Slide

110. LEAN PRO DU CT
     T RAC Y O S B OR N @limedaring
     

     View Slide

111. LEAN PRO DU CT
     T RAC Y O S B OR N @limedaring
     

     View Slide

112. LEAN PRO DU CT
     T RAC Y O S B OR N @limedaring
     

     View Slide

113. LEAN PRO DU CT
     T RAC Y O S B OR N @limedaring
     

     View Slide

114. LEAN PRO DU CT
     T RAC Y O S B OR N @limedaring
     Quick overview of a design
     process
     

     View Slide

115. LEAN PRO DU CT
     T RAC Y O S B OR N @limedaring
     1.

     Collect inspiration and 

     sketch ideas.
     

     View Slide

116. LEAN PRO DU CT
     T RAC Y O S B OR N @limedaring
     

     View Slide

117. LEAN PRO DU CT
     T RAC Y O S B OR N @limedaring
     

     View Slide

118. LEAN PRO DU CT
     T RAC Y O S B OR N @limedaring
     

     View Slide

119. LEAN PRO DU CT
     T RAC Y O S B OR N @limedaring
     

     View Slide

120. LEAN PRO DU CT
     T RAC Y O S B OR N @limedaring
     

     View Slide

121. LEAN PRO DU CT
     T RAC Y O S B OR N @limedaring
     

     View Slide

122. LEAN PRO DU CT
     T RAC Y O S B OR N @limedaring
     2.

     Mock it up?
     

     View Slide

123. LEAN PRO DU CT
     T RAC Y O S B OR N @limedaring
     

     View Slide

124. LEAN PRO DU CT
     T RAC Y O S B OR N @limedaring
     

     View Slide

125. LEAN PRO DU CT
     T RAC Y O S B OR N @limedaring
     3.

     Build it.
     

     View Slide

126. LEAN PRO DU CT
     T RAC Y O S B OR N @limedaring
     

     View Slide

127. LEAN PRO DU CT
     T RAC Y O S B OR N @limedaring
     My thought process, every time:
     

     View Slide

128. LEAN PRO DU CT
     T RAC Y O S B OR N @limedaring
     My thought process, every time:
     “crap crap crap crap crap crap crap
     crap crap crap crap crap crap crap
     crap crap crap crap crap crap crap
     crap crap crap crap crap crap 

     … yes!”
     

     View Slide

129. LEAN PRO DU CT
     T RAC Y O S B OR N @limedaring
     This is only the
     starting point!
     

     View Slide

130. LEAN PRO DU CT
     T RAC Y O S B OR N @limedaring
     Reduce visual clutter:
     Keep the number of fonts and colors low.
     Add white space.
     Line things up.
     Keep content short and easy to skim.
     

     View Slide

131. LEAN PRO DU CT
     T RAC Y O S B OR N @limedaring
     Make sure your goal is easy to
     find and use.
     

     View Slide

132. LEAN PRO DU CT
     T RAC Y O S B OR N @limedaring
     Keep your content simple,
     friendly, and to the point.
     

     View Slide

133. LEAN PRO DU CT
     T RAC Y O S B OR N @limedaring
     Practice, practice, practice.
     

     View Slide

134. LEAN PRO DU CT
     T RAC Y O S B OR N @limedaring
     Thank you! Chat with me online:
     @limedaring
     

     View Slide