Design Eye for the Developer

Transcript

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

   View 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 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 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 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 Slide

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

   View 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 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 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 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 Slide

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

    View Slide

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

    View Slide

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

    View 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 Slide

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

    View Slide

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

    View 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 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 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 Slide

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

    View Slide

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

    View Slide

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

    

    View Slide

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

    feeling of cohesiveness.
    

    View Slide

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

    View Slide

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

    View 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    but don’t copy verbatim.
    5.
    

    View Slide

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

    View Slide

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

    not the design.
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 Slide

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

    View Slide

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

    (and use shortcuts)
    #talkpay
    

    View Slide

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

    View 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 Slide

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

    View 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 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 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 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 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide