Should I really bother learning to code?

This talk looks at what you can achieve with a little bit—not a lot!—of code. It's a brief look at how code in my design process has challenged my assumptions, improved accessibility, and helped me communicate with engineers. Beyond that, you'll see how to get real value of out coding skills without ever shipping production code or becoming a unicorn.

Web Directions Design 2018, Melbourne

Link: https://didoesdigital.com/project/code-for-designers/

Transcript

1. Should I really bother
   learning to code?
   by Diana MacDonald
   

   View Slide

2. Diana MacDonald
   @DiDoesDigital
   

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. Today
   

   View Slide

10. - Roles
    

    View Slide

11. - Roles
    - 3 ways to use code in design
    

    View Slide

12. - Roles
    - 3 ways to use code in design
    - Where to go next
    

    View Slide

13. Show of hands
    

    View Slide

14. Designers should…
    

    View Slide

15. View Slide

16. View Slide

17. View Slide

18. View Slide

19. View Slide

20. View Slide

21. View Slide

22. Design roles
    

    View Slide

23. Design roles
    

    View Slide

24. This is a false dichotomy
    

    View Slide

25. Design roles
    

    View Slide

26. There are other unicorn skills
    

    View Slide

27. Design roles
    

    View Slide

28. There is an opportunity cost
    

    View Slide

29. Design roles
    

    View Slide

30. No one works alone
    

    View Slide

31. Design roles
    

    View Slide

32. Design roles
    

    View Slide

33. There is value in fluency
    

    View Slide

34. Design roles
    

    View Slide

35. Design roles
    

    View Slide

36. Coach people on your process
    

    View Slide

37. Design roles
    

    View Slide

38. View Slide

39. 3 ways to use code in design
    

    View Slide

40. - 1. Designing in the browser
    

    View Slide

41. - 1. Designing in the browser
    - 2. Prototyping
    

    View Slide

42. - 1. Designing in the browser
    - 2. Prototyping
    - 3. Personal projects
    

    View Slide

43. 1. Designing in browser
    

    View Slide

44. document.designMode = 'on'
    

    View Slide

45. Designing in browser
    

    View Slide

46. Designing in browser
    

    View Slide

47. View Slide

48. 2. Prototyping
    

    View Slide

49. Prototyping
    

    View Slide

50. Balance speed and fidelity
    

    View Slide

51. View Slide

52. 3. Personal projects
    

    View Slide

53. Personal projects
    

    View Slide

54. Personal projects
    

    View Slide

55. Personal projects
    

    View Slide

56. Personal projects
    

    View Slide

57. Personal projects
    

    View Slide

58. Personal projects
    

    View Slide

59. Code what you can and fake
    everything else
    

    View Slide

60. Personal projects
    

    View Slide

61. aria-pressed
    

    View Slide

62. Personal projects
    

    View Slide

63. Immediate value
    

    View Slide

64. View Slide

65. Where to start?
    

    View Slide

66. Where to start?
    - Don't fear the Internet

    by Jessica Hische & Russ Maschmeyer

    http://www.dontfeartheinternet.com/
    

    View Slide

67. Where to start?
    - Don't fear the Internet

    by Jessica Hische & Russ Maschmeyer

    http://www.dontfeartheinternet.com/
    - The Elements of Typographic Style
    Applied to the Web

    by Richard Rutter

    http://webtypography.net/
    

    View Slide

68. Where to start?
    - Don't fear the Internet

    by Jessica Hische & Russ Maschmeyer

    http://www.dontfeartheinternet.com/
    - The Elements of Typographic Style
    Applied to the Web

    by Richard Rutter

    http://webtypography.net/
    - Designing in the browser

    by Kayce Basques, Google

    https://developers.google.com/web/tools/chrome-
    devtools/css/
    

    View Slide

69. Where to go next?
    - Next-level Prototyping for Web Design

    by Ling Zhou

    https://blog.usejournal.com/next-level-prototyping-for-
    web-design-2c9f54e51d57
    

    View Slide

70. Where to go next?
    - Next-level Prototyping for Web Design

    by Ling Zhou

    https://blog.usejournal.com/next-level-prototyping-for-
    web-design-2c9f54e51d57
    - Passion Projects (Procrastiworking)

    by Jessica Hische

    https://youtu.be/RZbqJxQJ5LY
    

    View Slide

71. Where to go next?
    - Next-level Prototyping for Web Design

    by Ling Zhou

    https://blog.usejournal.com/next-level-prototyping-for-
    web-design-2c9f54e51d57
    - Passion Projects (Procrastiworking)

    by Jessica Hische

    https://youtu.be/RZbqJxQJ5LY
    - Sketch plugins

    by Sagi Shrieber

    http://hackingui.com/sketch-design/how-to-create-a-
    sketch-plugin/
    

    View Slide

72. View Slide

73. How much code?
    - “Design or code” is a false dichotomy
    - There’s opportunity cost—in teams & AI
    - There’s value in fluency—without coding
    - Design in the browser—with a little code
    - Balance speed and fidelity in prototypes
    —with as much as you need for realism
    - Code for immediate value and fake
    everything else
    
    DiDoesDigital.com
    

    View Slide

74. Code for designers
    https://DiDoesDigital.com
    

    View Slide

75. Should you really bother
    learning to code?
    

    View Slide

76. Questions?
    Diana MacDonald | @DiDoesDigital
    

    View Slide