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

Sass: The gateway drug for designers who Want to code

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.

Adekunle Oduye

June 25, 2015

More Decks by Adekunle Oduye

Other Decks in Technology


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

  2. My Name is... • Product Designer at NASDAQ • Co-organizer

    at Gotham Sass & SassConf Adekunle Oduye (Add-eh-koon-lay Oh-due-yay)
  3. If designers SHOULD learn how to code

  4. Basics of Sass

  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

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

  8. Made the jump to Web (2011)

  9. My first (real) coding experience

  10. Results: The Good • It was a functional site •

    That’s it!!!
  11. Results: The Bad • Very specific CSS • Took a

    long to develop
  12. Overall, It felt Great!

  13. Things would never be the same again

  14. 1. Never looked like the mockups

  15. 2. Focus on design rather than content

  16. 3. Communication with developers did not exist

  17. Stage #1: Experimentation

  18. Vanilla CSS was becoming boring

  19. Why was I bored with CSS? • Hard to reuse

    code • No code strategy
  20. I started to lose my coding buzz

  21. What is next...JavaScript?

  22. I was frustrated and defeated

  23. My problems with JavaScript were: • Syntax • Process •

    Docs weren’t made for designers • Education Platforms focused on writing than thinking
  24. Say hello to LESS

  25. Sass was what I was looking for

  26. Sass Benefits • DRY (Don’t Repeat Yourself) Code • Breakdown

    CSS files with partials • Faster Development
  27. Stage #2: Regular Use

  28. Sass Tools • Patterns Frameworks (Bourbon & Compass) • Grid

    Frameworks (Susy & Singularity) • Workflow tools (Sassmeister & Scout)
  29. Stage #3: Code Abuse

  30. Code Overdose #1: Nesting

  31. None
  32. None
  33. Nesting Gone Bad

  34. None
  35. None
  36. Is Nesting Bad? Not all the time

  37. None
  38. Code Overdoes #3: Extend

  39. None
  40. None
  41. Extending Gone bad

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

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

  46. WTH is going on over here?

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

    too complicated.
  48. Stage #4: Full on Addiction

  49. Was ready to take on JavaScript again

  50. Variables

  51. None
  52. None
  53. Arrays

  54. None
  55. None
  56. Objects

  57. None
  58. None
  59. Functions

  60. None
  61. None
  62. Loops

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

  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/
  67. Rapid Prototyping: Process http://www.smashingmagazine.com/2010/06/16/design-better-faster-with-rapid-prototyping/

  68. A prototype brings experience behind user experience

  69. Design for different situations • Screen sizes and resolutions •

    User Interactions • User Workflows
  70. Improves Communication with Developers • Speak the same Language •

    Less Deliverables • Freedom to design
  71. None
  72. None
  73. Better Feedback Loop with Stakeholders • Prototypes are great for

    meeting • Right Questions get asked • See holes in workflow
  74. Final Thoughts

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

  76. Code can be a great communication tool

  77. Resources • Sass (http://sass-lang.com/) • Sassway (http://thesassway.com/) • Sassmeister (http://www.sassmeister.com/)

    • Sassbites (https://www.youtube.com/user/sassbites)
  78. Thanks for listening!!!! Adekunle Oduye @adekunleoduye http://bit.ly/sass-gateway-drug