Design for Non-Designers — Beyond Tellerand Dusseldorf 2018

Transcript

1. BEYON D TELLERA ND
   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. BEYON D TELLERA ND
   T RAC Y O S B OR N @limedaring
   Hi, I’m Tracy!
   @limedaring
   (daring, not darling)
   slides (also speakerdeck
   username)
   

   View Slide

3. BEYON D TELLERA ND
   T RAC Y O S B OR N @limedaring
   I will be tweeting all links:
   @limedaring
   (“daring” — not “darling”)
   #talkpay
   

   View Slide

4. BEYON D TELLERA ND
   T RAC Y O S B OR N @limedaring
   

   View Slide

5. BEYON D TELLERA ND
   T RAC Y O S B OR N @limedaring
   

   View Slide

6. BEYON D TELLERA ND
   T RAC Y O S B OR N @limedaring image credit: Dan Saffer
   

   View Slide

7. BEYON D TELLERA ND
   T RAC Y O S B OR N @limedaring
   Design:
   Making an interface that 

   works well.
   

   View Slide

8. BEYON D TELLERA ND
   T RAC Y O S B OR N @limedaring
   We will cover:
   

   View Slide

9. BEYON D TELLERA ND
   T RAC Y O S B OR N @limedaring
   We will cover:
   •The one visual design principle to remember — and how
   it applies to major design concepts.
   

   View Slide

10. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring
    We will cover:
    •The one visual design principle to remember — and how
    it applies to major design concepts.
    •An overview of the design process, to help beginners go
    from an idea to execution as fast as possible.
    

    View Slide

11. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring
    Not a beginner?
    This presentation will
    help you teach design.
    

    View Slide

12. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring
    Why should everyone
    know a bit about design?
    

    View Slide

13. BEYON D TELLERA ND
    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. BEYON D TELLERA ND
    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. BEYON D TELLERA ND
    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. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring
    

    View Slide

17. BEYON D TELLERA ND
    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

18. BEYON D TELLERA ND
    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

19. BEYON D TELLERA ND
    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

20. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring
    Let’s get started
    

    View Slide

21. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring
    Let’s talk about clutter
    

    View Slide

22. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring
    Pay attention to
    clutter
    #talkpay
    

    View Slide

23. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring
    Fastest way for better
    looking designs:
    Cut down on clutter.
    

    View Slide

24. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring
    

    View Slide

25. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring
    GRID
    

    View Slide

26. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring
    Line things up — pixel differences
    are definitely unconsciously noticed.

    

    View Slide

27. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring
    Shortcut:
    Use integrated grid systems 

    and guides!
    

    View Slide

28. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring getbootstrap.com
    

    View Slide

29. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring foundation.zurb.com
    

    View Slide

30. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring getskeleton.com
    

    View Slide

31. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring mozilla.org/en-US/developer/css-grid/
    

    View Slide

32. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring
    

    View Slide

33. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring
    

    View Slide

34. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring
    COLOR
    

    View Slide

35. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring
    Color hints:
    Keep your colors complementary.
    

    View Slide

36. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring
    Color hints:
    Keep your colors complementary.
    

    View Slide

37. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring
    

    View Slide

38. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring
    

    View Slide

39. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring
    

    View Slide

40. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring
    Color hints:
    Keep your colors complementary.
    Use mostly neutrals + one brighter
    color for important bits.
    

    View Slide

41. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring https://www.smashingmagazine.com/2016/04/web-developer-guide-color/
    

    View Slide

42. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring
    Shortcut:
    Use color palette websites!
    

    View Slide

43. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring color.adobe.com
    

    View Slide

44. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring material.io
    

    View Slide

45. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring
    colormind.io
    #talkpay
    colormind.io
    

    View Slide

46. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring
    

    View Slide

47. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring
    

    View Slide

48. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring
    TYPOGRAPHY
    

    View Slide

49. BEYON D TELLERA ND
    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.
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

53. BEYON D TELLERA ND
    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 — 

    can be very cluttery.
    

    View Slide

54. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring
    

    View Slide

55. BEYON D TELLERA ND
    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 — 

    can be very cluttery.
    Vary weights (bold), style (italics),

    and transforms (uppercase, etc.) 

    to differentiate bits.
    

    View Slide

56. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring
    Shortcut:
    Use curated font websites!
    

    View Slide

57. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring http://hellohappy.org/beautiful-web-type/
    

    View Slide

58. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring
    http://hellohappy.org/beautiful-web-type/
    

    View Slide

59. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring fontpair.co
    

    View Slide

60. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring fontpair.co
    

    View Slide

61. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring
    

    View Slide

62. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring
    

    View Slide

63. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring
    WHITE

    SPACE
    

    View Slide

64. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring
    The ultimate clutter
    reducer
    

    View Slide

65. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring
    

    View Slide

66. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring
    

    View Slide

67. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

71. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring
    White space makes a website feel
    more professional and
    luxurious.
    

    View Slide

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

    View Slide

73. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring
    

    View Slide

74. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring
    White space makes your
    website easier to use — 

    affecting your bottom line.
    

    View Slide

75. BEYON D TELLERA ND
    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

76. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring
    

    View Slide

77. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring
    

    View Slide

78. BEYON D TELLERA ND
    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

79. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring
    USER
    EXPERIENCE
    

    View Slide

80. BEYON D TELLERA ND
    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

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

    View Slide

82. 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

83. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring
    

    View Slide

84. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring
    

    View Slide

85. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring
    

    View Slide

86. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring
    Pay attention to your goals.
    Make them easy to find and use.
    

    View Slide

87. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring
    This is where you 

    should pay attention to 

    data and analytics.
    

    View Slide

88. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring
    CONTENT
    

    View Slide

89. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring
    Content hints:
    • Less is more.
    

    View Slide

90. BEYON D TELLERA ND
    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

91. BEYON D TELLERA ND
    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

92. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring
    Content hints:
    • Less is more.
    • Big paragraphs are a sign of clutter.
    

    View Slide

93. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring
    Content hints:
    • Less is more.
    • Big paragraphs are a sign of clutter.
    • Break into bullets if you can.
    

    View Slide

94. BEYON D TELLERA ND
    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

95. BEYON D TELLERA ND
    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

96. BEYON D TELLERA ND
    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

97. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring
    Headlines hints:
    • Keep them succinct.
    • Use natural, friendly language.
    • Talk benefits, not details.
    

    View Slide

98. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring
    

    View Slide

99. BEYON D TELLERA ND
    T RAC Y O S B OR N @limedaring
    

    View Slide

100. BEYON D TELLERA ND
     T RAC Y O S B OR N @limedaring
     

     View Slide

101. BEYON D TELLERA ND
     T RAC Y O S B OR N @limedaring
     

     View Slide

102. BEYON D TELLERA ND
     T RAC Y O S B OR N @limedaring
     

     View Slide

103. BEYON D TELLERA ND
     T RAC Y O S B OR N @limedaring
     IMAGES &
     IMAGERY
     

     View Slide

104. BEYON D TELLERA ND
     T RAC Y O S B OR N @limedaring
     Images:
     • Stock photos usually look like stock photos. Be
     careful what you pick.
     • 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

105. BEYON D TELLERA ND
     T RAC Y O S B OR N @limedaring
     

     View Slide

106. BEYON D TELLERA ND
     T RAC Y O S B OR N @limedaring
     unsplash.com
     unsplash.com
     

     View Slide

107. BEYON D TELLERA ND
     T RAC Y O S B OR N @limedaring
     photopin.com
     photopin.com
     

     View Slide

108. BEYON D TELLERA ND
     T RAC Y O S B OR N @limedaring fiverr.com
     

     View Slide

109. BEYON D TELLERA ND
     T RAC Y O S B OR N @limedaring
     

     View Slide

110. BEYON D TELLERA ND
     T RAC Y O S B OR N @limedaring
     

     View Slide

111. BEYON D TELLERA ND
     T RAC Y O S B OR N @limedaring
     

     View Slide

112. BEYON D TELLERA ND
     T RAC Y O S B OR N @limedaring
     

     View Slide

113. BEYON D TELLERA ND
     T RAC Y O S B OR N @limedaring
     

     View Slide

114. BEYON D TELLERA ND
     T RAC Y O S B OR N @limedaring
     

     View Slide

115. BEYON D TELLERA ND
     T RAC Y O S B OR N @limedaring
     ON THE
     IMPORTANCE
     OF IMITATION
     

     View Slide

116. BEYON D TELLERA ND
     T RAC Y O S B OR N @limedaring
     Great designers steal 

     (and use shortcuts)
     #talkpay
     

     View Slide

117. BEYON D TELLERA ND
     T RAC Y O S B OR N @limedaring
     Great designers steal 

     (and use shortcuts)
     #talkpay
     

     View Slide

118. BEYON D TELLERA ND
     T RAC Y O S B OR N @limedaring
     

     View Slide

119. BEYON D TELLERA ND
     T RAC Y O S B OR N @limedaring
     

     View Slide

120. BEYON D TELLERA ND
     T RAC Y O S B OR N @limedaring
     

     View Slide

121. BEYON D TELLERA ND
     T RAC Y O S B OR N @limedaring
     

     View Slide

122. BEYON D TELLERA ND
     T RAC Y O S B OR N @limedaring
     

     View Slide

123. BEYON D TELLERA ND
     T RAC Y O S B OR N @limedaring
     

     View Slide

124. BEYON D TELLERA ND
     T RAC Y O S B OR N @limedaring
     

     View Slide

125. BEYON D TELLERA ND
     T RAC Y O S B OR N @limedaring
     THE DESIGN

     PROCESS
     

     View Slide

126. BEYON D TELLERA ND
     T RAC Y O S B OR N @limedaring
     1.

     Collect inspiration and 

     sketch ideas.
     

     View Slide

127. BEYON D TELLERA ND
     T RAC Y O S B OR N @limedaring
     

     View Slide

128. BEYON D TELLERA ND
     T RAC Y O S B OR N @limedaring
     

     View Slide

129. BEYON D TELLERA ND
     T RAC Y O S B OR N @limedaring
     

     View Slide

130. BEYON D TELLERA ND
     T RAC Y O S B OR N @limedaring
     

     View Slide

131. BEYON D TELLERA ND
     T RAC Y O S B OR N @limedaring
     

     View Slide

132. BEYON D TELLERA ND
     T RAC Y O S B OR N @limedaring
     

     View Slide

133. BEYON D TELLERA ND
     T RAC Y O S B OR N @limedaring
     2.

     Mock it up?
     

     View Slide

134. BEYON D TELLERA ND
     T RAC Y O S B OR N @limedaring
     

     View Slide

135. BEYON D TELLERA ND
     T RAC Y O S B OR N @limedaring
     

     View Slide

136. BEYON D TELLERA ND
     T RAC Y O S B OR N @limedaring
     3.

     Build it.
     

     View Slide

137. BEYON D TELLERA ND
     T RAC Y O S B OR N @limedaring
     

     View Slide

138. BEYON D TELLERA ND
     T RAC Y O S B OR N @limedaring
     My thought process, every time:
     

     View Slide

139. BEYON D TELLERA ND
     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

140. BEYON D TELLERA ND
     T RAC Y O S B OR N @limedaring
     This is only the
     starting point!
     

     View Slide

141. BEYON D TELLERA ND
     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

142. BEYON D TELLERA ND
     T RAC Y O S B OR N @limedaring
     Make sure your goal is easy to
     find and use.
     

     View Slide

143. BEYON D TELLERA ND
     T RAC Y O S B OR N @limedaring
     Keep your content simple,
     friendly, and to the point.
     

     View Slide

144. BEYON D TELLERA ND
     T RAC Y O S B OR N @limedaring
     Practice, practice, practice.
     

     View Slide

145. BEYON D TELLERA ND
     T RAC Y O S B OR N @limedaring
     tinyurl.com/hellowebdesign
     #talkpay
     

     View Slide

146. BEYON D TELLERA ND
     T RAC Y O S B OR N @limedaring
     

     View Slide

147. BEYON D TELLERA ND
     T RAC Y O S B OR N @limedaring
     Thank you! Chat with me online:
     @limedaring
     

     View Slide