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

Building scalable design

  • 5,464