The evolution of design systems

Since the early days of computing, companies have explored how to build software faster and more consistently. As design and usability became increasingly important in building customer-facing software, companies sought to make the design work scalable and repeatable.

Early efforts to scale design work relied on pattern libraries (sets of design patterns to be used across a website or application), and style guides (such as documentation about the look and feel, colors, use cases, and typography) that the company uses. While both of these approaches offered best practices for the appearance of design patterns, they did not offer the individual assets themselves for scaled use, nor did they standardize the backend behavior of designs.

In other words, while pattern libraries offered examples of how patterns should appear and style guides described what patterns and components should look like, individual components were not necessarily available in a systematic way; and the way the components worked with one another and the rest of the application was not standardized.

Eventually, more cohesive design systems began to develop, incorporating pattern libraries and style guides, as well as individual components, patterns, and workflows. The development of all of these parts was driven by client and user needs. 

Pattern libraries are comprised of both UI elements and components, along with common workflows. Design systems unify both pattern libraries and style guides into a single cohesive experience. Business and user needs drive the entire decision process.

Towards the end of the 2000s, more sophisticated technology began to emerge as people began to shift to mobile and expect more responsible desktop UIs. The speed of that shift required companies to design even faster. Designers began to create new frameworks that they could expand upon rather than rely on previously established design examples.

Today, most accepted design frameworks advocate for a modular design that allows users to work on any screen. Modular design subdivides pieces of the screen into elements or modules, which can slot into the overall structure, based on the screen size in use. Each element is easily recognizable. 

This shift has led teams to establish frameworks for building new designs and components instead of relying on best practices alone. The shift towards mobile-first work also means that components must be device-agnostic (work well on mobile and desktop). This is especially important for enterprise design systems, like the Pega Cosmos design system. 

The following video illustrates the principle of modular design that uses Cosmos.

Pattern libraries and style guides still play a critical role in creating and documenting design best practices. However, they are part of a larger entity: the design system that contains a much bigger structural framework to contextualize how designs work with underlying technology and other types of assets (including digital and print).

Check your knowledge with the following interaction.