Designing with Design Systems

A lightning talk by Ethan Muller, who is a designer/developer
at Let’s talk about design systems for a little bit.

@ethanmuller #SparkboxUnConf First, what’s a design system?

@ethanmuller #SparkboxUnConf A design system contains both style guide and
pattern library content.

@ethanmuller #SparkboxUnConf

@ethanmuller #SparkboxUnConf A style guide deconstructs an aesthetic to show
you what makes it tick.

@ethanmuller #SparkboxUnConf A pattern library is a collection of UI
chunks that can be stuck together to make websites, apps, etc.

“When you create a design system, you’re not just creating
reusable patterns—you’re operationalizing how your company approaches design.” – Yesenia Perez-Cruz, Expressive Design Systems

@ethanmuller #SparkboxUnConf Big organizations have difficult problems.

@ethanmuller #SparkboxUnConf Breaking an existing product into components probably won’t
make a system that serves everybody.

@ethanmuller #SparkboxUnConf This work needs to be done on the
brand/organization level to be useful to everybody.

@ethanmuller #SparkboxUnConf Design systems should explain design.

@ethanmuller #SparkboxUnConf The important part isn’t the comp itself. It’s
the decisions that made the comp.

@ethanmuller #SparkboxUnConf WHAT WHY

@ethanmuller #SparkboxUnConf These what/why combinations belong in your design system.

@ethanmuller #SparkboxUnConf Design systems should start really general.

@ethanmuller #SparkboxUnConf 1. Typography 2. Color 3. Buttons

@ethanmuller #SparkboxUnConf General concepts are more portable across different platforms.

@ethanmuller #SparkboxUnConf Invent design units other than components.

@ethanmuller #SparkboxUnConf The most common unit of design is components.

@ethanmuller #SparkboxUnConf Components don't have to be the only unit
of design.

@ethanmuller #SparkboxUnConf Another unit of design: Skins skin { background
color foreground color link color }

@ethanmuller #SparkboxUnConf Design systems should create clear contracts between design
and development.

@ethanmuller #SparkboxUnConf Get creative about design → development.

@ethanmuller #SparkboxUnConf The End

Designing with Design Systems

Designing with Design Systems

More Decks by Sparkbox

Other Decks in Technology

Featured

Transcript