Smashing Magazine - 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

Smashing Online Events
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:


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


10. 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

unsubscribe update preferences view in your browser

Older messages

#364: Design and UX

Tuesday, August 2, 2022

With UX encyclopedia, authentication UX, data visualization, accessibility, and an exquisite look in Leonardo da Vinci's work. Issue #364• August 2, 2022 • View in the browser 💨 Smashing Newsletter

#363: Friendly Little Front-End Tools

Tuesday, July 26, 2022

Useful little helpers for the command line, better thinking, maps, SVG, interface copy and timing. Issue #363 • July 26, 2022 • View in the browser 💨 Smashing Newsletter Dobar dan Smashing Friends, Who

#362: CSS

Tuesday, July 19, 2022

With defensive CSS, conditional styles, CSS styles queries and CSS variables secrets. Issue #362• July 19, 2022 • View in the browser 💨 Smashing Newsletter Buenos días Smashing Friends, The state of

#361: State of the Industry

Tuesday, July 12, 2022

With adaptive pointers, the state of design systems, front-end, component encyclopedia and service design tools. Issue #361• July 12, 2022 • View in the browser 💨 Smashing Newsletter Goedendag Smashing

#360: Web Performance

Tuesday, July 5, 2022

On priority hints, third-parties, speculative prerendering, dealing with LCP and preload scanner. Issue #360• July 5, 2022 • View in the browser 💨 Smashing Newsletter Namastē Smashing Friends,

See Every Room Inside the 2022 Kips Bay Decorator Show House Dallas

Friday, September 23, 2022

Plus, 10 parks every design lover should visit View in your browser | Update your preferences Architectural Digest AD PRO Logo THE 10 PARKS DESIGN LOVERS NEED TO VISIT IN PERSON AD PRO asked design

User Experience Research (UXR) for Engineers

Friday, September 23, 2022

Why should you care what the user says and what to do about it ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

11 Design Studio Supplies That Pros Actually Use

Friday, September 23, 2022

Plus, more sourcing inspiration. View in your browser | Update your preferences Architectural Digest AD PRO logo image One of designers' greatest tools for promoting their business is their own

Make a Button, Randomness CSS, Color Fonts, Sustainable Products, Research vs Vision

Friday, September 23, 2022

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar September 23 2022 How to (not) make a button pustelto.com How

Is Your Next Big Break Going to Be in the Metaverse?

Thursday, September 22, 2022

Plus, this best-selling Pierre Frey pattern is getting an upgrade View in your browser | Update your preferences Architectural Digest AD PRO Logo Pierre Frey Toile de Nantes fabric and wallpaper THIS

Sharpen Your Skills: Finances

Thursday, September 22, 2022

AD PRO's Guide to Professional Development (image) Architectural Digest AD PRO Logo Sharpen Your Skills Let's talk finances. Designers are aptly attentive to details—from finishes and trims to

🎯 Engaging Productivity App Designs + 🏆 Challenge Updates

Thursday, September 22, 2022

Open Up This Week's Designer Digest 📖 First off, we'd like to congratulate CypheroxTechnologies, the winner of our latest 🍟 McDonald's Website Challenge! Also, here's a friendly

QR Codes, Details & Summary, Palette.fm, Validation UX, Watch Design

Thursday, September 22, 2022

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar September 22 2022 QR Codes typefully.com Ever wondered how a QR

This Room-Expanding Design Trick Is Having a Moment

Wednesday, September 21, 2022

Plus, 9 underrated decor ideas pros love View in your browser | Update your preferences Architectural Digest AD PRO Logo Image may contain: Furniture, Chair, Indoors, Room, Interior Design, and Living

Toolbox Weekly 26 - UI Garage, Screely, Tint & Shade Generator, Doppel Me

Wednesday, September 21, 2022

Read on Website Toolbox Weekly 26 Follow on Twitter | Connect on Facebook | Visit Website Hello Creators on the internet, here is this week's stash of cool tools. My favorite this week is "UI