Skip to main content

Architecting Design Systems

Nathan Curtis Kevin Powell
On the web
eightshapes.com

On Twitter
@nathanacurtis
@kevinmpowell
Tickets
Get a ticket

Workshop includes:
  • Working examples to take away
  • Interactive sessions
  • Workshop recordings
  • Dedicated Q&A time
  • Smashing Certificate

Workshop, 4×2.5h + Q&A Thu & Fri, April 8–16
09:00 – 11:30 AM PT (Pacific, US) 18:00 – 20:30 CET (Europe)

Scaling High Quality Design, Code, and Documentation.

Design systems are expanding in organizations, spreading design and code across product teams and influencing decision-making at higher and higher levels. This scale makes it increasingly essential to establish an architecture of a design language and code frameworks that can endure and evolve over time.


A design system brings designers, developers, and products together. It is a platform to identify, decide on, and document what to share, whether a visual style, design patterns, front-end UI components, and practices like accessibility, research, content strategy.

This workshop exposes you to essential foundations of this program — the kinds of features, tools, people, and practices involved — to equip you with techniques and activities to harden, spread, and sustain a system yourself.

Over the course of four days, we’ll cover those foundations, from visual style and UI component design to the technical and collaborative practices that get designers and developers to work together to make a robust, high-quality system together.

In This Workshop, You’ll Learn:

Sessions will engage participants in hands-on activities, spark new ideas, and moderate challenging conversations so your team can:

  • Dig into style like color, typography, space and size,
  • Encode visual style in design tokens,
  • Compose components — from atomic elements to sophisticated patterns,
  • Deliver high quality, thoroughly tested features that adopters trust,
  • Build a durable architecture of tools, environments, and frameworks,
  • Scope and sequence what features and tools to build when,
  • Align how to release — version and relate outputs like code and design assets,
  • Document design and code in a way designers and devs value.

$300.00  $400 Register for this workshop → Four 2h live sessions + Q&A. April 8 – 16.
Only 20 early-bird-tickets at this price.

🎪  Save up to 25% on this workshop with Smashing Membership.

Why You Should Attend

All too often, organizations have multiple products that are disjointed and inconsistent. Multiple design teams and development teams suffer from doing duplicative work, resulting in a customer journey that’s meant to be cohesive but ends up expensive or impossible to align and evolve together.

With a design system, your teams can take advantage of common design, code, and documentation tools to align their work. Design systems save organizations time and money and foster positive energy among those who value efficiency and reuse.

With a design system as a backdrop, you will see designers, developers, and product teams align and bridge gaps across a portfolio. All of that leads to the ultimate goal: creating a cohesive, high-quality experience for your customers delivered more efficiently.

Nathan and Kevin have worked together and independently on over 30 design systems in the past decade. They’ll bring deep knowledge with a nuanced understanding of how systems work in companies of varying scale, business types, and organization models.

Who Should Attend

Designers, front-end developers, product managers, content strategists, their leadership, and anyone interested in learning how to inject design systems into their broader organization. Content will evoke both design and code considerations, at times together, to bridge disciplines to share visual style, UI components, and documentation.

What Hardware/Software Do You Need?

To get the most out of the workshop, you’ll need access to Zoom (for audio, video and screensharing), Mural (for hands-on activities), and Slack (using a SmashingConf private channel for workshop communications). You will not use design tools (such as in Figma or Sketch) or code in a code editor. Instead, activities will be collaborative in a team or full classroom setting using Mural.

About Nathan and Kevin

Nathan co-founded EightShapes with Dan Brown in 2006. He’s passionate about information architecture, UX, front-end dev, and leads design systems consulting at EightShapes.

Kevin is an interaction designer and principal front-end developer with a passion for rendering modern designs through the latest production techniques. Kevin consults with in-house dev teams to implement design systems and fine-tune their prototyping and production environments.

Register for this workshop →

Time & Schedule

This workshop is split over four days. Our virtual doors open at 8:45, we start at 9 AM PT.

The workshop sessions will run on the following days:

  • Thu, April 8, 09:00 – 11:30 AM PT
  • Fri, April 9, 09:00 – 11:30 AM PT
  • Thu, April 15, 09:00 – 11:30 AM PT
  • Fri, April 16, 09:00 – 11:30 AM PT

Day 1:

8:45 am PT
Virtual doors open, registration, chat and introductions.

9:00 am – 10:00 am
Introductions, defining design systems, and architecting UI components

10:00 am – 10:15 am
Break

10:15 am – 11:15 am
More architecting UI components

11:15 am – 11:30 am
Q&A with Nathan and Kevin on the day’s material. Networking!

Day 2:

8:45 am PT
Virtual doors open, registration, chat and introductions.

9:00 am – 10:00 am
Visual style, color, and design tokens.

10:00 am – 10:15 am
Break

10:15 am – 11:15 am
Typography, space, size, and more design tokens

11:15 am – 11:30 am
Q&A with Nathan and Kevin on the day’s material. Networking!

Day 3:

8:45 am PT
Virtual doors open, registration, chat and introductions.

9:00 am – 10:00 am
Technical architecture and UI component testing

10:00 am – 10:15 am
Break

10:15 am – 11:15 am
Releases, versioning and breaking changes

11:15 am – 11:30 am
Q&A with Nathan and Kevin on the day’s material. Networking!

Day 4:

8:45 am PT
Virtual doors open, registration, chat and introductions.

9:00 am – 10:00 am
UI component documentation sites & content

10:00 am – 10:15 am
Break

10:15 am – 11:15 am
Putting it together: a step-by-step UI component workflow

11:15 am – 11:30 am
Q&A with Nathan and Kevin on the day’s material. Networking!

Register for this workshop →