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

Design Eye for the Developer

Design Eye for the Developer

Tracy Osborn

May 27, 2021
Tweet

More Decks by Tracy Osborn

Other Decks in Design

Transcript

  1. C FE.DEV
    T RAC Y OS B O R N @tracymakes
    Design Eye for the Developer
    TRAINING YOUR DESIGN INTUITION

    View full-size slide

  2. C FE.DEV
    T RAC Y OS B O R N @tracymakes
    Design is everywhere. Every career
    path has opportunities to use design to
    their advantage.

    View full-size slide

  3. BEYON D TELLERA ND
    T RAC Y OS B O R N @limedaring
    Design for Non-Designers


    Basics of designing so you can make e
    ff
    ective,
    lovely interfaces.
    #talkpay

    View full-size slide

  4. BEYON D TELLERA ND
    T RAC Y OS B O R N @limedaring
    Design for Non-Designers


    Basics of designing so you can make e
    ff
    ective,
    lovely interfaces.
    #talkpay

    View full-size slide

  5. BEYON D TELLERA ND
    T RAC Y OS B O R N @limedaring
    Design for Non-Designers


    Basics of designing so you can make e
    ff
    ective,
    lovely interfaces.
    #talkpay

    View full-size slide

  6. BEYON D TELLERA ND
    T RAC Y OS B O R N @limedaring

    View full-size slide

  7. BEYON D TELLERA ND
    T RAC Y OS B O R N @limedaring
    Design for Non-Designers


    Basics of designing so you can make e
    ff
    ective,
    lovely interfaces.
    #talkpay

    View full-size slide

  8. BEYON D TELLERA ND
    T RAC Y OS B O R N @limedaring
    Design for Non-Designers


    Basics of designing so you can make e
    ff
    ective,
    lovely interfaces.
    #talkpay

    View full-size slide

  9. BEYON D TELLERA ND
    T RAC Y OS B O R N @limedaring
    Design for Non-Designers


    Basics of designing so you can make e
    ff
    ective,
    lovely interfaces.
    #talkpay

    View full-size slide

  10. C FE.DEV
    T RAC Y OS B O R N @tracymakes
    But learning new skills is hard.

    View full-size slide

  11. C FE.DEV
    T RAC Y OS B O R N @tracymakes

    View full-size slide

  12. C FE.DEV
    T RAC Y OS B O R N @tracymakes

    View full-size slide

  13. C FE.DEV
    T RAC Y OS B O R N @tracymakes

    View full-size slide

  14. C FE.DEV
    T RAC Y OS B O R N @tracymakes

    View full-size slide

  15. C FE.DEV
    T RAC Y OS B O R N @tracymakes
    How get yourself more comfortable with
    design?


    1. Surround yourself with good design


    2. Think critically about what makes it good design

    View full-size slide

  16. C FE.DEV
    T RAC Y OS B O R N @tracymakes
    We need to train our design eye

    View full-size slide

  17. C FE.DEV
    T RAC Y OS B O R N @tracymakes
    So: How do we start training
    our design intuition?

    View full-size slide

  18. C FE.DEV
    T RAC Y OS B O R N @tracymakes
    Understand design basics
    1.

    View full-size slide

  19. C FE.DEV
    T RAC Y OS B O R N @tracymakes
    Some shortcuts:

    View full-size slide

  20. C FE.DEV
    T RAC Y OS B O R N @tracymakes
    Avoid using a lot of

    di
    ff
    erent typefaces and fonts.

    View full-size slide

  21. C FE.DEV
    T RAC Y OS B O R N @tracymakes
    Keep the number of fonts low — two di
    ff
    erent 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 di
    ff
    erentiate bits.

    View full-size slide

  22. C FE.DEV
    T RAC Y OS B O R N @tracymakes

    View full-size slide

  23. C FE.DEV
    T RAC Y OS B O R N @tracymakes

    View full-size slide

  24. C FE.DEV
    T RAC Y OS B O R N @tracymakes

    View full-size slide

  25. C FE.DEV
    T RAC Y OS B O R N @tracymakes
    Try giving your designs

    more space than you initially

    feel comfortable with.

    View full-size slide

  26. C FE.DEV
    T RAC Y OS B O R N @tracymakes

    View full-size slide

  27. C FE.DEV
    T RAC Y OS B O R N @tracymakes

    View full-size slide

  28. C FE.DEV
    T RAC Y OS B O R N @tracymakes

    View full-size slide

  29. C FE.DEV
    T RAC Y OS B O R N @tracymakes

    View full-size slide

  30. C FE.DEV
    T RAC Y OS B O R N @tracymakes

    View full-size slide

  31. C FE.DEV
    T RAC Y OS B O R N @tracymakes
    White space makes a website feel
    more professional and luxurious.

    View full-size slide

  32. C FE.DEV
    T RAC Y OS B O R N @tracymakes

    View full-size slide

  33. C FE.DEV
    T RAC Y OS B O R N @tracymakes

    View full-size slide

  34. C FE.DEV
    T RAC Y OS B O R N @tracymakes
    White space makes your website
    easier to use — a
    ff
    ecting your
    bottom line.

    View full-size slide

  35. C FE.DEV
    T RAC Y OS B O R N @tracymakes
    “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

  36. C FE.DEV
    T RAC Y OS B O R N @tracymakes
    Avoid using a lot

    of di
    ff
    erent colors.


    Keep your colors complimentary.


    Use mostly neutrals + one brighter
    color for important bits.

    View full-size slide

  37. C FE.DEV
    T RAC Y OS B O R N @tracymakes foundation.zurb.com

    View full-size slide

  38. C FE.DEV
    T RAC Y OS B O R N @tracymakes
    colormind.io
    #talkpay
    colormind.io

    View full-size slide

  39. C FE.DEV
    T RAC Y OS B O R N @tracymakes
    Line things up

    View full-size slide

  40. C FE.DEV
    T RAC Y OS B O R N @tracymakes
    An underlying grid gives a

    feeling of cohesiveness.

    View full-size slide

  41. C FE.DEV
    T RAC Y OS B O R N @tracymakes

    View full-size slide

  42. C FE.DEV
    T RAC Y OS B O R N @tracymakes

    View full-size slide

  43. C FE.DEV
    T RAC Y OS B O R N @tracymakes
    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

  44. C FE.DEV
    T RAC Y OS B O R N @tracymakes
    Nitpick good design
    2.

    View full-size slide

  45. C FE.DEV
    T RAC Y OS B O R N @tracymakes siteinspire.com

    View full-size slide

  46. C FE.DEV
    T RAC Y OS B O R N @tracymakes dribbble.com

    View full-size slide

  47. C FE.DEV
    T RAC Y OS B O R N @tracymakes dribbble.com

    View full-size slide

  48. C FE.DEV
    T RAC Y OS B O R N @tracymakes awwwards.com

    View full-size slide

  49. C FE.DEV
    T RAC Y OS B O R N @tracymakes
    Pick out the good decisions
    3.

    View full-size slide

  50. C FE.DEV
    T RAC Y OS B O R N @tracymakes
    Think critically about what
    makes a design work well

    View full-size slide

  51. C FE.DEV
    T RAC Y OS B O R N @tracymakes github.com

    View full-size slide

  52. C FE.DEV
    T RAC Y OS B O R N @tracymakes github.com

    View full-size slide

  53. C FE.DEV
    T RAC Y OS B O R N @tracymakes savvycal.com

    View full-size slide

  54. C FE.DEV
    T RAC Y OS B O R N @tracymakes designerfund.com

    View full-size slide

  55. C FE.DEV
    T RAC Y OS B O R N @tracymakes designerfund.com

    View full-size slide

  56. C FE.DEV
    T RAC Y OS B O R N @tracymakes
    More advanced: Pick out the
    bad decisions
    4.

    View full-size slide

  57. C FE.DEV
    T RAC Y OS B O R N @tracymakes
    Pay attention to


    clutter
    #talkpay

    View full-size slide

  58. C FE.DEV
    T RAC Y OS B O R N @tracymakes github.com

    View full-size slide

  59. C FE.DEV
    T RAC Y OS B O R N @tracymakes github.com

    View full-size slide

  60. C FE.DEV
    T RAC Y OS B O R N @tracymakes
    Be inspired;

    but don’t copy verbatim.
    5.

    View full-size slide

  61. C FE.DEV
    T RAC Y OS B O R N @tracymakes

    View full-size slide

  62. C FE.DEV
    T RAC Y OS B O R N @tracymakes
    Take the idea,

    not the design.

    View full-size slide

  63. C FE.DEV
    T RAC Y OS B O R N @tracymakes

    View full-size slide

  64. C FE.DEV
    T RAC Y OS B O R N @tracymakes

    View full-size slide

  65. C FE.DEV
    T RAC Y OS B O R N @tracymakes

    View full-size slide

  66. C FE.DEV
    T RAC Y OS B O R N @tracymakes

    View full-size slide

  67. C FE.DEV
    T RAC Y OS B O R N @tracymakes
    Inspiration is important for
    training your design eye AND
    when working on design.

    View full-size slide

  68. C FE.DEV
    T RAC Y OS B O R N @tracymakes

    View full-size slide

  69. C FE.DEV
    T RAC Y OS B O R N @tracymakes
    Great designers steal

    (and use shortcuts)
    #talkpay

    View full-size slide

  70. C FE.DEV
    T RAC Y OS B O R N @tracymakes
    Practice. Practice.
    Practice.
    6.

    View full-size slide

  71. C FE.DEV
    T RAC Y OS B O R N @tracymakes
    Almost every design will
    start o
    ff
    feeling like a disaster

    View full-size slide

  72. C FE.DEV
    T RAC Y OS B O R N @tracymakes
    My thought process, every time:


    View full-size slide

  73. C FE.DEV
    T RAC Y OS B O R N @tracymakes
    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

  74. C FE.DEV
    T RAC Y OS B O R N @tracymakes
    Every design you do will
    be better than the last.

    View full-size slide

  75. C FE.DEV
    T RAC Y OS B O R N @tracymakes
    1. Think critically about design starting today.

    Why is something successful? Why is it not?


    View full-size slide

  76. C FE.DEV
    T RAC Y OS B O R N @tracymakes
    1. Think critically about design starting today.

    Why is something successful? Why is it not?


    2. Practice. Don’t be afraid to iterate.


    View full-size slide

  77. C FE.DEV
    T RAC Y OS B O R N @tracymakes
    1. Think critically about design starting today.

    Why is something successful? Why is it not?


    2. Practice. Don’t be afraid to iterate.


    3. Have fun!

    View full-size slide

  78. C FE.DEV
    T RAC Y OS B O R N @tracymakes

    View full-size slide

  79. C FE.DEV
    T RAC Y OS B O R N @tracymakes nostarch.com/hello-web-design

    View full-size slide

  80. C FE.DEV
    T RAC Y OS B O R N @tracymakes tinyseed.com

    View full-size slide

  81. C FE.DEV
    T RAC Y OS B O R N @tracymakes
    Thank you! Chat with me online:


    @tracymakes

    View full-size slide