Building
Scalable Design
Hi! I’m Diana, or
Broccolini on most of the internet.
![](https://media.slid.es/uploads/dianamounter/images/784116/diana3.png)
![](https://media.slid.es/uploads/dianamounter/images/784301/map.png)
![](https://media.slid.es/uploads/dianamounter/images/784436/the-queen.png)
![](https://media.slid.es/uploads/dianamounter/images/784444/crocodile-dundee.png)
![](https://media.slid.es/uploads/dianamounter/images/784450/startupbuslogo.png)
![](https://media.slid.es/uploads/dianamounter/images/784456/pasted-from-clipboard.png)
Made by real people.
![](https://media.slid.es/uploads/dianamounter/images/784460/pasted-from-clipboard.png)
Building
Scalable Design
Shop management re-design
Not responsive
![](https://media.slid.es/uploads/dianamounter/images/792229/2014-11-04_13.57.11.png)
Why not use the style guide we have?
Missing patterns.
We stopped following some patterns as they showed their age.
Many patterns weren’t designed with responsiveness in mind.
… and in general,
we have to write a ton of CSS.
A new style guide
New goals
-
Be easy to use
-
Be responsive
-
Document all of the patterns
-
People shouldn't need to write new CSS
Support a culture of
Style Guide Driven Design
& Development
Design with styles in the
style guide first.
Build styles in the
style guide first.
Building a living style guide
4 designers
![](https://media.slid.es/uploads/dianamounter/images/791839/aaron.jpg)
![](https://media.slid.es/uploads/dianamounter/images/791841/jessica.jpg)
![](https://media.slid.es/uploads/dianamounter/images/791842/dennis.jpg)
![](https://media.slid.es/uploads/dianamounter/images/791844/diana.jpg)
Aaron
Jessica
Dennis
Diana
~300
Designers & Engineers
Some things we learned...
The first styles you make probably won't be right.
Nothing is final.
![](https://media.slid.es/uploads/dianamounter/images/788305/Screen_Shot_2014-11-03_at_10.32.21_PM.png)
Don't get too specific
too early.
![](https://media.slid.es/uploads/dianamounter/images/788350/Screen_Shot_2014-11-03_at_10.54.16_PM.png)
Naming stuff is hard.
Get feedback from a lot of people.
![](https://media.slid.es/uploads/dianamounter/images/788450/Screen_Shot_2014-11-03_at_11.36.59_PM.png)
Develop a naming convention.
Document everything
![](https://media.slid.es/uploads/dianamounter/images/788486/Screen_Shot_2014-11-03_at_11.52.31_PM.png)
Including your principles.
Not everything is best done
in code.
![](https://media.slid.es/uploads/dianamounter/images/788580/Screen_Shot_2014-11-04_at_12.22.23_AM.png)
![](https://media.slid.es/uploads/dianamounter/images/788566/Screen_Shot_2014-11-04_at_12.17.47_AM.png)
Validation
Boot-campers used it without guidance and it looked alright!
![](https://media.slid.es/uploads/dianamounter/images/788591/Screen_Shot_2014-11-04_at_12.31.40_AM.png)
But do train people.
![](https://media.slid.es/uploads/dianamounter/images/792229/2014-11-04_13.57.11.png)
![](https://media.slid.es/uploads/dianamounter/images/792230/2014-11-04_13.57.29.png)
Trust people
You might be tempted to make styles more specific to restrict their use.
Don't.
Documentation, design reviews,
code reviews, and leading by example
work better.
Make it a style guide people WANT to use.
Thanks!
slides.com/dianamounter/building-scalable-design
@broccolini
Building Scalable Design
Building scalable design
By Diana Mounter
Building scalable design
- 5,647