Building Scalable Design Systems and Style Guides

Building Scalable Design Systems and Style Guides · Monday, November 2 · 8:30am – 5:30pm · Pacific F–H

Photo of Building Scalable Design Systems and Style Guides

Build a cohesive cross-product experience with defined standards and workflows. Establish processes to set up, sustain, and spread your system. Make critical design changes in one place that seamlessly unfold everywhere. Discover inconsistencies early with team “design shares” and audits.

The Day’s Agenda

In the Morning

The benefits of a design system

  • Create a cohesive experience across products with standards, assets, and workflows
  • Explore the who, what, where, and how of your design system with a design system worksheet
  • Deconstruct system parts and code including core visual language, components, and layouts

Define the system

  • Outline what’s in/out of scope and who you will work with
  • Create artifacts to achieve consistency with style guides, system sites, and guidelines
  • Align your development, product, and marketing team around a systems roadmap

In the Afternoon

Establish your design system

  • Define your system with reference designs, starting with style tiles and concepts
  • Choose the pages and elements to normalize across many disparate products
  • Foster design and development convergence across large, multi-disciplinary teams

Sustain and spread a system

  • Prioritize the work with sprints, backlogs, and team notifications
  • Conduct design clinics, demos, and audits to maintain standards and team cohesiveness
  • Involve teammates to develop content, refine design standards, and advocate the mission

Reduce Chaos Through Structure and Processes

Deliver a cohesive experience across all product lines

All too often, organizations have multiple products that are disjointed and inconsistent. With a design system, your teams will have a framework to align on standards and processes.

Codify a system to encourage re-use across products

If you have multiple design teams and development teams doing duplicative work, it results in a decentralized system that’s expensive to maintain and evolve. The design system will save your organization time and money.

Align design and development teams

By identifying the reusable standards and elements, you create a common language that speeds communication between teams members.

You’ll learn how to…

  • Create a library to articulate standards across all product lines
  • Improve your design conversations with reusable components
  • Identify and prioritize patterns for product consistency
  • Communicate across teams using a shared design vocabulary
  • Run design shares to identify product inconsistencies
  • Use cross-product standards to design and build better products

Optimize Design and Development with the Design System

Speed up the product development process

Collaborate on a design system composed of a style guide and code assets that your developers will recognize immediately. Not only will your developers know what you're looking for, but it's likely the code is largely reusable, which means you'll release products faster.

Streamline cross-team communication

With a design system, you will identify the standards, patterns, and components that become shorthand in the design process, bringing the design discussions to a higher level.

Influence product strategy

Once the system comes together, you will have designers, developers, and product managers aligned on common design standards and motivated to bridge the gap between products.

Achieve product cohesiveness

Deconstruct your system parts to re-use across products, leading to more consistent and delightful user experience.

Building Scalable Design Systems and Style Guides,

Photo of Building Scalable Design Systems and Style Guides

On Tuesday, Nathan Curtis presents A Tour of Today’s Online Style Guides.

↑ To the top of ’s workshop description

There are 3 other options on Monday

Get all 9 talks for just $99
Don’t wait. The price goes up January 24.