Building
Scalable Design
Hi! I’m Diana, or
Broccolini on most of the internet.
Made by real people.
Building
Scalable Design
Shop management re-design
Not responsive
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
Aaron
Jessica
Dennis
Diana
~300
Designers & Engineers
Some things we learned...
The first styles you make probably won't be right.
Nothing is final.
Don't get too specific
too early.
Naming stuff is hard.
Get feedback from a lot of people.
Develop a naming convention.
Document everything
Including your principles.
Not everything is best done
in code.
Validation
Boot-campers used it without guidance and it looked alright!
But do train people.
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
By Diana Mounter
