Steps to Building a Design System

 

1. Examine your current UI inventory to identify inconsistencies

It is a good place to begin by looking at what you have. What elements are you most fond of? Which elements do you wish to replace? Are there any inconsistencies among pages or products?

It is important to examine all digital assets and any pre-existing references. You want to create a universal guidebook/resource library. This means that everything should be included. Take a look at the following:

  • how many colour schemes are there and how each of them is used
  • Stylistic text choices, like specialized grammar selections, voice, etc. – choices that would be outlined in a style guide
  • Icon libraries
  • Photo libraries, both stock and custom
  • Other graphics, especially your logo — now is a good time to reevaluate your logo and make a new one if you were planning to
  • UI patterns (note which ones need to be updated)
  • Page templates

If you are a startup with no design elements yet, it is a good idea to think about each area and make the best choices for your brand. You’ll need to make a master list later, so it’s never too early to begin deciding.

2. Get the entire team on board

True, you could do this step first before evaluating your UI inventory; however, we recommend looking for inconsistencies first to give your argument leverage if you’re met with resistance. Nothing like a laundry list of design inconsistencies to get naysayers on board.

Regardless of how many errors you collect, you should highlight to the team the efficiency bonuses of using a centralized design system. Repeat everything mentioned above in the introduction, and accent the amount of time and work a design system saves by streamlining the entire design process from beginning to end.

A common complaint about design systems is that the company doesn’t have time to set aside on a side project, but the truth is designed systems make up that time – and much, much more – in the long run.

 

3. Colour palette

Now we get into the nitty-gritty of design systems: creating a master list of all your design choices, whether you’re choosing among existing elements or creating them from scratch. It goes without saying that you should rectify the inconsistencies from the first step before adding them to the master.

Your colour palette is a good place to start. Maybe you’ve noticed the company uses more than a hundred different shades of grey. How much easier would it be if everyone just used one shade and that one could be grabbed in a readily available design system?

Identify your chosen shades and hues for every colour you use repeatedly, and write definitive guidelines for how to use them. Of course, this includes your primary branding colours, but also pay attention to your secondary colours. For example, what colour is your text? Your links? Special buttons? Backgrounds?

Remember to include HEX, RGBA, or HSL codes to be as precise as possible.

4. Typographic elements guide

Next, review your typographic choices and make final decisions. You can save a lot of time if you have a style guide. This freestyle guide eBook will help you find what you need.

Design systems are more technical than static style guidelines, so make use of it. Not only will you know what fonts and sizes you prefer, but also any rules about where and when they should be used. How big is the section headings on your blog articles? What font do your on-site calls to action use?

Do not forget the finer details like line heights and font weights.

5. Graphic design assets

A well-made design system allows you to simply drag and drop visual components right into your new prototype. The more graphic design assets you collect in a design system, the faster your workflow for future projects.

Don’t forget to include the proper code snippets or any other documentation developers may need. This small inclusion is an enormous help during the development stage.

Among your graphic design assets, you’ll need libraries for:

Icons – All the icons your products, apps, or sites use. Having a standardized icon library ensures consistency across your entire brand.

Photography – A single go-to reference for all your company photography, both custom images and purchased stock photos. Not only is it easier to pull these from a design system, but it also allows workers to browse the selection for ideas and inspiration.

Illustrations – Likewise, compile all the custom illustrations you’ve commissioned, including page flourishes or border designs.

Branding images – This is a place for your standardized logos and other branding images, like mascots. Rules for logo usage can get strict, so it’s better to pull pre-approved images to ensure compliance.

Moreover, you may want to include a list of design principles for everyone to follow if they’re creating a new graphic asset. Sizes, colours, compatibilities, preferred file formats – having a rulebook helps ensure your company’s style remains intact in the future.

6. Pattern library

Finally, include a pattern library of all your common design elements, especially interactive ones. There may be some overlap between UI patterns and graphic assets. On the whole, your UI patterns are more advanced than stagnant visuals.

To be clear, UI patterns are any design elements you use consistently for the interface of your site, app, or product. For example, how you treat your search function is a UI pattern, including how the magnifying glass icon looks, whether the input window expands or remains open, where it’s located on the screen, and if you include placeholder text or not.

Don’t forget, once again, to include code snippets and other development documentation. This is even more significant for UI patterns, as they tend to be more technical.

When organizing your UI patterns, include usage notes to clarify the specifics of how to use them. It also helps to use screenshots or visual cues to make searching for them easier.

It also helps to organize your pattern library into subsections. Try categorizing them by function, such as “navigation,” or by type, such as “drop-down menus.”

7. Upload the select UI elements in a design system document

Lastly, you need to house your design system somewhere that’s convenient and easily accessible.

We provide many platforms that were created for this in particular, with a template-like format where all you have to do is input your components in the appropriate space or upload them from Sketch.

You also have the option of dragging and dropping your elements into the prototyping software, which means easy, DIY designing and a fully-coded handoff to developers with complete documentation (full markup, information about imports, and names of javascript components, etc.). If you want to optimize your time to market, this all-inclusive solution is the way to go.

Conclusion

Design systems are a relatively new addition to the world of digital design, but they’re already changing the game. Given the depth of what they’re capable of, we can’t fully explain their usage here; this is just an introduction on how to get started. Want to read a more thorough guide on creating design systems?