Design Systems (Smashing eBooks)

A design system contains many other kinds of patterns: user flows (such as completion of forms with errors and

It’s not enough to have a shared understanding of the term button. People must also know why and how to use a button, in what contexts, and the purpose a button can serve.

Find Shared Themes If you’re still in the process of defining your principles, a useful exercise is to ask a few team members (or everyone, depending on size of the team) to write them down individually. What, in their opinion, does good design mean for your product? How would they explain it in five sentences to a new member of the team, in a way

Having a shared language would mean that we have the same approach to naming interface elements and defining design patterns, or that the same names are used in design files and front-end architecture.

There wasn’t a moment’s hesitation; no one got confused or tried to look up the principles in a brand manual. How could they remember them so well? Their principles were simple, relatable, useful — and there weren’t many of them.

The team at Spotify came up with the acronym TUNE (tone, usable, necessary, emotive) to make their design principles more memorable. Asking if a design is “in TUNE” during critiques and QA sessions has become part of Spotify’s design process.

To be most effective, interface inventories should be done regularly. Even if your team maintains a pattern library, new patterns will emerge that need to be folded into the system. If you get into a habit of running inventories every few months, each time shouldn’t take more than a couple of hours. And every time you do it, you understand your sys

An inventory doesn’t have to encompass everything (although the very first one you do should be comprehensive). It can focus on one pattern group at a time, such as promotional modules, headers, or all the product display modules. You can do an inventory focused specifically on typography, or color, or animations.

success messages),

Functional patterns can be simple or they can combine to create more complex patterns. A recipe card is made of a meal title, image, ingredients, and an action button. Each module within the recipe card has its own goal: the title tells us what the meal is; the image provides a preview of the final result; ingredient icons allow us to scan the card