More on this book
Community
Kindle Notes & Highlights
Throughout the book, I distinguish between functional patterns related to behaviors, and perceptual patterns related to brand and aesthetics.
Functional patterns or modules These terms are used interchangeably throughout the book, to refer to tangible building blocks of the interface, such as a button, a header, a form element, a menu.
Perceptual patterns or styles These are more descriptive and less tangible design patterns, such as iconography styles or colors and typography, typically used to create a certain kind of aesthetic ...
This highlight has been truncated due to consecutive passage length restrictions.
In this book, by design system I mean a set of connected patterns and shared practices, coherently organized to serve the purposes of a digital product.
A pattern is a recurring, reusable solution that can be applied to solve a design problem.
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.
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.
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.
A design system can be considered effective when it combines cost-effectiveness in the design process, and efficiency and satisfaction of the user experience in relation to the product’s purpose.
Let’s take a look at a couple of examples of design principles and how they can be made more practical. Vague: “Make it clear.” Practical: “Only one number 1 priority. What do you want your users to see and do first?” Vague: “Make it simple.” Practical: “Make it unbreakable. Just like a children’s toy, make sure it is designed for exploration and impossible to mis-tap.”6 Vague: “Make it useful.” Practical: “Start with needs. If you don’t know what the user needs are, you won’t build the right thing. Do research, analyze data, talk to users. Don’t make assumptions.”7
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.
When a pattern is not defined and shared in the team, you start recreating it to accomplish similar goals: another promotional module, another news feed, another set of sharing links, another dropdown. Before you know it, you end up with 30 different product displays and pop-over menus.
The interface inventory process4, described by Brad Frost, has become a popular way to start modularizing an interface. The idea is simple. You print out the screens of your interface on paper, or collect them in Keynote or PowerPoint. You then separate out various components either by cutting them out or pasting them in Keynote.
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.
We’re expected to design content-first, but at the same time we’re expected to build modules in a way that can fit any kind of content. A way to do this is not necessarily by starting with content, but with the purpose.
Perceptual patterns are always present, even if they’re not purposefully designed. Even a purely functional tool has an aesthetic.
Whether you use a person or a place as a starting point, the goal is to end up with a few (Walter recommends around five to seven) traits that best describe your brand, along with the traits to avoid. For MailChimp, those traits include “Fun, but not childish. Funny, but not goofy. Powerful, but not complicated. Hip, but not alienating. Informal, but not sloppy.”
Sometimes it can have the opposite effect — there’s a fine line between consistency and uniformity.
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.
Once you name an object, you shape its future; if you give it a presentational name, its future will be limited because it will be confined by its style: a “pink” button can only be pink.
The best names offer guidance or inspiration for where to use a specific pattern. It’s easy to remember there can be many minions (on a page) but only one boss. People enjoy using them and we don’t need to enforce guidelines because they come with the name.
Pattern library Functional patterns Perceptual patterns Airbnb DLS Components Foundation Atlassian5 Components Foundations BBC GEL6 Design Patterns Foundations IBM Carbon7 Components Style Lonely Planet Rizzo8 UI components Design Elements Marvel9 Components Design Office Fabric10 Components Styles Salesforce Lightning Design System11 Components Design tokens Shopify Polaris12 Components Visuals
Among more powerful tools are style guide generators, such as Pattern Lab36 by Brad Frost, Dave Olsen and Brian Muenzenmeyer. Pattern Lab comes with many useful features, such as responsive preview and support for multiple languages.
Fractal37 by Mark Perkins is one of the more lightweight and flexible tools which is gaining popularity. Fractal helps build and document a pattern library, and integrate it into your project. One of its main advantages is that it’s flexible and unopinionated — Fractal can work with any templating language and organizational structure.
