hero image - wireframe

Design Systems

A design makes your website attractive, professional, and memorable. A design system does all that PLUS creates efficiencies for your development team, eases governance, and empowers your editors.

The need to implement a solid design system has been one of my personal crusades over the years. As content management systems have become more widely used, and CMS-based websites have become larger and more complex, my soapbox just gets taller and taller.

What’s a design system, anyway?

Design systems take a few forms and go by a few names (my current favorite is Atomic Design). At its core, a design system is really a detailed roster of design elements, and guidance on how to put them together.

If you’ve ever looked at your website and thought, this looks like a patchwork quilt instead of a professional digital property, you need a design system.

This sounds like a style guide. We have one of those already.

Great!

You still need a design system.

A style guide tells you what each individual piece should look like. Some style guides don’t even go that far – they’re more like brand guides that explain how to use the logo, what colors are permitted, what font families to use, etc. They describe individual elements, but not how to put them together.

If the ultimate goal is to enable people from all over the organization to create collateral, you need to be more prescriptive than that.

Let’s look at an example. Say your style guide describes buttons – color, size, shape, etc. You may also design what a text field looks like in a form.

style guide

If you set content editors loose to create whatever forms they need, you’re likely to wind up with all kinds of different things.

Not only have your editors likely spent more time designing their own forms than they needed to, but every form on the site looks different. That causes confusion for users, and puts forth a less than totally professional appearance.

A design system will not only describe the button and the text field, but also instruct editors on how to assemble text fields and buttons into a form. That ensures that each form is laid out consistently.

A design system is more than just pictures and colors.

It’s a framework that lays out every piece of the design puzzle and provides instructions on fitting them together. If implemented properly, it involves not just a designer, but also input from business areas, IT, and brand. It takes a little more time and money to set up than just “jumping in”. But it will save so much time, money, and headaches down the road, and result in higher quality all around.

Posted in Digital Experience and tagged , , .