We like to design systems, not pages. New clients often ask us what we mean by this. “Design systems” is a buzzword that can encapsulate a number of different approaches.
Our approach is that when we are designing a site, we think initially about the individual components of the page, and make sure that we have created a strong, flexible design for those components. For example, if a website has 20 buttons, we don‘t design each button individually – we design one button style, and then ensure that it is consistent across all instances. Buttons may need variants (ex. a smaller version, or a version with an icon), and that can be accounted for in the general button design, rather than done on a case-by-case basis.
We also ensure that core, fundamental design aspects like typography and colors are done as a holistic system, not one-off choices. For example, if your site calls for a red header on every page that is 60px in size and bold weight, we make that choice once and then use that style on every page, rather than going into each individual heading and setting it up that way. The result is that these design choices are 100% consistent amongst pages, and that it is way faster to design new pages than it was with a traditional approach.
The real magic is when we get into development. Because our design is systematized, the code for the site can follow that same system. So if we have a button component with specific variants, the developers can simply make a button component in code that has the same variants, then share that component amongst every page. This makes our development work very efficient, giving us more time to devote to getting details right across the rest of our development process.
Here is a video walking through a recent design system and clarifying what we mean by that: