Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Quenton Cook : Scaling Design : Lightning Talk

733 views

Published on

Published in: Technology, Business

Quenton Cook : Scaling Design : Lightning Talk

  1. 1. Scaling Design October 14, 2013
  2. 2. 2 Hi, my name’s Q. I work on design frameworks at Spotify.
  3. 3. 2 Hi, my name’s Q. I work on design frameworks at Spotify.
  4. 4. 3 The project of 1.
  5. 5. 4 The project of hundreds.
  6. 6. 5 UNUSABLE PRODUCT
  7. 7. 6 A definition
  8. 8. 6 A definition –People will always make and communicate design choices.
  9. 9. 6 A definition –People will always make and communicate design choices.
  10. 10. 6 A definition –People will always make and communicate design choices. –Scaling means coordinating that process consciously and deliberately.
  11. 11. 7 Communication Evolution
  12. 12. 8 Sitting and Talking
  13. 13. 9 Sitting and Talking + Feature Mocks
  14. 14. 9 Sitting and Talking + Feature Mocks
  15. 15. 10 Sitting and Talking + Feature Mocks + Style Guides
  16. 16. 10 Sitting and Talking + Feature Mocks + Style Guides
  17. 17. 11 Something’s wrong.
  18. 18. 2 Issues: 12
  19. 19. 2 Issues: The product is a moving target. 12
  20. 20. 2 Issues: The product is a moving target. The design IS the product. 12
  21. 21. 13 A new stack
  22. 22. 13 A new stack Principles +
  23. 23. 13 A new stack Principles + Framework +
  24. 24. 13 A new stack Principles + Framework + Documentation
  25. 25. 14 Principles
  26. 26. 15
  27. 27. 15 1. Content first
  28. 28. 15 1. Content first 2.Be Alive
  29. 29. 15 1. Content first 2.Be Alive 3.Get familiar
  30. 30. 15 1. Content first 2.Be Alive 3.Get familiar 4.Do less
  31. 31. 15 1. Content first 2.Be Alive 3.Get familiar 4.Do less 5.Stay Authentic
  32. 32. 15 1. Content first 2.Be Alive 3.Get familiar 4.Do less 5.Stay Authentic 6.Lagom
  33. 33. 16 Principles + Framework
  34. 34. 17 Don’t reinvent the wheel...
  35. 35. 17 Don’t reinvent the wheel...
  36. 36. 17 Don’t reinvent the wheel...
  37. 37. 17 Don’t reinvent the wheel...
  38. 38. 17 Don’t reinvent the wheel...
  39. 39. 18 ...but, improve it.
  40. 40. 18 ...but, improve it. +
  41. 41. 18 ...but, improve it. ( + ) - CRUFT*
  42. 42. 18 ...but, improve it. ( + ) - CRUFT* = GLUE
  43. 43. 19 Principles + Framework + Documentation
  44. 44. Requirements: 20
  45. 45. Requirements: 1. Live in the code 20
  46. 46. Requirements: 1. Live in the code 2.Live online 20
  47. 47. Requirements: 1. Live in the code 2.Live online 3.Never be out of sync 20
  48. 48. Requirements: 1. Live in the code 2.Live online 3.Never be out of sync KSS Knyle Style - by Kyle Neath | @kneath 20
  49. 49. 21 CODE SAMPLE // A button suitable for giving stars to someone. // // :hover - Subtle hover highlight. // .stars-given - Indicating you've already given a star. // .stars-given:hover - Subtle hover highlight on top. // .disabled - Dims the button when it cannot be used. // // Styleguide 2.1.3. a.button.star{ ... &.star-given{ ... } &.disabled{ ... } }
  50. 50. 22 OUTPUT
  51. 51. 23 Principles + Framework + Documentation
  52. 52. Thanks! Q. Cook quenton@spotify.com October 14, 2013

×