What is a website design system?

In the first two decades of the 21st century, websites were built with increasingly complex templating systems. First, with CSS that created simple site-wide styles followed by content management platforms like Wordpress, Drupal and Joomla that dominated the market with easy-to-install but hard-to-extend templates.

In the last few years, website design systems have gained some steam. So, what are they? A basic definition is: a series or reusable site components that can be used to build webpages. The components can be as simple as a headline or hero image and as complex as custom data-integrations or ecommerce tools.

Why systems instead of templates?

Themes and templates reflect an old way of thinking. We used to sit down and plan every aspect of a website before we would build it. Or, at least we would try to plan for it. Even with the best intentions and a battery of beautiful page templates, we would inevitably find ourselves in need of something overlooked. And, almost immediately our beautiful new site began its descent into a frantic, copy-pasted mess.

A design system is at its core scalable and flexible. In creating one, we attempt only to identify the types of things our brands typically do online. This allows website admins and content managers to create the most relevant content on-the-fly using beautifully designed components that have flexible page positioning, order, length, etc. There are design guardrails, of course, to maintain the visual integrity of things, but the rules are less rigid than templates could allow.

New things feel risky…

Sure, it can feel risky to jump head first into a new process, but there are so many benefits to mitigate your risk. Things like:

• Component-based design systems can extend the life of your website by allowing you to build relevant content as you discover the need.
• Thoughtful components make re-using website elements easy on any page.
• Making site updates or big content changes can be easier with a component system.
• Design standards can be easier to maintain with built in copy limits, image size optimizations and media display styles.

So, the next time you are facing a website redesign project, consider taking the plunge. You’ll never want to go back to a set of four or five templates again!