52
October 14, 2013 Scaling Design
| Date post: | 21-Jun-2015 |
| Category: |
Technology |
| Upload: | quenton-longmire-cook |
| View: | 373 times |
| Download: | 6 times |
October 14, 2013
Scaling Design
2
I work on design frameworks at Spotify.
Hi, my name’s Q.
2
I work on design frameworks at Spotify.
Hi, my name’s Q.
3
The project of 1.
4
The project of hundreds.
5
UNUSABLE PRODUCT
A definition
6
A definition
–People will always make and communicate design choices.
6
A definition
–People will always make and communicate design choices.
6
A definition
–People will always make and communicate design choices.
–Scaling means coordinating that process consciously and deliberately.
6
Communication Evolution
7
Sitting and Talking
8
Feature Mocks
9
Sitting and Talking +
Feature Mocks
9
Sitting and Talking +
Style Guides
10
Sitting and Talking +Feature Mocks +
Style Guides
10
Sitting and Talking +Feature Mocks +
11
Something’s wrong.
2 Issues:12
2 Issues:12
The product is a moving target.
2 Issues:12
The product is a moving target.
The design IS the product.
13
A new stack
13
Principles +
A new stack
13
Principles +Framework +
A new stack
13
Principles +Framework +Documentation
A new stack
Principles
14
15
1. Content first
15
1. Content first2.Be Alive
15
1. Content first2.Be Alive3.Get familiar
15
1. Content first2.Be Alive3.Get familiar4.Do less
15
1. Content first2.Be Alive3.Get familiar4.Do less5.Stay Authentic
15
1. Content first2.Be Alive3.Get familiar4.Do less5.Stay Authentic6.Lagom
15
Principles +Framework
16
17
Don’t reinvent the wheel...
17
Don’t reinvent the wheel...
17
Don’t reinvent the wheel...
17
Don’t reinvent the wheel...
17
Don’t reinvent the wheel...
18
...but, improve it.
18
...but, improve it.
+
18
...but, improve it.
+( ) - CRUFT*
18
...but, improve it.
+( ) - CRUFT* = GLUE
Principles +Framework +Documentation
19
20
Requirements:
1. Live in the code
20
Requirements:
1. Live in the code2.Live online
20
Requirements:
1. Live in the code2.Live online3.Never be out of sync
20
Requirements:
1. Live in the code2.Live online3.Never be out of sync
20
Requirements:
KSS Knyle Style - by Kyle Neath | @kneath
CODE SAMPLE21
// 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{ ... }}
22
OUTPUT
23
Principles +Framework +Documentation
October 14, 2013
Thanks!
