Sass: The gateway drug for designers who Want to code

Today, a lot of designers are learning how to code to understand the medium they work with. Some just learn the basics of HTML and CSS, but some (like me) get addicted and go a little further. This addiction isn’t a bad thing. In this talk, I'll explain how learning how to code with Sass and JavaScript gave me the power to design and test out my solutions, as well as the the experience to communicate with the developers that build my designs and speed up the feedback process with product owners, stakeholders, and clients.

Transcript

1. Sass: The Gateway Drug for
   Designers who WANT to code
   @adekunleoduye
   

   View Slide

2. My Name is...
   ●
   Product Designer at NASDAQ
   ●
   Co-organizer at Gotham Sass & SassConf
   Adekunle Oduye
   (Add-eh-koon-lay Oh-due-yay)
   

   View Slide

3. If designers SHOULD learn
   how to code
   

   View Slide

4. Basics of Sass
   

   View Slide

5. I hope you will learn how Sass:
   ● Can introduces programming concepts for designers
   ● With Javascript can be used to test UX design solutions
   ● Improves communication & collaboration with developers &
   stakeholders
   

   View Slide

6. STORY TIME
   

   View Slide

7. I started out as a
   Print Designer (2008)
   

   View Slide

8. Made the jump to Web
   (2011)
   

   View Slide

9. My first (real) coding
   experience
   

   View Slide

10. Results: The Good
    ● It was a functional site
    ● That’s it!!!
    

    View Slide

11. Results: The Bad
    ● Very specific CSS
    ● Took a long to develop
    

    View Slide

12. Overall, It felt Great!
    

    View Slide

13. Things would never be the
    same again
    

    View Slide

14. 1. Never looked like the
    mockups
    

    View Slide

15. 2. Focus on design rather
    than content
    

    View Slide

16. 3. Communication with
    developers did not exist
    

    View Slide

17. Stage #1:
    Experimentation
    

    View Slide

18. Vanilla CSS was becoming boring
    

    View Slide

19. Why was I bored with CSS?
    ● Hard to reuse code
    ● No code strategy
    

    View Slide

20. I started to lose
    my coding buzz
    

    View Slide

21. What is next...JavaScript?
    

    View Slide

22. I was frustrated and defeated
    

    View Slide

23. My problems with JavaScript were:
    ● Syntax
    ● Process
    ● Docs weren’t made for designers
    ● Education Platforms focused on writing than thinking
    

    View Slide

24. Say hello to LESS
    

    View Slide

25. Sass was what I was looking for
    

    View Slide

26. Sass Benefits
    ● DRY (Don’t Repeat Yourself) Code
    ● Breakdown CSS files with partials
    ● Faster Development
    

    View Slide

27. Stage #2:
    Regular Use
    

    View Slide

28. Sass Tools
    ● Patterns Frameworks (Bourbon & Compass)
    ● Grid Frameworks (Susy & Singularity)
    ● Workflow tools (Sassmeister & Scout)
    

    View Slide

29. Stage #3:
    Code Abuse
    

    View Slide

30. Code Overdose #1:
    Nesting
    

    View Slide

31. View Slide

32. View Slide

33. Nesting Gone Bad
    

    View Slide

34. View Slide

35. View Slide

36. Is Nesting Bad?
    Not all the time
    

    View Slide

37. View Slide

38. Code Overdoes #3:
    Extend
    

    View Slide

39. View Slide

40. View Slide

41. Extending Gone bad
    

    View Slide

42. View Slide

43. View Slide

44. Debugging: extends vs mixins
    https://tech.bellycard.com/blog/sass-mixins-vs-extends-the-data/
    

    View Slide

45. Code Overdose #3:
    CSS not looking like CSS
    

    View Slide

46. WTH is going on
    over here?
    

    View Slide

47. Sass will compile into CSS. Best
    not to make it too complicated.
    

    View Slide

48. Stage #4:
    Full on Addiction
    

    View Slide

49. Was ready to take on
    JavaScript again
    

    View Slide

50. Variables
    

    View Slide

51. View Slide

52. View Slide

53. Arrays
    

    View Slide

54. View Slide

55. View Slide

56. Objects
    

    View Slide

57. View Slide

58. View Slide

59. Functions
    

    View Slide

60. View Slide

61. View Slide

62. Loops
    

    View Slide

63. View Slide

64. View Slide

65. Front-end Design by Brad Frost
    http://bradfrost.com/blog/post/frontend-design/
    

    View Slide

66. Rapid Prototyping
    A process of quickly mocking up the future state of a system, be it a
    website or application, and validating it with a broader team of users,
    stakeholders, developers and designers.
    http://www.smashingmagazine.com/2010/06/16/design-better-faster-with-rapid-prototyping/
    

    View Slide

67. Rapid Prototyping: Process
    http://www.smashingmagazine.com/2010/06/16/design-better-faster-with-rapid-prototyping/
    

    View Slide

68. A prototype brings experience
    behind user experience
    

    View Slide

69. Design for different situations
    ● Screen sizes and resolutions
    ● User Interactions
    ● User Workflows
    

    View Slide

70. Improves Communication with Developers
    ● Speak the same Language
    ● Less Deliverables
    ● Freedom to design
    

    View Slide

71. View Slide

72. View Slide

73. Better Feedback Loop with Stakeholders
    ● Prototypes are great for meeting
    ● Right Questions get asked
    ● See holes in workflow
    

    View Slide

74. Final Thoughts
    

    View Slide

75. Sass was my gateway, for
    others it might be different
    

    View Slide

76. Code can be a great
    communication tool
    

    View Slide

77. Resources
    ● Sass (http://sass-lang.com/)
    ● Sassway (http://thesassway.com/)
    ● Sassmeister (http://www.sassmeister.com/)
    ● Sassbites (https://www.youtube.com/user/sassbites)
    

    View Slide

78. Thanks for listening!!!!
    Adekunle Oduye
    @adekunleoduye
    http://bit.ly/sass-gateway-drug
    

    View Slide