Design systems offer a systematic approach to the development of digital products through tools and practices that include interface component modularization, user interface kits, front-end implementation patterns, style guides, and integrated documentation. Design systems are especially invaluable for projects that have a complex team, deliver phases over an extended period, require change management over multiple iterations, or have complex content. But they aren’t always needed for every project.
A complex team may have folks from the visual and interactive design team (including print designers, UI designers, UX designers, or brand designers); the business team (including product owners, customer relations, strategy, and other stakeholders); the production team (including content producers, project managers, web content managers, and editors); or the development team (including backend development and front-end developers). There may also be one or many product implementations for different groups or divisions.
Design systems are invaluable for complex teams. They provide a common language and a shared vocabulary that everyone can use. Ideas that span from business through editorial to front-end developers can finally be communicated without handwaving or separate idioms. Designers can work on iterations that are clear, comprehensive, and systematic, and front-end developers can implement them efficiently, without fear of impacting previously completed work.
Phases and long-running projects
Any work that extends over an extended period—say, more than three months—benefits from a design system. Long-running projects are by their nature complex; design systems were created to help manage complexity. Products that launch in phases, too, benefit from this approach. A phased project, by its nature, tends to focus on the features of the latest release. Work completed earlier can be out of mind and disassociated from the most recent thinking. Design systems help teams create consistent solutions across multiple phases. They clarify past ideas, provide components for use in current problems, and enable a comprehensive project view.
Managing expected changes
Some projects have change as part of their DNA: an agile software development process might weekly release iterations. Google Design Sprints and other design processes that validate concepts with customers are expected to generate changes. Many digital products are never really “finished”: they will always be updated over time, often by many hands.
Managing projects where ongoing change is the norm is difficult. A design system can provide a safety net for designers, developers, and product managers: a consistent point of view against which new ideas can be created, tested, and deployed.
Some marketing and communication sites manage large amounts of complex, interrelated data. For example, cultural institutions juggle exhibitions, events, artist and scholar profiles, related images and image metadata, customer accounts, customer account actions like registrations, ticketing, calendaring, curation, and so forth. These content elements may be highlighted, indexed, sidebared, archived, or brought to the surface through calls to action or time-based promotions.
Complex content calls for a design system, because a given component—a list of events, for example—may have many presentations. On a landing page, the upcoming events might have descriptions and participant headshots; when associated to an exhibition, date and title only; associated in an archive to an artist or scholar, just the title in a sidebar column. A design system helps to identify these variants and ensure consistency across them. Events, exhibitions, and news might share a universal date format, for example.
Not every project needs a design system
There are many kinds of projects for which the overhead of a design system probably isn’t worth it. You won’t need a design system for a single design sprint, or other “quick and dirty” prototype processes whose purpose is to test only a small set of ideas.
A design system is overkill for small marketing websites, too, with only a few pages and an infrequently updated news feed. These sites tend not to change in design or format once launched; a brand and editorial style guide will suffice. Some small communication sites are built within frameworks that already provide set visual vocabularies and components: Squarespace and WordPress, for example, use pre-built templates into which content can be poured.
And some web applications are built using frameworks that provide the basis of a design system: the ubiquitous Bootstrap, for example, offers a base component library. But even in the Bootstrap case, if the project is sufficiently complex, a design system will help support consistency, productivity, and improvements over time.
The hard-carved bird photograph is from a visiting artist at Lier 7 Gallery in Stykkishólmur, Iceland.