Skip to main content

The evolution of design systems

Design systems developed as a way to scale design efforts

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.

Client and user needs drove the development of design systems

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. Designs systems unify both pattern libraries and style guides into a single cohesive experience. Business and user needs drive the entire decision process.

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.

Today, design systems prioritize modular design

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 Constellation design system

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.

This Topic is available in the following Module:

If you are having problems with your training, please review the Pega Academy Support FAQs.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best.

Pega Academy has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice