Design System 101

As a mom (and let’s be honest, as an adult child), I am passionate about Legos. They promote strategic, creative thinking, are durable, require zero screens, and can fit a wide range of interest levels. But one of the things I love most about Legos is that one set has infinite possibilities.

While there are a few variations in sizes and shapes of Lego blocks, they tend to all be some form of a rectangular shape. This makes it simple to take one set of blocks and create multiple designs. 

And that is a great picture for how design systems work. 

What is a Design System?

Glad you asked. A design system is a set of reusable components (with clear, explicit standards) that can be used to build any number of applications. 

Design systems are an aspect of the Atomic Design Methodology. We recently shared about this method, where every aspect of an application or website is broken down into its smallest possible parts (known as atoms), and then used singularly or with other elements to create the entity you’re trying to build.

A design system is a little like the instructions that come with a Lego set: it tells you how to use each piece, but it also provides guidance for future use. For example, my 10 year old son can follow the instructions to build the flying Ford Anglia in his Harry Potter Lego set. But, those instructions provide future guidance for him to use some of those same parts when he builds a wagon for his fort. The end result is different, but he follows the same parameters when he’s building with that piece.

It’s important to stress that a design system is different from a style guide. A style guide offers instructions for how certain things about a brand should be used: which main colors and accent colors are acceptable, the kinds of fonts that are used for a brand, how a logo can be positioned or should look. But a design system includes these things and more: it tells you how each piece can be used with other pieces to create a whole component. With a style guide, you can build something that looks good. With a design system, you can build something that looks good and functions well. 

What Value Do Design Systems Bring?

The value design systems bring falls into two main categories: the effectiveness of the design process, and the overall user experience. There are multiple levels of these benefits, but they can all be grouped into these two categories. 

Let’s look at the overall design process. Whether you’re building out a page of a website or a custom software application, design systems streamline that process. They first force you to break your product down into very specific, manageable parts and then they guide you on how to use each of those parts. It’s the difference between trying to assemble your Lego Death Star set on your own, versus having the guide to tell you how to put it all together. Design systems include a library of patterns, rules, and guidelines that prevent inconsistencies and mistakes when it’s time to ship your final product. 

If you’ve ever paid to have a custom website or software project built, then you know that a process that is clunky and poorly designed will cost you time and money. And then the final product won’t work, which will end up costing you more time and more money.

The other major umbrella of benefits is the final user experience that is created by design systems. Design systems force you to think about what, but also why. For what purpose will your final product be used? How can you guide each aspect of your process so that the final result is intuitive, user-friendly, and accomplishes this purpose? A design system includes both the what and the why behind any project. Understanding these things allows you to create a better user experience. 

Who Can Benefit From Design Systems?

It sounds like a cop out, but literally every business can benefit from design systems. Regardless of the product you are building (a website, webpage, or software application), a design system will ensure that what you are building is efficient, effective, and designed for your intended user.

As a business owner, you don’t need us to tell you how important this is, especially for your website. Without a doubt, your website is the most powerful tool in your marketing arsenal, and it needs to be well-designed and highly functional. 

We can help with that. Our team is built of designers, developers, content architects, and UI geniuses. We love working with companies to build a site that meets their goals, serves their customers, and stays within the promised time and budget. Interested in what we can do for you? Let’s get started. 

P.S. It’s not customary to dedicate a blog post. But this one is highly influenced by our very own Matt Trask, a Senior Developer with a passion for cookies, code, great design, and Legos. He’s the kind of guy who is unbelievably generous with his knowledge, loves our team and culture, and is a master builder.