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.
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?
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 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’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.
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.
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.
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.
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.
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.
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
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.
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.
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
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
