Smashing Magazine - #376: Design Systems

With accessible design systems, Figma kits and real-life examples. Issue #376 October 25, 2022 View in the browser 💨

Smashing Newsletter

Dobryi vechir Smashing Friends,

There is a moment in time for every complex project when design teams start thinking about setting up a design system. The reasons are often the same — alignment, reusability, consistency; and so are problems that start creeping out eventually. Usually, design systems decay; they are used sporadically, and often they aren’t as helpful and practical as they could be.

In this newsletter, we explore useful resources and examples for people who work with a design system. We’ll explore features, components, and things to keep in mind when building accessible design systems. Hopefully, some of these pointers will help you create a more successful design system.

Smashing Hour with Sara Soueidan

We also have a couple of events lined-up, all around design systems:

Let’s get to the bottom of design systems — we’d love to see you there!

Vitaly (@vitalyf)


1. Components Encyclopedias

Wouldn’t it be fantastic to be able to search for a particular component — let’s say an accordion — and check how it’s designed and implemented across design systems out there?

Components Encyclopedias

The Component Gallery allows you to do just that. It’s an up-to-date repository of interface components based on real-life examples, with search, a list of features for each component and its name all gathered in one place.

Storybook Component Encyclopedia serves the same purpose, and references thousands of components from UI engineering teams around the world, along with links to Storybook repositories, all grouped, sorted and searchable. A goldmine! (vf)


2. Accessibility And Naming Conventions

Bringing together everything that’s required to manage a healthcare business digitally, Nordhealth creates software that aims to redefine healthcare. As such, their design system Nord is heavily focused on accessibility.

Nord

Nord offers plenty of customization options, themes, and a fully-fledged CSS framework, plus dedicated guides to naming conventions and localization, for example. Unfortunately, the Nord Figma Toolkit isn’t open-sourced yet. (cm)


From our sponsor

Write It. Show It. Rock It.

iA Presenter
iA Presenter’s text-based interface cuts creation time to a minimum. The design engine automatically adjusts the layout of your slides to your phone, PC or projector aspect ratios. Presenting feels like karaoke. A fresh, fast and fun way to create and hold presentations. The first 1,000 SmashingMag subscribers get direct access to the beta.


3. Comprehensive Live Examples

Gusto serves more than 200,000 businesses worldwide, automating payroll, employee benefits, and HR. To enable their team to develop cohesive and accessible experiences for Gusto’s platform, the Workbench design system encompasses Gusto’s design philosophy, design tokens, creative assets, React components, and utilities — and documentation to tie it all together.

Workbench

What really stands out in the Workbench system are the comprehensive live examples that explain exactly how components should be used in different contexts. Do’s and don’ts, visual explanations, and implementation details ensure that both designers and developers working with Workbench can use the design system effectively. For even more convenience, there’s also a Gusto Workbench VS Code Extension with common snippets for UI components. (cm)


4. Branding And Multi-Lingual Design

The Olympic Games are probably one of the most widely recognized brands in the world. Since the birth of the modern Games more than 125 years ago, hundreds of people have grown and enhanced the Olympic brand. To increase consistency, efficiency, and impact across all that they do, the IOC hired a Canadian agency to create a comprehensive branding-focused design system that conveys the timeless values of the Olympic Games and propels the brand into the future.

Evolving The Olympic Brand

The Olympic design system is focused on identity design, but also provides examples of illustrations and graphic elements. It shows how to manage multi-lingual challenges and how to use typography, with plenty of good and not-so-good examples and guidance notes along the way. (cm)


5. Frontend & UX Online Workshops

As you probably know, we run online workshops on frontend and design, be it accessibility, performance, navigation, or design systems. In fact, we have a couple of new workshops coming up soon, and we thought that, you know, you might want to join in as well.

Smashing Online Events
With online workshops, we aim to give you the same experience and access to experts as in an in-person workshop from wherever you are.

As always, here’s an overview of our upcoming workshops:

Also, we’ve just updated Smart Interface Design Patterns Video Library, an 8h-video course on interface design with 100s of real-life examples. With live UX training and 5 new videos added every year.


6. Accessible Design Systems

A good design system includes documentation, guidelines, and implementation notes for accessibility. But what do you need to consider when embedding accessibility throughout a design system? Henny Swan dives deeper into accessible design systems, what they should include, who creates and maintains them, and what benefits they bring along.

Accessibility Beyond Compliance Playbook

To shift the understanding of accessibility from one of basic compliance to a truly inclusive, human-centered experience, the team at AdHoc released their Accessibility Beyond Compliance Playbook. It explores several ways to improve accessibility — from the immediate task of building accessible products to creating teams of people that underscore an Accessibility Beyond Compliance mindset. (cm)


7. Custom Design Attributes

Pure and contrasting nature, digital society, and smart, independent-minded people are the core values behind the brand Estonia. The Brand Estonia design system maps the country’s strengths and shows how to express them through writing, designs, presentations, and videos.

Estonia

Stories, core messages, facts, and plenty of examples and templates provide a solid foundation for creating texts and designs across the brand — be it on the web, in social media, or print. A special highlight of Estonia’s design system lies on authentic photos and custom design attributes such as wordmarks and boulders to underline the message. (cm)


8. Design Systems For Figma

Atlassian, Uber, Shopify, Slack — these are just a few of the design systems you’ll find on Design Systems For Figma. Curated by Josh Cusick, the site is a growing repository of freely available Figma kits of design systems — grouped, organized, and searchable.

Design Systems For Figma

Not featured in the collection, but worth looking into as well, is the GOV.UK design system Figma kit. It focuses specifically on complex user journeys and web forms. Lots of valuable insights and inspiration are guaranteed. (cm)


From our sponsor

Start Accessibility Testing In Just Minutes With The Free axe DevTools Extension

Deque
Is your website accessible to people with disabilities? Download the free axe DevTools Chrome extension to build a more accessible website and get instant results with detailed information on your web accessibility issues (and how to fix them). No accessibility experience necessary.


9. Visual Examples Of Do’s And Don’ts

Audi UIs range from websites to applications for a particular service. The Audi design system provides a joint set of components, modules, and animations to create a well-balanced, system-wide user experience — from the app to the vehicle.

Audi

Along with brand appearance guidelines and UI components, a handy feature of the design system is its comprehensive set of visual examples of how a component should (and shouldn’t) be used in Audi’s interfaces. There is also a Audi UI Kit for Figma and a Sketch UI library that ensure that designers use the most up-to-date components and icons in their products. (cm)


10. Content Guidelines And UX Writing

Deutsche Bahn, the national railway company of Germany, is one of the most recognized brands in Germany. With the help of their DB Digital Product Platform, the company enables developers, designers, and copywriters to build flexible digital experiences with an emphasis on mobility.

DB Digital Product Platform

The design system features content guidelines, accessibility considerations, code examples, components, and contextual examples of how to use them. It also provides guidelines around UX writing and helpful visual guides to accessibility and logo. Everything is open source on GitHub and NPM. (cm)


From our sponsor

Northwestern’s Online MS in Information Design and Strategy

Northwestern’s Online MS in Information Design and Strategy
Prepare for a range of dynamic communication roles and build the skills needed to lead communication strategy, translate complex data, and drive user interactions. Choose from specializations in content strategy, UX/UI, communication with data, and learning design. Learn more.


11. New On Smashing Job Board


12. Recent Smashing Articles


That’s All, Folks!

Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!


This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris Lješnjanin (il).


Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You
rock.

Follow us on Twitter Join us on Facebook

unsubscribe update preferences view in your browser

Key phrases

Older messages

Meet “Understanding Privacy”, a new Smashing Book

Thursday, October 20, 2022

Meet “Understanding Privacy”, our new book on privacy, by Heather Burns. What privacy really is, beyond scary headlines. Understanding Privacy • View in the browser 💨 Understanding Privacy by Heather

#375: UX Workflow

Tuesday, October 18, 2022

With guidelines for design critique, design workshops, product design interview process, UX sketches and UX patterns. Issue #375• October 18, 2022 • View in the browser 💨 Smashing Newsletter Góðan

374: Obscure Treasures Of The Web

Tuesday, October 11, 2022

With QR codes, visualizations, dark secrets podcasts, type treasures and Mini Tokyo 3D. Issue #374• October 11, 2022 • View in the browser 💨 Smashing Newsletter Howdy, Smashing Friends! New York, New

#373: Web Performance

Tuesday, October 4, 2022

With critical CSS, encoding quality settings, resource hint validator and memory debugging. Issue #373 • October 4, 2022 • View in the browser 💨 Smashing Newsletter Salām Smashing Friends, Over the

Meet “Smart Interface Design UX Checklists” (166 cards)

Thursday, September 29, 2022

Meet “Smart Interface Design Patterns Checklists”, 166 UX checklist cards to design and build better interfaces, faster. It's here! The Smart Interface Design Patterns Checklists, 166 UX checklist

17 Interior Design Schools Worth Applying To

Friday, January 27, 2023

Plus, if you loved "The White Lotus" palazzo, you'll want to bookmark this Jacques Garcia sale View in your browser | Update your preferences Architectural Digest AD PRO Logo grand

Looking back at Balsamiq’s 2022

Friday, January 27, 2023

Like many of you, we spent the past few weeks reflecting, planning, and starting new projects. The latest news from Balsamiq: Reflections on 2022 and a look ahead at this year. Trouble viewing? View it

From Giancarlo Valle, Young Huh, and More: 8 Design Collabs We’re Loving Right Now

Friday, January 27, 2023

Plus, more sourcing inspiration. View in your browser | Update your preferences Architectural Digest AD PRO logo image A look at the latest collection drops in furniture, rugs, and more. Big Buds Rug

Latest stories

Friday, January 27, 2023

Submit Story Learn how to speak a new language like a local with BabbelSPONSORED Babbel is the top language-learning app that helps users start speaking a new tongue in just three weeks. That's

Neurodiversity Design, Type Trends, Astro 2.0, Linear Design, Prompt-Driven Design

Friday, January 27, 2023

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar January 27 2023 Neurodiversity Design System neurodiversity.

Lagoons, Luxury Bunkers, and More Real Estate Trends for 2023

Thursday, January 26, 2023

Plus, 9 pink paint shades designers can't live without View in your browser | Update your preferences Architectural Digest AD PRO Logo a sunroom with a pink sofa and a floor painted pink and white

Latest stories

Thursday, January 26, 2023

Submit Story Join Noom, the psychology-based program for lasting healthy outcomesSPONSORED Getting healthier means changing your lifestyle. Noom Weight helps users lose weight in a sustainable way

CSS Wishlist, Reviews And Ratings, Vasa Disaster, Product Design, UX Death

Thursday, January 26, 2023

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar January 26 2023 CSS Wishlist 2023 daverupert.com Here's my

An Iconic Frank Lloyd Wright Desk Enters Its WFH Era

Wednesday, January 25, 2023

Plus, 14 gardens every design lover must see in person View in your browser | Update your preferences Architectural Digest AD PRO Logo AN ICONIC FRANK LLOYD WRIGHT DESK DESIGN ENTERS ITS WFH ERA With

Latest stories

Wednesday, January 25, 2023

Submit Story Join Noom, the psychology-based program for lasting healthy outcomesSPONSORED Getting healthier means changing your lifestyle. Noom Weight helps users lose weight in a sustainable way