1. Scaling Design
October 14, 2013

2. 2
Hi, my name’s Q.
I work on design frameworks at Spotify.

3. 2
Hi, my name’s Q.
I work on design frameworks at Spotify.

4. 3
The project of 1.

5. 4
The project of hundreds.

6. 5
UNUSABLE PRODUCT

7. 6
A definition

8. 6
A definition
–People will always make and
communicate design choices.

9. 6
A definition
–People will always make and
communicate design choices.

10. 6
A definition
–People will always make and
communicate design choices.
–Scaling means coordinating that
process consciously and deliberately.

11. 7
Communication
Evolution

12. 8
Sitting and
Talking

13. 9
Sitting and Talking +
Feature
Mocks

14. 9
Sitting and Talking +
Feature
Mocks

15. 10
Sitting and Talking +
Feature Mocks +
Style Guides

16. 10
Sitting and Talking +
Feature Mocks +
Style Guides

17. 11
Something’s wrong.

18. 2 Issues:
12

19. 2 Issues:
The product is a
moving target.
12

20. 2 Issues:
The product is a
moving target.
The design IS
the product.
12

21. 13
A new stack

22. 13
A new stack
Principles +

23. 13
A new stack
Principles +
Framework +

24. 13
A new stack
Principles +
Framework +
Documentation

25. 14
Principles

26. 15

27. 15
1. Content first

28. 15
1. Content first
2.Be Alive

29. 15
1. Content first
2.Be Alive
3.Get familiar

30. 15
1. Content first
2.Be Alive
3.Get familiar
4.Do less

31. 15
1. Content first
2.Be Alive
3.Get familiar
4.Do less
5.Stay Authentic

32. 15
1. Content first
2.Be Alive
3.Get familiar
4.Do less
5.Stay Authentic
6.Lagom

33. 16
Principles +
Framework

34. 17
Don’t reinvent the wheel...

35. 17
Don’t reinvent the wheel...

36. 17
Don’t reinvent the wheel...

37. 17
Don’t reinvent the wheel...

38. 17
Don’t reinvent the wheel...

39. 18
...but, improve it.

40. 18
...but, improve it.
+

41. 18
...but, improve it.
(
+
) - CRUFT*

42. 18
...but, improve it.
(
+
) - CRUFT* = GLUE

43. 19
Principles +
Framework +
Documentation

44. Requirements:
20

45. Requirements:
1. Live in the code
20

46. Requirements:
1. Live in the code
2.Live online
20

47. Requirements:
1. Live in the code
2.Live online
3.Never be out of sync
20

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. 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. 22
OUTPUT

51. 23
Principles +
Framework +
Documentation

52. Thanks!
Q. Cook
quenton@spotify.com
October 14, 2013