January 10, 2023 Smashing Newsletter: Issue #387
This newsletter issue was sent out to 214,863 subscribers on Tuesday, January 10, 2023.
Editorial
Getting a design system right is hard. There are so many different types of design systems and so many ways of setting up one and maintaining it over time. Fortunately, there is plenty of incredible resources all around design systems. And this newsletter issue is dedicated to just that.
From a comprehensive design system guide and design tokens to deciding on new components and design system canvas: hopefully, you’ll find a few design system gems here.
Coming up next, we have (incredible!) online workshop with Brad Frost on successful design systems, and a few other friendly workshops all around front-end, UX & design, too.
Also, just in case you missed it: the first speakers for SmashingConf Front-End @ SF 2023 have been announced — with Josh W. Comeau, Una Kravets, Shaundai Person, and Jake Archibald will be joining in. Hurry up: there are only a few last-minute early birds left — we’d love to see you there!
— Vitaly (@vitalyf)
1. Design System Questions To Ask
Starting into a meeting or call well-prepared is worth gold to ensure you maximize the time spent talking about the things that really matter. But how to prepare for a call where the subject is as complex as a design system? Whenever Kaelig Deloumeau-Prigent meets up with a new design system team for the first time, he asks them to fill out a short survey a few days before the actual call. This allows him and his clients to make the most of the time they have together on the call.
Kaelig shared his design system template, so you can use and remix it to gather context about a design system. There are no fancy tools involved, just a good ol’ Google Doc that won’t take more than 30 to 60 minutes to fill it in. The answers will help you come up with challenging questions, tailor your advice to the team’s capacity and priorities, and flag topics you might want to research in advance. (cm)
2. Multi-Lingual Branding Design System
Every design system is different. Sometimes it’s about speeding up technical implementations, and sometimes about creating a versatile visual identity for various media. For 125 years, the Olympic Games have conveyed a message of inclusivity, universality and hope. And for their recent undertaking, they decided to reflect these attributes in their new design system.
The result? Unlike many other design systems, Olympics Design System is focused on branding and 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 many guidance notes along the way. And it looks fabulous! (vf)
3. A Spreadsheet Approach To Naming
How do you name your design tokens and components? With all the different conventions available, it can be difficult to choose a strategy for your design system — and to stick to it. Valentino Baptista shares an interesting approach that has worked for him in the last couple of years and that shows how having a rationale behind names simplifies not only the naming process but also maintaining a consistent interface.
For components, Valentino relies on BEM to make the names easy to memorize, flexible, and scalable. For design tokens, he likes to create three levels — references, systems, and components — and keep them as agnostic as possible. At the heart of his approach is a spreadsheet with a column for every layer helps him select, from left to right, all required values for a token. Clever! (cm)
4. Decision-Making Flow Chart
How to figure out if you should add a new pattern to your design system? Jan Klever and his team at Quero Educação developed a flowchart to help them align their decision-making.
The flowchart was inspired by Vanilla Pattern and helps the team identify if a change converges into the creation of a new component, the edition of a component that already exists, or the development of something locally. Both engineers and designers need to validate the solution inside the flow and approve it. By doing this, the team avoids loose ends and ensures that the design system can be considered global. (cm)
5. Upcoming SmashingConfs and Workshops
Every year we bring bright and kind people who care about the web to share what they’ve learned. For 2023, we can’t wait to welcome you to SmashingConf Freiburg 2023 (Sep 4–6, 2023) with adventures into design systems, accessibility, CSS/JS and interface design patterns. Get your early-bird ticket!
We’re also very excited about our very first SmashingConf Front-End @ SF 2023 (May 23–26, 2023), entirely focused on cutting-edge front-end. From accessibility and advanced CSS to JavaScript gems and web performance. With a dash of Tailwind, Next.js and TypeScript. Get your early-bird ticket!
As always, here’s an overview of our upcoming workshops:
- Successful Design Systems Workflow
with Brad Frost. Jan 10 – 24 - Designing For Complex UI Masterclass UX
with Vitaly Friedman. Jan 19 – Feb 2 - New Front-End Adventures, 2023 Edition DEV
with Vitaly Friedman. Feb 8–22 - Universal Principles of Typography Masterclass UX
with Elliot Jay Stocks. Mar 2–16 - Interface Design Patterns UX Training UX
with Vitaly Friedman. Mar 10 – Apr 7 - Figma Auto Layout Masterclass UX
with Christine Vallaure. Mar 27 - Smart Interface Design Patterns Video Course UX
9h-video + UX training on interface design with Vitaly Friedman - Jump to all workshops →
6. The Design System Guide
So you want to create a design system in your organization. Where do you even start? What would be a good process to use to make sure that your efforts don’t hit the wall of tough deadlines and final tweaks? The Design System Guide, kindly released by Romina Kavcic, has got your back.
The guide is a very comprehensive interactive book on the foundations of design systems, design metrics, design tokens, checklists, and handy resources for managing design systems. And if this isn’t enough, you can also explore The Ultimate Design Systems Resources List. This will keep you busy for a while! (vf)
7. Design System Canvas
Once we want to establish a design system in your company, you need a proper plan in place. We need to gather information about the people involved, the process, the assets, affected products, and so many other things. Wouldn’t it be wonderful to have all of these things together in one place?
Fortunately, Paavan Buddhdev has released Design Systems Canvas, a handy little PDF/FigJam checklist that helps you establish an overview of the design system, its process, maintenance, people involved, and everything in-between. A great little one-page plan that might be a perfect starting point for the entire design system journey! (vf)
8. Data Visualization In Design Systems
Not every project will need a sophisticated set of design patterns and guides around data visualization. But what if you actually need one? Fortunately, there are a few wonderful design systems that provide very detailed documentation on just that.
If… design system provides a comprehensive data visualization documentation, with do’s, don’ts, and plenty of examples. Kaizen and Carbon Design System also include very thorough documentation with dozens of external resources that you might find quite helpful. (vf)
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.