Newsletter Subject

NL #365: Design Systems

From

smashingmagazine.com

Email Address

newsletter@smashingmagazine.com

Sent On

Tue, Aug 9, 2022 12:38 PM

Email Preheader Text

On motion and accessibility in design systems, naming conventions, and design systems in enterprise

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](

Marketing emails from smashingmagazine.com

View More
Sent On

01/10/2024

Sent On

24/09/2024

Sent On

17/09/2024

Sent On

10/09/2024

Sent On

03/09/2024

Sent On

27/08/2024

Email Content Statistics

Subscribe Now

Subject Line Length

Data shows that subject lines with 6 to 10 words generated 21 percent higher open rate.

Subscribe Now

Average in this category

Subscribe Now

Number of Words

The more words in the content, the more time the user will need to spend reading. Get straight to the point with catchy short phrases and interesting photos and graphics.

Subscribe Now

Average in this category

Subscribe Now

Number of Images

More images or large images might cause the email to load slower. Aim for a balance of words and images.

Subscribe Now

Average in this category

Subscribe Now

Time to Read

Longer reading time requires more attention and patience from users. Aim for short phrases and catchy keywords.

Subscribe Now

Average in this category

Subscribe Now

Predicted open rate

Subscribe Now

Spam Score

Spam score is determined by a large number of checks performed on the content of the email. For the best delivery results, it is advised to lower your spam score as much as possible.

Subscribe Now

Flesch reading score

Flesch reading score measures how complex a text is. The lower the score, the more difficult the text is to read. The Flesch readability score uses the average length of your sentences (measured by the number of words) and the average number of syllables per word in an equation to calculate the reading ease. Text with a very high Flesch reading ease score (about 100) is straightforward and easy to read, with short sentences and no words of more than two syllables. Usually, a reading ease score of 60-70 is considered acceptable/normal for web copy.

Subscribe Now

Technologies

What powers this email? Every email we receive is parsed to determine the sending ESP and any additional email technologies used.

Subscribe Now

Email Size (not include images)

Font Used

No. Font Name
Subscribe Now

Copyright © 2019–2025 SimilarMail.