Intro to Design Systems
Visual design—one of three key parts of product design—is the strategic implementation of elements of design like color, typography, shapes, space, imagery, iconography, and more. These elements within visual design make up interfaces. Interaction design makes things usable through the interplay between a person and an interface. Product thinking brings value to people by using those interactions to solve problems or provide engaging experiences.
Think of an app that you use a lot. How would you describe it visually? Grab your phone and open it up. Describe what you see.
It’s likely that before you looked at the interface, you were probably able to describe the look and feel of the experience. Maybe you recalled the brand color, or the style of the logo. Maybe you used descriptive words like bright, formal, or inviting. However, it’s likely that you weren’t able to identify the typeface that was used, or whether icons were outlined or filled, or whether buttons had square or rounded corners, at least until you opened the app.
The first impression that you had where you were able to describe the experience without looking at it is intentional. A handful of designers carefully crafted and assembled a kit of parts to create consistent style throughout different pages or screens to engage you in the given experience. The response you gave was elicited; it was intentional through a series of detailed decisions.
After you opened the app, most of those visual design decisions were made evident too. You can see color choices, typography choices, containing shape choices, and all their applications. You might not have insight into the team’s process to get here, but it gives us a good place to understand building blocks that we can evaluate. The building blocks and what they create are design systems.
When you’re approaching visual design within product design, you’re likely working within a design system or are inadvertently creating one. Design systems are built from the smallest bits of a system. Brad Frost uses chemistry to define an atomic design system, using terms like atoms, molecules, organisms, and templates to describe how foundational pieces of design build up into the types of things we see on screens. For the purposes of simplicity, we’ll use two terms: elements to describe those foundational pieces and components to describe what elements can create.
Elements in broad design are basics like line, shape, color, typography, and spacing. In product application, they’re translated through intentional decisions into color palettes, typographic hierarchy, containing shapes, icons, grids, and more that build up into elements such as like buttons, field inputs, filters, and more. Elements by themselves have little functional use, but the definition of these paves the way for consistency across their incorporation into larger, reusable components.
Components are the combination of elements and other components that provide increasing functional use. Think of the footer within a modal that might have a thin line separating the action-oriented space from the body of a modal. It might have a primary button with a call to action, a secondary button with an option to exit, defined padding or spacing within the modal’s containing shape, and perhaps a thin line to separate those actions from the content within the modal. This starts to serve a clearer purpose beyond defining brand or style, and can be easily supportive of a desired action.
The modal itself is a more complex component. It will have a consistently applied corner radius, a line around the shape, and perhaps a drop shadow behind it. The modal will contain the component that we just described: the footer, and it will likely have a header and body content as well. This is a more complex component.
As we extend this system, organisms will build up into reusable templates, like pages. Pages are built from multiple components, which are built from multiple components and elements. These pieces are what we call design systems.
While working within design systems or building the foundations of one, you’re actually building a skill of systems design. Systems design isn’t limited to design systems, but will show up often in product interactions and ecosystems.
Think of an app or website you use frequently. The colors you see, buttons you use, pages you visit all have a consistency that you can visually evaluate down to basic elements. Beyond that, you also should be able to see similarities within interaction design: if you fill out a form with an error, you should see the same kind of response and guidance to correct that error in multiple places. If you post a comment on different types of feeds, you should expect the same creation and generation experience. Similarly, within different products for one company, you should expect things like search and help to be in the same place across the entire experience. You should be able to jump into a navigation and understand what you’ll find one and two levels down. Features make sense together, and how you interact with them drives you towards the value you expect to get. These are all different kinds of systems, and the foundation of these systems are visual elements and subsequent components.
