Building Scalable Design Systems and Style Guides
Nathan Curtis · Wednesday, November 2 · 8:30am – 5:30pm · in Pacific E
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.
Nathan led this workshop to rave reviews at last year's UI20.
The Day’s Agenda
Planning your 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 design system worksheet.
- Involve teammates to develop content, refine design standards, and advocate the mission.
Designing the system
- Define your system with reference designs, starting with style tiles and concepts.
- Deconstruct system parts and code including core visual language, components, and layouts.
- Organize your library into topics and assets everyone understands.
Documenting your design system
- Create artifacts to achieve consistency with style guides, system sites, and guidelines.
- Tokenize design options and decisions for use across products and platforms.
- Showcase pages and elements that you’ve made easily to design and build.
Establish a solid design system practice
- Prioritize the work with sprints, backlogs, and team notifications.
- Conduct design clinics, demos, and audits to maintain standards and team cohesiveness.
- Foster design and development convergence across large, multi-disciplinary teams
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 team members.
You’ll see 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
Achieve product cohesiveness
Deconstruct your system parts to re-use across products, leading to more consistent and delightful user experience.
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.
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.
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.
Build a design system and style guide
Throughout the day, Nathan will share great stories of how teams successfully built and disseminated design systems across their organizations. He’ll share the serious mistakes others have made (and how to avoid making them yourself).
You’ll spend a large part of the day building style guides, system sites, and guidelines to use as a starting point to achieve consistency across your products. You will go back to work with a solid roadmap for adopting a design system within your organization.
Go back just a few years: Nobody was talking about how you build a library of your own application and organization-specific design elements. Nobody, that is, except Nathan Curtis, who’s been practicing and speaking on design systems for 10 years, and, in 2009, wrote Modular Web Design: Creating Reusable Components for User Experience Design and Documentation . Nathan saw how the real value of pattern libraries comes when organizations can use them to create their own standards and consistent designs.
Nathan Curtis has been swimming in the deep end of the UX pool since 1996, when he started focusing his creative energies on IA, ID, usability, and front-end development. He's also an entrepreneur at heart, having founded, along with Dan Brown, the renowned EightShapes in Washington, DC, where he continues to make a splash today.
Nathan’s been a top workshop speaker at the User Interface Conference before and his All You Can Learn seminars are loved by our audiences. We’re excited to bring him back to deliver this brand new in-depth workshop. You’ll see why.
On Tuesday, Nathan will give a featured talk, And You Thought Designing Buttons Was Easy.