Second to content, the source of every bad, ineffective website design in history has resulted from trying to squish words and pictures into the wrong type of container.
For 20 years, since the web became a thing, web design worked one of two ways: by either designing and developing every single page of a website — which was costly and time-consuming — or designing and developing a finite number of templates that sacrificed some creativity and uniqueness for speed and cost-savings. Either way was a trade-off, whether in cost or creativity.
Thankfully, mobile devices came along and changed not only the way we do, well, everything in our daily lives, but a pleasant side-effect of their emergence was the introduction of Responsive Web Design (building one website with the same content regardless of browsing device). When we started building responsive websites, we faced the same cost vs. creativity trade-off — but, like we always do, we found a way to combat the problem.
Design systems — collections of cohesive components for creating websites — have been ushered in as a new way to approach web design.
This means that instead of designing page templates — how it’s been done since the beginning of time (well, since like, 1994) — we can build a design system, crafting dozens of smaller, modular pieces that are coupled together to create an unlimited number of unique pages purpose-built for the content at hand — website LEGO bricks, if you will.
On content-heavy websites, design systems help us minimize the cost vs. creativity trade-off. Instead of demolishing a website budget by building unique, one-off pages dozens of times over, the “pick-choose-assemble-and-go” nature of design systems enable designing for the content, quickly. We can think in terms of pages instead of templates.
While the traditional approach will always have value on highly-custom, “white glove” websites, design systems are particularly good at saving time on projects where content abounds.
Not only do design systems help save time, they can make the experience better for readers and customers. Instead of shoehorning content into two or three global page templates, content can live in the shape that suits it best. That means you don’t force a blog post into a copy of an About Us page. Everyone wins when you get your message across more clearly and efficiently.
This also means reducing post-launch website maintenance headaches. When you need a new page, you can assemble it using existing components instead of inventing a whole new wheel (or worse, copying an existing template and dropping in page content for which it wasn’t built). Your new page will look unique — and more importantly, fit the new page content in the best possible way. This usually means you can get more mileage out of a website that uses a design system than a website built in a previous era of the web.
Resulting from the need for more elegant mobile websites, design systems make us build small pieces (components) into larger pieces (pages). This means each component — created on a micro scale — is built as an effective piece of design for that type of message. We design at the content-level instead of the page- or template-level.
So far, we’ve found design systems the most helpful in multi-editor, content-heavy worlds like healthcare and finance, where there are tons of necessary, regulated pages (despite our content team’s best efforts to minimize page count and streamline content).
The traditional approach of building specially-designed, non-modular pages still certainly has value — and we still follow this process daily — but in many cases, design systems help save cost and spare the end-user experience when there’s more content than a simple “brochure” website.