Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Design for Non-Designers - DjangoCon AU

Tracy Osborn
August 24, 2018

Design for Non-Designers - DjangoCon AU

Tracy Osborn

August 24, 2018
Tweet

More Decks by Tracy Osborn

Other Decks in Design

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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    works well.

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size slide

  15. DJA NGO CO N AU
    T RAC Y O S B OR N @limedaring
    Let’s get started

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    and guides!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    SPACE

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    (and use shortcuts)
    #talkpay

    View full-size slide

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

    (and use shortcuts)
    #talkpay

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    PROCESS

    View full-size slide

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

    Collect inspiration and 

    sketch ideas.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    Mock it up?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    Build it.

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide