Design for Non-Designers - DjangoCon AU

Transcript

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

   View Slide

3. DJA NGO CO N AU
   T RAC Y O S B OR N @limedaring
   I will be tweeting all links:
   @limedaring
   (“daring” — not “darling”)
   #talkpay
   

   View Slide

4. DJA NGO CO N AU
   T RAC Y O S B OR N @limedaring
   

   View Slide

5. DJA NGO CO N AU
   T RAC Y O S B OR N @limedaring
   

   View Slide

6. DJA NGO CO N AU
   T RAC Y O S B OR N @limedaring
   Design:
   Making an interface that 

   works well.
   

   View Slide

7. DJA NGO CO N AU
   T RAC Y O S B OR N @limedaring
   Why should everyone
   know a bit about design?
   

   View Slide

8. DJA NGO CO N AU
   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

9. DJA NGO CO N AU
   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. DJA NGO CO N AU
    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. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring
    

    View Slide

12. DJA NGO CO N AU
    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

13. DJA NGO CO N AU
    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. DJA NGO CO N AU
    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. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring
    Let’s get started
    

    View Slide

16. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring
    Let’s talk about clutter
    

    View Slide

17. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring
    Pay attention to
    clutter
    #talkpay
    

    View Slide

18. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring
    Fastest way for better
    looking designs:
    Cut down on clutter.
    

    View Slide

19. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring
    

    View Slide

20. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring
    GRID
    

    View Slide

21. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring
    Line things up — pixel differences
    are definitely unconsciously noticed.

    

    View Slide

22. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring
    Shortcut:
    Use integrated grid systems 

    and guides!
    

    View Slide

23. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring getbootstrap.com
    

    View Slide

24. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring foundation.zurb.com
    

    View Slide

25. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring getskeleton.com
    

    View Slide

26. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring mozilla.org/en-US/developer/css-grid/
    

    View Slide

27. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring
    

    View Slide

28. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring
    

    View Slide

29. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring
    COLOR
    

    View Slide

30. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring
    Color hints:
    Keep your colors complementary.
    

    View Slide

31. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring
    

    View Slide

32. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring
    

    View Slide

33. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring
    

    View Slide

34. DJA NGO CO N AU
    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

35. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring https://www.smashingmagazine.com/2016/04/web-developer-guide-color/
    

    View Slide

36. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring
    Shortcut:
    Use color palette websites!
    

    View Slide

37. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring color.adobe.com
    

    View Slide

38. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring material.io
    

    View Slide

39. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring
    colormind.io
    #talkpay
    colormind.io
    

    View Slide

40. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring
    

    View Slide

41. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring
    

    View Slide

42. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring
    TYPOGRAPHY
    

    View Slide

43. DJA NGO CO N AU
    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

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

    View Slide

45. DJA NGO CO N AU
    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

46. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring
    

    View Slide

47. DJA NGO CO N AU
    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

48. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring
    Shortcut:
    Use curated font websites!
    

    View Slide

49. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring http://hellohappy.org/beautiful-web-type/
    

    View Slide

50. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring
    http://hellohappy.org/beautiful-web-type/
    

    View Slide

51. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring fontpair.co
    

    View Slide

52. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring fontpair.co
    

    View Slide

53. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring
    

    View Slide

54. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring
    

    View Slide

55. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring
    WHITE

    SPACE
    

    View Slide

56. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring
    The ultimate clutter
    reducer
    

    View Slide

57. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring
    White space makes a website feel
    more professional and
    luxurious.
    

    View Slide

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

    View Slide

59. DJA NGO CO N AU
    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. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring
    White space makes your
    website easier to use — 

    affecting your bottom line.
    

    View Slide

64. DJA NGO CO N AU
    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

65. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring
    

    View Slide

66. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring
    

    View Slide

67. DJA NGO CO N AU
    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

68. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring
    USER
    EXPERIENCE
    

    View Slide

69. DJA NGO CO N AU
    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

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

71. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring
    

    View Slide

72. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring
    

    View Slide

73. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring
    

    View Slide

74. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring
    Pay attention to your goals.
    Make them easy to find and use.
    

    View Slide

75. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring
    This is where you 

    should pay attention to 

    data and analytics.
    

    View Slide

76. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring
    CONTENT
    

    View Slide

77. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring
    Content hints:
    • Less is more.
    

    View Slide

78. DJA NGO CO N AU
    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

79. DJA NGO CO N AU
    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

80. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring
    Content hints:
    • Less is more.
    • Big paragraphs are a sign of clutter.
    

    View Slide

81. DJA NGO CO N AU
    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

82. DJA NGO CO N AU
    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. Last but not least, the
    Introduction has been updated.
    

    View Slide

83. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring
    Headlines hints:
    • Keep them succinct.
    • Use natural, friendly language.
    • Talk benefits, not details.
    

    View Slide

84. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring
    

    View Slide

85. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring
    

    View Slide

86. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring
    

    View Slide

87. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring
    

    View Slide

88. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring
    

    View Slide

89. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring
    IMAGES &
    IMAGERY
    

    View Slide

90. DJA NGO CO N AU
    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

91. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring
    

    View Slide

92. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring unsplash.com
    

    View Slide

93. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring photopin.com
    

    View Slide

94. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring fiverr.com
    

    View Slide

95. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring
    

    View Slide

96. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring
    

    View Slide

97. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring
    

    View Slide

98. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring
    

    View Slide

99. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring
    

    View Slide

100. DJA NGO CO N AU
     T RAC Y O S B OR N @limedaring
     

     View Slide

101. DJA NGO CO N AU
     T RAC Y O S B OR N @limedaring
     ON THE
     IMPORTANCE
     OF IMITATION
     

     View Slide

102. DJA NGO CO N AU
     T RAC Y O S B OR N @limedaring
     Great designers steal 

     (and use shortcuts)
     #talkpay
     

     View Slide

103. DJA NGO CO N AU
     T RAC Y O S B OR N @limedaring
     Great designers steal 

     (and use shortcuts)
     #talkpay
     

     View Slide

104. DJA NGO CO N AU
     T RAC Y O S B OR N @limedaring
     

     View Slide

105. DJA NGO CO N AU
     T RAC Y O S B OR N @limedaring
     

     View Slide

106. DJA NGO CO N AU
     T RAC Y O S B OR N @limedaring
     

     View Slide

107. DJA NGO CO N AU
     T RAC Y O S B OR N @limedaring
     

     View Slide

108. DJA NGO CO N AU
     T RAC Y O S B OR N @limedaring
     

     View Slide

109. DJA NGO CO N AU
     T RAC Y O S B OR N @limedaring
     

     View Slide

110. DJA NGO CO N AU
     T RAC Y O S B OR N @limedaring
     

     View Slide

111. DJA NGO CO N AU
     T RAC Y O S B OR N @limedaring
     THE DESIGN

     PROCESS
     

     View Slide

112. DJA NGO CO N AU
     T RAC Y O S B OR N @limedaring
     1.

     Collect inspiration and 

     sketch ideas.
     

     View Slide

113. DJA NGO CO N AU
     T RAC Y O S B OR N @limedaring
     

     View Slide

114. DJA NGO CO N AU
     T RAC Y O S B OR N @limedaring
     

     View Slide

115. DJA NGO CO N AU
     T RAC Y O S B OR N @limedaring
     

     View Slide

116. DJA NGO CO N AU
     T RAC Y O S B OR N @limedaring
     

     View Slide

117. DJA NGO CO N AU
     T RAC Y O S B OR N @limedaring
     

     View Slide

118. DJA NGO CO N AU
     T RAC Y O S B OR N @limedaring
     

     View Slide

119. DJA NGO CO N AU
     T RAC Y O S B OR N @limedaring
     2.

     Mock it up?
     

     View Slide

120. DJA NGO CO N AU
     T RAC Y O S B OR N @limedaring
     

     View Slide

121. DJA NGO CO N AU
     T RAC Y O S B OR N @limedaring
     

     View Slide

122. DJA NGO CO N AU
     T RAC Y O S B OR N @limedaring
     3.

     Build it.
     

     View Slide

123. DJA NGO CO N AU
     T RAC Y O S B OR N @limedaring
     

     View Slide

124. DJA NGO CO N AU
     T RAC Y O S B OR N @limedaring
     My thought process, every time:
     

     View Slide

125. DJA NGO CO N AU
     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

126. DJA NGO CO N AU
     T RAC Y O S B OR N @limedaring
     This is only the
     starting point!
     

     View Slide

127. DJA NGO CO N AU
     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

128. DJA NGO CO N AU
     T RAC Y O S B OR N @limedaring
     Make sure your goal is easy to
     find and use.
     

     View Slide

129. DJA NGO CO N AU
     T RAC Y O S B OR N @limedaring
     Keep your content simple,
     friendly, and to the point.
     

     View Slide

130. DJA NGO CO N AU
     T RAC Y O S B OR N @limedaring
     Practice, practice, practice.
     

     View Slide

131. DJA NGO CO N AU
     T RAC Y O S B OR N @limedaring
     tinyurl.com/hellowebdesign
     #talkpay
     

     View Slide

132. DJA NGO CO N AU
     T RAC Y O S B OR N @limedaring
     

     View Slide

133. DJA NGO CO N AU
     T RAC Y O S B OR N @limedaring
     Thank you! Chat with me online:
     @limedaring
     

     View Slide