Successfully reported this slideshow.

Quenton Cook : Scaling Design : Lightning Talk

4

Share

Upcoming SlideShare
Design principles
Design principles
Loading in …3
×
1 of 52
1 of 52

Quenton Cook : Scaling Design : Lightning Talk

4

Share

Download to read offline

Transcript

  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

Transcript

  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

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

×