WordPress US 2019 – Design Systems: Crafting For Crafters – Jon Quach

Jon Quach – https://jonquach.com/

Design Systems are important but can be complicated and hard to understand.

What Are Design Systems?

They are about process. They make up the interfaces and designs of a product. They help answer many design and development questions.

What Are The Challenges of Design?

There can be a breakdown of handoff between design and development. Things don’t always end up the way they were intended. No documentation. Nobody knows how developer created things. It’s not because people are bad at their jobs or don’t care. Lacking the understanding of how user interfaces and experience should work together.

How Do You Create A Design System?

You create a Design System to empower the team building the product. End users don’t care about a Design System, it’s not for them. Creating reusable components that translate across Design/Code/Content.

Design

• Color palettes
• Organize layers and components
• Create design elements which can be reusable
• Establishing design symbols

Code

• How components are builts
• Until code is written is just a concept
• There are components in code as well. Need to be built to be reused.

Content

• Represents the brands voice
• Communicates intent
• Having good clear content enables opportunities to connect with users

Process

• Encourages crafters to work together
• Allows components to evolve

Establishing A Design System

• Start small, setup a pilot project
  • Make a solid case based on past experiences
• “The Technical Guide to Design Systems”

Integration

This can be the most difficult piece to establish given existing work processes. Design systems can’t be developed in isolation. All areas need to have input.

1. Central place to manage it
2. Design & document together
   1. prevents redundant work or incorrect work
   2. allow for more simple designs
   3. collaborate on name conventions to establish consistency
   4. Helps team members feel heard and valued
3. Keep Documentation Updated
   1. as you start using them and things need to change.

Develop & Test Early

1. This allows for faster changes
2. Create a dedicated UI development space
3. The sooner you can resolve things, the easier it will be to incorporate all components
4. Recognize What You Can Do
   1. Don’t try to make changes that are outside your skillset

Build

1. Designs shouldn’t just move on to their next project, they can still develop and refine the design components
2. A collaborative workflow makes all the difference
3. Developers should provide early access to feature for early review and testing
4. Making things easier to test is crucial for everyone

Evangelize

• Cultivate a collaborative environment for work