August 9, 2022 Smashing Newsletter: Issue #365
This newsletter issue was sent out to 176,238 subscribers on Tuesday, August 9, 2022.
Editorial
Chances are high that you already have been working on a project that involved some sort of a design system. Over the years, we’ve become very good at breaking down our UIs into reusable components. However, we still haven’t figured out just the right way to name and maintain our components and how to properly apply them at scale.
In this issue, we explore how motion and accessibility fit into a design system, how to deal with naming conventions, and a few useful case studies all around design systems as well.
Design systems also lie at the very heart of our upcoming SmashingConf Freiburg (Sep 5–7) and one-and-only SmashingConf NYC (Oct 10–13), with sessions on how companies maintain their design systems and the mistakes and costs that you could avoid. We’d be happy to see you there!
And for now, let’s dive into everything design systems!
— Vitaly (@vitalyf)
1. Enterprise Design System 101
Introducing an enterprise design system is a lot of work. But it is work that will pay off. Especially with large teams, multiple platforms, and numerous user interfaces to manage, having a single source of truth helps maintain a consistent user experience. So what do you need to consider when building your own? Adam Fard takes a closer look.
As Adam explains, an enterprise design system is a system of best practices, reusable design elements, processes, usage guidelines, and patterns that help reinforce the brand, improve the UX design process, and optimize the user experience.
The building blocks are the collection of code and design components, the building instructions that you’ll usually find inside the box correspond to a collection of guidelines, processes, and best practices that ensure that co-designing and cross-collaboration are seamless. If your enterprise traverses numerous sites or apps, Adam’s writeup is a great opportunity to get familiar with the concept of enterprise design systems. (cm)
2. Measuring A Design System
When you’ve built a design system or are just about to start working on one, metrics might not be the thing you’re concerned about at first sight. However, measuring your design system is more important than you might think. In his article “How to measure your design system?”, Jules Mahe dives deeper into why it’s worth the effort.
Jules explains how to define the KPIs for your design system and how to get quantitative data measurements to learn more about a design system’s efficiency. Qualitative data conducted with the help of surveys and interviews make the narrative more compelling.
Of course, Jules also takes a closer look at how to use the data. As he concludes, measuring a design system is challenging and requires time, but it will be a goldmine and one of the essential levers for your design system’s growth and sustainability. (cm)
3. Design System In 90 Days
When you’re starting to work on a design system, you do it with the intent to build something that lasts, a system that teams love to use and that saves them precious time in their daily work. However, many attempts to build a design system end up in great libraries that don’t get used as much as you had hoped.
But how do you create a design system that becomes an established part of your organization’s workflow? SuperFriendly published a practical workbook in which they take you and your team from zero to a design system that lasts — in 90 days.
Written for cross-disciplinary teams of design, engineering, and product, the workbook consists of a 130-page PDF and FigJam prompts and Figma templates you’ll use to complete activities. No theory, only clear instructions on what to do and how to do it over a 90-day timeframe. At $349, the workbook isn’t cheap, but considering that it can save you about 6–9 months of figuring out what work to do, the investment is definitely worth considering. (cm)
4. Upcoming Online Workshops
That’s right! We run online workshops on frontend and design, be it accessibility, performance, navigation, or landing pages. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.
- Smart Interface Design Patterns — Videos, a 10h-video course with Vitaly Friedman,
- Interface Design Patterns — Videos + Live UX Training Last tickets!, Sep 9 – Oct 7.
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:
- Designing Better UX With Top Tasks Workflow
with Gerry McGovern. Sept 13–27 - Designing Better Products Masterclass UX
with Stéphanie Walter. Sept 21 – Oct 5 - Architecting Design Systems Workflow
with Nathan Curtis. Oct 6–14 - Optimistic UI Masterclass Dev
with Zell Liew. Oct 6–14 - Designing for Emotion Masterclass UX
with Aarron Walter. Oct 17–18 - Designing The Perfect Web Forms UX
with Vitaly Friedman. Nov 17–18 - Jump to all workshops →
5. Accessibility In Design Systems
When building a design system, it’s a good idea to include guidelines and documentation for accessibility right from the beginning. By doing so, you reduce the need for repeat accessibility work and give your team more time to focus on new things instead of spending it on recreating and testing accessible color palettes or visible focus states again and again.
In her article on accessible design systems, Henny Swan explores what an accessible design system needs to include and how to maintain it.
Another handy resource to help you incorporate accessibility efforts comes from IBM. Their open-source Carbon Design System is based on WCAG AA, Section 508, and European standards to ensure a better user experience for everyone. It gives valuable insights into how users with vision, hearing, cognitive, and physical impairments experience an interface and what designers should think about to ensure their design patterns are operable and understandable.
For more, practical tips also be sure to check out the IBM Accessibility Requirements checklist on which Carbon is based. It features detailed tips to make different components and design patterns comply with accessibility standards. A way forward to empowering your diverse user base. (cm)
6. Motion In Design Systems
Motion in design is powerful. It can help to reduce cognitive load, guide users through pages and actions, provide user feedback, improve the discoverability of features, and improve perceived response time. To make full use of motion, the design team at Salesforce created an end-to-end motion language for their products: the Salesforce Kinetics System.
As Pavithra Ramamurthy, Senior Product Designer at Salesforce, explains, the intention behind the Salesforce Kinetics System is to enable the evolution and scaling of kinetic patterns across products, with design system components that are pre-baked with motion right out-of-the-box.
But how do you scale these motion patterns from design system to product? How would teams actually use the artifacts in their daily workflows? Pavithra wrote a case study that takes a closer look to demonstrate the possibilities. Interesting insights guaranteed. (cm)
7. Design System Naming Conventions
Let’s face it, naming things can be hard. Particularly in a design system, where you need to find names for your components, styles, and states that can be easily understood by everyone who works with it. But how to best tackle the task? Ardena Gonzalez Flahavin explores not only why we should care about naming in our design systems but also what we should keep in mind when doing so.
Shayna Hodkin also summarized best practices for solid naming conventions for the different categories in a design system — from colors and text styles to layer styles and components.
Another great read on the topic comes from Jules Mahe. To help you find the right balance between clarity, searchability, and consistency, Jules summarized tips for naming your design files, understanding what you need to name in a design system, and structuring it. Three useful resources for futureproofing your design system. (cm)
8. Design System Case Studies
Having robust components and patterns that can be reused in different situations is the essential idea behind every design system and often seems like the magical wand everyone has waited for to solve challenges and improve collaboration. Henry Escoto, UX & Design at FOX Corporation, offers a perspective on design systems that is a bit different. He claims that it’s actually the practice which can truly make a difference.
In his case study “Our Design System Journeys”, Henry shares in-depth insights into FOX Tech Design’s design systems Delta and Arches to find answers to the following questions: How will a design system truly help your product design? What does it take to build and execute a design system within an organization? How to inject the practice into existing workflows? And last but not least, what is the pay off of such an investment?
Another interesting case study comes from Jan Klever. Jan is a designer at Quero Educação and also fills the role of the organization’s Design System Ops. He shares from his team’s experience how having a dedicated Design System Ops role can help when it comes to maintenance and following up on the product. (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.