NL #365: Design Systems

On motion and accessibility in design systems, naming conventions, and design systems in enterprise settings. Issue #365• August 9, 2022 • [View in the browser]( 💨 [Smashing Newsletter]( Howdy Smashing Friends, 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. [SmashingConf NYC 2022]( [SmashingConf NYC is back]( and we have a few tickets left. 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](. [Enterprise Design System: Everything You Need to Know]( 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. [How to measure your design system?]( 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) --------------------------------------------------------------- From our sponsor Cloudways: Simplified Cloud Hosting With Fast Performance [Cloudways]( Supercharge your websites with managed cloud hosting trusted by 72,000+ businesses that demand high performance, reliability for their online presence, and 24/7 real-time expert support. For a limited time, we’re offering 30% OFF for the next 6 months and up to 30 free website migrations to Cloudways. [Start your free trial now]( and pace up your website’s success. --------------------------------------------------------------- 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. [Design System 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]( Meet [Smart Interface Design Patterns]( our 7h-video course with 100s of real-life examples on UI and UX. [Free preview]( - [Smart Interface Design Patterns — Videos]( a 7h-video course with Vitaly Friedman, - [Interface Design Patterns — Videos + Live UX Training]( Last tickets!, Sep 9 – Oct 7. [Smashing Online Workshops]( 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. [Carbon Design System]( 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](. [What You Need to Know About the New 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) --------------------------------------------------------------- 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](. --------------------------------------------------------------- 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. [Naming conventions for design systems]( 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. [Our Design System Journeys]( 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) --------------------------------------------------------------- 9. New On Smashing Job Board - [User Experience Leader]( at Esko (A Danaher OpCo) (Remote) - [Senior Frontend Web Developer]( at Software Engineering Institute (Pittsburgh , PA) - [Product Design Lead]( at Futurehome AS (Oslo, Remote) --------------------------------------------------------------- 10. Recent Smashing Articles - [Podcast Episode #50: Can You Change A UX Dinosaur?]( - [Rethinking Authentication UX]( - [Migration From jQuery to Next.js: A Guide]( - [Fluid Sizing Instead Of Multiple Media Queries?]( - [Memories Of August (2022 Desktop Wallpapers Edition)]( - [Read more articles on Smashing Magazine →]( --------------------------------------------------------------- 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]( Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](