Design Systems (Smashing eBooks)

after a year of using the term “Scenario” as a key concept in a project, you might discover that different people are interpreting it in entirely different ways.

Content structure is closely linked to the purpose of a pattern, as these examples have shown. Knowing how a module is structured helps us understand how it works.

functional patterns

For the team at Atlassian, the “optimistic” principle is embodied in an “optimistic interface.14” In JIRA, for example, when a user has to move a card from “In progress” to “Done,” cards are allowed to be moved right away, providing an instant response to the user, even though in the background there are a lot of checks and validations, and many th

If you need to get a group of people to follow a creative direction consistently, reliably and coherently, patterns need to be articulated and shared.

The hero banner pattern on a TED.com talk screen can accommodate long titles, which is in line with their design principles.

For example, instead of designing a course list page, I’d think of the “Discovery” area as a whole. What are the behaviors we need to encourage at this stage of the user journey? What are the patterns that can support those behaviors?

Functional patterns are represented as concrete modules of the interface, such as a button, a header, a form element, a menu. Perceptual patterns are descriptive styles that express and communicate the personality of the product visually, such as color and typography, iconography, shapes and animations.

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.