October 25, 2022 Smashing Newsletter: Issue #376
This newsletter issue was sent out to 221,814 subscribers on Tuesday, October 25, 2022.
Editorial
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:
- Smashing Hour with Sara Soueidan, a free 1h-session from design systems and SVG to accessibility and pizza toppings.
- Online Meet-up on Design Systems on theming and best practices around design systems.
- Creating and Maintaining Successful Design Systems, a 5×2h online workshop on design systems with Brad Frost.
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)
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.
As always, here’s an overview of our upcoming workshops:
- Pushing CSS to The Limit CSS
with Amit Sheen. Nov 2–10 - Deep Dive On Accessibility Testing Dev
with Manuel Matuzović. Nov 14–28 - Mastering the Design Process Workflow
with Paul Boag. Nov 15–23 - Designing The Perfect Web Forms UX
with Vitaly Friedman. Nov 17–18 - Figma Workflow Masterclass UX
with Christine Vallaure. Nov 17 – Dec 1 - Successful Design Systems Workflow
with Brad Frost. Jan 10 – 24, 2023.
Also, we’ve just updated Smart Interface Design Patterns Video Library, an 9h-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)
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)
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).
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.