Here, there is a higher reliance on a strong interface to support all the facets of the experience. Consistency and scalability are the name of the game when designing for products that have dozens of different states and screens.

It forces us to ask questions like;

Will this headline structure work across all pages? What if there are sub-headlines? How do these buttons work in different contexts?

What begins to organically materialize during the design process is something we’ve started to define more formally as the design system. It’s nothing new, and as designers, we typically do this informally to begin with – we pick typefaces, text and link colours, button styles – we essentially make design decisions that create conventions for us to follow throughout the length of the project. However, without formal definition, or even a true appreciation for the impact of the conventions we’re building, we tend not to view these decisions as critically as we should. We end up hacking our own conventions midway through a project as we discover contexts that were not accommodated for.

What we’ve observed is that often times, a little foresight at the start of the design process can mitigate these situations.

Building An Effective Design System

A good design system sets scalable conventions for all the various components and elements that an interface is composed of. These include (but aren’t limited to):

• Typefaces
• Font sizes
• Font colours
• Link colours and states
• Button styles and states
• Thumbnail sizes
• Icons
• List styles
• Page title and sub-titles
• Navigation and sub-navigations
• Layout and structure (header, body, sidebar, footer)

In all of the above, a design system defines the what (i.e. what are the different button styles), the how (i.e. how each button style should be used in relation to other elements) and the when (i.e. when to use each style).

Building your design system involves a little bit of planning and foresight into what you’re designing (which, as a general design principle, makes sense). You should consider all the contexts, states and pages where any component or element might appear. In each case, you’ll want to:

• Maximize Consistency (by minimizing design variations of components and elements)
• Maximize Scalability (by designing for more contexts, even those that may not exist yet)

It’s important to note that a design system itself is not necessarily a deliverable, document or file. Rather, it is a set of design decisions that have been made, some of which might be (but don’t have to be) reflected in the form of a deliverable, document or file. Our team, for example, might use sprite sheets or element templates (PSDs) to illustrate styles and states of titles, buttons, links, icons or other elements. However, the design of the site’s layout and structure, which isn’t typically isolated and annotated, is also part of the design system.

Benefits Of An Effective Design System

Aside from delivering a more usable and enjoyable experience to your end users, a strong design system has a wealth of other benefits:

• Enables team collaboration: Having a design system in place allows multiple designers to work on the same project and apply the same conventions to different areas of the site. Say goodbye to the mashups of different design styles across a site (we’ve all seen that happen) and welcome in a seamless and consistent end-to-end experience.
• Empowers development partners: If you work with specialized development partners like we do, sharing your design system will enable their team to make decisions and build new sections without the need to consult your design team each and every time.
• Creates better work: Quite simply, getting into the habit of building a design system forces you to more critically assess your entire design and ensures you’re not making any decisions in isolation. The result is a stronger and more robust end-product.

When you build a good design system, you strip away future headaches and minimize design hacks. All in all, it makes for a better design experience for both you and your users, which is something we can all happily embrace.