design platform
TRANSCRIPT
January 22, 2014
Design APIs
�2
•I work on design frameworks here at Spotify.
Hi, my name’s Q.
�3
3 Fun Facts
�4
I was a competitive horseback rider...
...when I was 10.
�5
Me
Candy
Me
300 Children
�6
And then this happened.
�7
What about you?
�8
WHATS COMING !
What is a “design API”? Why worry? !
How can you do it? !
What issues will you face? !
How we roll.
�9
WHATS COMING !
What is a “design API”? Why worry? !
How can you do it? !
What issues will you face? !
How we roll.
�10
Its all about scaling.
�11
The project of 1.
�12
The project of hundreds.
�13
The project of two.
A definition
–People will always make and communicate design choices. !
–Scaling means coordinating that process consciously and deliberately.
�14
�15
What could possibly go wrong
�16
UNUSABLE PRODUCT
�17
UNHAPPY TEAMMATES
�18
COMPETITIVE VULNERABILITY
�19
WHATS COMING !
What is “scaling design”? Why worry? !
How can you do it? !
What issues will you face? !
How we roll.
�20
!
!
!
!
How can you do it? !
COMMUNICATION
Communication Evolution
�21
Sitting and Talking
�22
Feature Mocks
�23
Sitting and Talking +
Style Guides
�24
Sitting and Talking + Feature Mocks +
Style Guides
�25
Sitting and Talking + Feature Mocks +
�26
Something’s wrong.
2 Issues:�27
The product is a moving target. !
The design IS the product.
What if we thought about design as an API?
�28
What are the defining characteristics of an API?
�29
Expected Behavior + Software Library + Documentation
What are the defining characteristics of a design API?
�30
Principles + Design Framework + Documentation
Expected Behavior + Software Library + Documentation
Principles
�31
Principles + Framework
�32
Principles + Framework + Documentation
�33
�34
Principles + Framework + Documentation
�35
WHATS COMING !
What is “scaling design”? Why worry? !
How can you do it? !
What issues will you face? !
How we roll.
�36
!
!
!
!
!
!
What issues will you face? !
3 ROADBLOCKS
�37
RISK AVERSION !
1. Nothing is forever. 2. Something is better than nothing.
�38
COMPETENCE SCARCITY !
1. Be flexible. 2. Keep learning.
�39
BAD HABITS !
!
�40
WHATS COMING !
What is “scaling design”? Why worry? !
How can you do it? !
What issues will you face? !
How we roll.
�41
!
!
!
!
!
!
!
!
How we roll. A CASE STUDY
�42
PRINCIPLES
Spotify Design Principles
�43
These are just an example. !
They are tailored to: •Our Brand •Our Product Strategy •Our Core Beliefs
!!!
1. Content first 2.Be Alive 3.Get familiar 4.Do less 5.Stay Authentic 6.Lagom
�44
�45
FRAMEWORK
Spotify desktop architecture in 20 seconds.
�46
�47
Don’t reinvent the wheel...
�48
...but, improve it.
+( ) - CRUFT* = GLUE
�49
DOCUMENTATION
�50
Not as many good tools here... for css.
1. Live in the code 2.Live online 3.Never be out of sync
�51
Requirements:
KSS Knyle Style Sheets- by Kyle Neath | @kneath
CODE SAMPLE�52
// 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
�54
WHATS COMING !
What is “scaling design”? Why worry? !
How can you do it? !
What issues will you face? !
How we roll.
Before I take your QUESTIONS !
I’d like to leave you with two of ours:
�55
�56
What’s the best way to handle multiple platforms? (CSS isn’t used everywhere.)
�57
Can we use these tools to enable faster, better prototyping?
�58
ANY QUESTIONS?
