In previous lessons, we’ve spent some time designing wireframes for individual screens within a website or application. But any given screen or action on a website doesn’t exist in isolation. Every screen is part of an entire flow. Thinking about how users will move from one screen of a flow to the next, as well as designing small actions within a given screen, is what interaction design is all about.
As you can see from the diagram on the right, this can get complicated quickly. As we know from earlier exercises, novel design patterns can create additional cognitive load for users, and often, many designers are simultaneously working on different problems within the same organization.
How do we, as designers, ensure the most consistent experience possible?
This is where design systems come in. These repositories of reusable components and patterns can be used across a team or organization to ensure consistency across all design output.
Design patterns, as we discussed previously, are solutions to common design problems. Design patterns can include specific modules, flows, or behaviors, and are more likely to be edited or adapted for a specific context. Design components, on the other hand, are specific examples of elements that might exist within a given context. For example, a button designed in accordance with the style guide for a specific website section would qualify as a component and would be more likely to be copied directly across instances, rather than adapted.
Design systems allow for design to happen more quickly at scale, and can help with onboarding new design team members. One of the challenges of design systems is ensuring that they are maintained. Both building and updating the system requires time and effort.
In the next exercises, we’ll talk about design components, as well as what is typically included in a design system and how to get started using them.
Design systems are not to be confused with CSS libraries and frameworks like Bootstrap, Foundation, and Bulma, which offer templates and components to frontend designers and developers – but these libraries may be used for a similar purpose to ensure consistency once a design is in the development phase.
Instructions
Visit a website or brand that you think has strong UX and interaction design. What reusable components and patterns do you see used across the site?
Some companies make their design systems (or parts of their design systems) public, or share open-access design systems that anyone can build from. Take a look at some of these design systems and see how you can find them used across the brands’ public websites or applications: