How to Get Started Using a Design System

Without plans, projects would be a lot harder to accomplish. DIY furniture probably wouldn’t look the way it should if it was assembled without instructions, houses wouldn’t end up looking like their blueprints and it would be a lot more difficult to navigate a new route without a map or GPS. A design system works in the same way. It’s a strong foundation of elements and components that make up the structure of the brand to create a cohesive look in wherever presence it goes.

A design system is a collection of assets: graphics, style guides, templates, and more that make up the branding principles of an organization. The purpose of having a group of assets like this is to ensure that the proper guidelines are in place when designing, developing and creating new content for the company. When there are guidelines for the visual and functional elements, anything else produced under that brand will have a consistent message and voice moving forward in every type of creative work. Whether creating more graphic elements or UI/UX, everyone is working off of the same resource that explains the principles of the brand.

To start building a design system, begin by pulling in the assets used into one space. Having all of the pieces that make up the current brand from the start makes it easier to spot any areas that need expanded. Some examples would be the button styles on the website, color palette choice or proper spacing around the brand. A consistent look and feel will begin to form when the design system has strong visual and functional guidelines in place.

Here are a few areas to consider when working on building a design system:

Colors

The colors must be clearly defined. Keep it to 1-3 main colors that are the underlying theme of the brand. Include exact hex and RGB codes for everyone so the colors remain consistent across all aspects. With colors, depending on the brand there may be a need for gradient variations of the main color choices, for instance with a button, when a user clicks on the button, does the color change to indicate it’s being pressed? All of these color considerations carefully thought through saves time versions and inconsistencies later.

Typography

Font choices begin with the basics of header style and body font. Keeping it simple and concise and choosing one font for the header style and one font for the body style ensures that the look remains the same no matter what device it’s viewed on. Consideration should be given to display and legibility on different devices–don’t just make a decision that only looks good on desktop, think about how it will appear on mobile devices as well.

Sizing & Spacing

There are a couple of different options for choosing sizing and spacing. Pixels are one way, they are fixed and completely absolute across all devices. However, in other circumstances the alternative provides much more flexibility. These options are called REM’s or EM’s. Each type is based on the font size, so as it changes they too change. Something like this creates relational sizes rather than an absolute size. It can give flexibility to move more fluidly across different devices. Knowing all of the possible options and then making clear guidelines around them in the design system ensures that the spacing will remain consistent in any representation of the brand.

Imagery

That little attention to detail can go a long way. Even when it comes down to how the pictures and graphics look on screen. Setting guidelines for these can make all the difference. When the website changes to fit from a huge desktop to mobile, how do the images and graphics interact with it? Are there certain ways or crops that the images need to be cut? This is where simple templates are a great added component to the design system. Include examples showing how the text interacts with the photos and graphics on a page based on how the user is accessing the website. Simple additions like this makes every possible page look like they belong together no matter how someone accesses the site.

Documentation

All of these elements build on each other to create one cohesive brand. To have this design system used to its fullest, there needs to be directions on how to use each piece well. This starts by always leaving very thorough documentation of each element (how is it used, where to best use it, and what does it look like etc.) This makes it possible for people who are jumping in at any point on a project to know exactly what elements they can use and know how to use it correctly.

Strong design systems are a space with every approved UX/UI element that reflects the organization. It is a living document that continually builds on its foundation of strong visual and functional pieces. This provides anyone who is contributing to the organization the tools they need to make a cohesive digital marketing strategy. A design system not only provides one source of truth, but kickstarts the creative process since no one has to start from scratch. Strong brands desire to have a clear message with a consistent look and feel. This goal can be achieved by creating a design system. With a resource like this put in place it will make an organization a credible and recognizable entity across every platform it’s represented.