An expanded version of the scaling design talk.

1. Design APIs
January 22, 2014

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

3. 3
3 Fun Facts

4. 4
I was a competitive
horseback rider...
...when I was 10.

5. Me
300 Children
5
Candy

6. 6
And then
this happened.

7. 7
What about you?

8. 8
WHATS COMING
!
What is a “design API”? Why worry?
!
How can you do it?
!
What issues will you face?
!
How we roll.

9. 9
WHATS COMING
!
What is a “design API”? Why worry?
!
How can you do it?
!
What issues will you face?
!
How we roll.

10. 10
Its all about
scaling.

11. 11
The project of 1.

12. 12
The project of hundreds.

13. 13
The project of two.

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

15. 15
What could possibly go wrong

16. 16
UNUSABLE PRODUCT

17. 17
UNHAPPY TEAMMATES

18. 18
COMPETITIVE VULNERABILITY

19. 19
WHATS COMING
!
What is “scaling design”? Why worry?
!
How can you do it?
!
What issues will you face?
!
How we roll.

20. 20
!
!
!
!
How can you do it?
!
COMMUNICATION

21. 21
Communication
Evolution

22. 22
Sitting and Talking

23. 23
Sitting and Talking +
Feature Mocks

24. 24
Sitting and Talking +
Feature Mocks +
Style Guides

25. 25
Sitting and Talking +
Feature Mocks +
Style Guides

26. 26
Something’s wrong.

27. 2 Issues:
The product is a moving target.
!
The design IS the product.
27

28. 28
What if we thought about
design as an API?

29. 29
What are the defining
characteristics of an API?
Expected Behavior +
Software Library +
Documentation

30. 30
What are the defining
characteristics of a design API?
Expected Behavior +
Software Library +
Documentation
Principles +
Design Framework +
Documentation

31. 31
Principles

32. 32
Principles +
Framework

33. 33
Principles +
Framework +
Documentation

34. 34
Principles +
Framework +
Documentation

35. 35
WHATS COMING
!
What is “scaling design”? Why worry?
!
How can you do it?
!
What issues will you face?
!
How we roll.

36. 36
!
!
!
!
!
!
What issues will you face?
!
3 ROADBLOCKS

37. 37
RISK AVERSION
!
1. Nothing is forever.
2. Something is better than nothing.

38. 38
COMPETENCE SCARCITY
!
1. Be flexible.
2. Keep learning.

39. 39
BAD HABITS
!
!

40. 40
WHATS COMING
!
What is “scaling design”? Why worry?
!
How can you do it?
!
What issues will you face?
!
How we roll.

41. 41
!
!
!
!
!
!
!
!
How we roll.
A CASE STUDY

42. 42
PRINCIPLES

43. 43
Spotify Design Principles
These are just an example.
!
They are tailored to:
•Our Brand
•Our Product Strategy
•Our Core Beliefs
!
!
!

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

45. 45
FRAMEWORK

46. 46
Spotify desktop architecture in 20 seconds.

47. 47
Don’t reinvent the wheel...

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

49. 49
DOCUMENTATION

50. 50
Not as many good tools
here... for css.

51. 51
Requirements:
1. Live in the code
2.Live online
3.Never be out of sync
KSS Knyle Style Sheets
- by Kyle Neath | @kneath

52. 52
CODE SAMPLE
// A button suitable for giving stars to someone.
//
// :hover
- Subtle hover highlight.
// .stars-given
- A highlight indicating you've already given a star.
// .stars-given:hover - Subtle hover highlight on top of stars-given styling.
// .disabled
- Dims the button to indicate it cannot be used.
//
// Styleguide 2.1.3.
a.button.star{
...
&.star-given{
...
}
&.disabled{
...
}
}

53. 53

54. 54
WHATS COMING
!
What is “scaling design”? Why worry?
!
How can you do it?
!
What issues will you face?
!
How we roll.

55. 55
Before I take your QUESTIONS
!
I’d like to leave you with two of ours:

56. 56
What’s the best way to
handle multiple platforms?
(CSS isn’t used everywhere.)

57. 57
Can we use these tools to
enable faster, better
prototyping?

58. 58
ANY QUESTIONS?

59. Thanks!
Q. Cook
quenton@spotify.com
January 22, 2014