• 1.For that I recommend About Face: The Essentials of Interaction Design by Alan Cooper; Lean UX: Applying Lean Principles to Improve User Experience by Jeff Gothelf and Josh Seiden; and Designing for the Digital Age: How to Create Human-Centered Products and Services by Kim Goodwin.

• A design system is a set of interconnected patterns and shared practices coherently organized to serve the purpose of a digital product. Patterns are the repeating elements that we combine to create an interface: things like user flows, interactions, buttons, text fields, icons, colors, typography, microcopy. Practices are how we choose to create, capture, share and use those patterns, particularly when working in a team.

• “Each pattern describes a problem that occurs over and over again in our environment, and then describes the core of the solution to that problem.”

• direction.” 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.

• To extend the analogy with language, functional patterns are a bit like nouns or verbs — they are concrete, actionable parts of the interface; whereas perceptual patterns are similar to adjectives — they are descriptive.

• From a front-end perspective, modules always have a basis in HTML, and perceptual patterns are typically CSS properties.

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

• Here’s a fun test. Try asking people in your company what your design principles are. If no one can remember them, chances are they can be improved. To be memorable, the principles must be in constant use. They should be referred to in everyday conversations, included in presentations and design critiques, displayed where they can be seen. And to be in use, they must be genuinely useful, possessing the qualities above.

• 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 understand the purpose of a pattern, try focusing on what it does rather than what you think it is. In other words, try to find an action that best describes the behavior a pattern is designed for. Describing a pattern with a verb rather than a noun can help you to broaden potential use cases for a pattern and define its purpose more accurately.

• Sometimes such qualities are seen as styling or the skin of a product — a layer on top. But to be effective they must live not only on the surface but at the core of the brand, and they should evolve with the product. When effective, perceptual patterns become powerful product differentiators.

• Perceptual patterns can be concentrated in the smallest details. In his book Microinteractions12, Dan Saffer coined the term “signature moments” — small interactions that become product differentiators, such as “an elegant ‘loading’ animation or a catchy sound (‘You’ve got mail!’).” Signature moments are especially powerful when they have meaning or a story behind them. For example, the subtle ripple effect on TED’s play button was inspired by the iconic drop animation of their videos’ intros.

• At the core of his book is the observation that many great buildings (Chartres, the Alhambra, Brunelleschi’s Dome) weren’t created by one master architect working laboriously at the drawing board. They were built by groups of people who all had a deep, shared knowledge of the design patterns that were capable of bringing those buildings to life.

• James Britton, an influential British educator, explains in Language and Learning1 that by conferring names on objects, we start “bringing them into existence,” just like children use language “to draw out of nothingness” the world around them. Similarly, if an interface object doesn’t have a proper name — a name that is known and makes sense to people in your team — then it doesn’t really exist in your system as an actionable unit to work with.

• A “Whisperbox” module on FutureLearn was designed to be promotional without being too distracting. When another team needed something more prominent, they created a “Boombox.” “Whisperbox” and “Boombox” are a pair, which helps to make the vocabulary more connected and memorable.

• If you come up with a good name, remember to give people kudos and celebrate it. It’s those moments that help unite the team and make collaborative naming part of your culture.

• Set up a dedicated space on a wall to represent your design system visually: a pattern wall.

• But until you start calling a pattern by its actual name, it doesn’t exist in your system as a solid actionable block to work with. And every time you do use the name, you strengthen the element you call on, and evolve your design language.

• Naturally, it also means that names in the design file and code match.

• Establishing a shared language is always a gradual, piecemeal process. Sometimes it will be messy and slow, but if you just keep going, you’ll see your language evolving and strengthening. Eventually, the effects will ripple out within your team, with other teams, and with stakeholders, as they start to understand what you’re trying to achieve and join you in this process.

• To get support from the business, you need to demonstrate that an effective design system will help to meet business goals faster and at lower cost. In other words, you need to make a business case for it.

• Design is a form of language — through design we communicate a mental model of the product.

• Consistency helps to build trust.

• At FutureLearn, the most effective presentations had a “problem—solution” format.

• Consider how Slack supports ways of working which are more collaborative compared with email or other chat apps. Or think how Tinder promotes casual, commitment-free relationships with its swiping interaction. Products can be designed around similar user goals and needs, while encouraging entirely different behaviors.

• With variants, you would normally have a default pattern with the core styles. Variants would have additional styles. It’s important to know which features are core to the pattern, and which are specific to the variants. Then you can predict how a change in one of them will affect the others.

• In Marvel’s design system11, “flat” buttons are used to signify “necessary or mandatory actions”; “ghost” buttons are used to signify “optional, infrequent or subtle actions.” Flat buttons can be used alongside each other, when actions are equally important. I like this distinction because it’s simple, clear, and specific to the button’s purpose.

• It’s a bit like gardening — the longer you leave it, the harder it is to get it into a good shape.

• Signature patterns2 is a useful kick-off exercise to get the whole team (not only designers) on the same page, especially if they’re not used to thinking about perceptual patterns. Ask each person to write down the most memorable and distinct elements that make your product feel a certain way.