Smashing Newsletter: Issue #456

Editorial

Naming is hard. As designers and developers, we often struggle to find the right name — for design tokens, colors, UI components, HTML classes, and variables. Sometimes names are too generic, so it’s difficult to understand what they mean. Or too specific, leaving little room for flexibility and re-use.

In this newsletter, we want to get to the bottom of this. This issue is dedicated to naming — how to choose the right names, naming conventions, and common names for UI components.

If you’d like to dive deeper into naming and design tokens, we have an upcoming design token workshop with Nathan Curtis starting on June 6–14, along with a few other online workshops for designers and front-end engineers.

And, of course, we also have our lovely SmashinConfs 2024 coming up later this year, now with more speakers and workshops announced:

SmashingConf Freiburg 2024 🇩🇪 — The Web, Sep 9–11
SmashingConf NY 2024 🇺🇸 — Front-End & UX, Oct 7–10
SmashingConf Antwerp 2024 🇧🇪 — Design & UX, Oct 28–31

Perhaps your friends and colleagues would love to join as well? Please spread the word — and of course, we’ll be absolutely delighted to welcome you to a very special Smashing experience later this year!

— Vitaly

1. Inspiration For Naming

Naming things needn’t be hard. If you’re looking for some inspiration for naming HTML classes, CSS properties, or JavaScript functions, Classnames provides you with ideas that get you thinking outside the box.

The site provides thematically grouped lists of words perfect for naming. You’ll find terms to describe different kinds of behavior, likeness between things, order, grouping, and association, but also themed collections of words that wouldn’t instantly come to one’s mind when it comes to code, among them words from nature, art, theater, music, architecture, fashion, and publishing. (cm)

2. Naming Conventions

What makes a good name? Javier Cuello summarized a set of naming best practices that help you name your layers, groups, and components in a consistent and scalable way.

As Javier points out, a good name has a logical structure, is short, meaningful, and known by everyone, and is not related to visual properties. He shares do’s and don’ts to illustrate how to achieve that and also takes a closer look at all the fine little details you need to consider when naming sizes, colors, groups, layers, and components. Useful tips that make naming a lot more straightforward. (cm)

3. Naming Design Tokens

So, how to build a flexible design token taxonomy that works across different products? That was the challenge that the team at Intuit faced. Intuit, the company behind popular products such as Mailchimp, Quickbooks, TurboTax, and Mint, has developed a flexible token system that goes beyond the brand theme to serve as the foundational system for a wide array of products.

Creating a flexible design token taxonomy for Intuit’s Design System

Nate Baldwin wrote a case study in which he shares valuable insights into the making of Intuit’s design token taxonomy. It dives deeper into the pain points of the old taxonomy system, the criteria they defined for the new system, and how it was created. Lots of takeaways for building your own robust and flexible token taxonomy are guaranteed. (cm)

4. Naming Colors

When you’re creating a color system, you need names for all its facets and uses. Names that everyone on the team can make sense of. But how to achieve that? How do you bring logic to a subjective topic like color? Jess Satell, Staff Content Designer for Adobe’s Spectrum Design System, shares how they master the challenge.

As Jess explains, the Spectrum color nomenclature uses a combination of color family classifiers (e.g., blue or gray) paired with an incremental brightness value scale (50–900) to name colors in a way that is not only logical for everyone involved but also scalable and flexible as the system grows.

Another handy little helper when it comes to naming colors is Color Parrot. The Twitter bot is capable of naming and identifying the colors in any given image. Just mention the bot in a reply, and it will respond with a color palette. (cm)

5. Upcoming Front-End & UX Workshops

That’s right! We run online workshops on frontend and design, be it accessibility, performance, or design patterns. 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.

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 a quick overview:

Design Token and UI Component Architecture workflow
with Nathan Curtis. June 6–14
Accessibility for Designers ux
with Stéphanie Walter. June 3–12
Designing For Complex UI Masterclass ux
with Vitaly Friedman. June 20 – July 2
Advanced Modern CSS Masterclass dev
with Manuel Matuzović. June 24 – July 8
Design Patterns For AI Interfaces ux
with Vitaly Friedman. July 9–23
Fast and Budget-Friendly User Research and Testing workflow
with Paul Boag. Jul 11–25
Creating and Maintaining Successful Design Systems workflow
with Brad Frost. Aug 27 – Sept 10
Jump to all workshops →

6. Common Names For UI Components

Looking at what other people call similar things is a great place to start when you’re struggling with naming. And what better source could there be than other design systems? Before you end up in the design system rabbit hole, Iain Bean did the research for you and created the Component Gallery.

The Component Gallery is a collection of interface components from real-world design systems. It includes plenty of examples for more than 50 UI components — from accordion to visually hidden — and also lists other names that the UI components go by. A fantastic resource — not only with regards to naming. (cm)

7. Variables Taxonomy Map

A fantastic example of naming guidelines for a complex multi-brand, multi-themed design system comes from the Vodafone UK Design System team. Their Variables Taxonomy Map breaks down the anatomy and categorization of a design token into a well-orchestrated system of collections.