Evolving design systems

Strategies and future frontiers for web owners

Introduction

? Reading time

As organizations across the globe race to keep up with market shifts, changes in consumer behavior, rising expectations, and most importantly — their competition — innovation has never been more critical. Tried-and-true methods are no longer enough to deliver best-in-class experiences to customers. Developing a strong foundation to build upon is key, and reimagining what’s possible tomorrow is what future proofs the organizations of today.

As the central channel for connecting with potential and existing customers, and the showcase for your brand, products, solutions, and services — websites have evolved into mission-critical assets for digital experience delivery. In turn, how designers, developers, and marketers come together to continuously innovate has now become top of mind for today’s design and marketing leaders.

One of the fundamental focuses for modern teams is ensuring their website is not only powerful, but scalable. Design systems are critical to making this a reality, as they enable not just scale, but also agility and efficiency. And as design systems have undoubtedly evolved over the last few decades, we are once again witnessing a new era of building, designing, and development, catalyzed by emerging technology and innovative marketing strategies.

In this ebook, we’ve harnessed the insights of design systems experts, pioneers, and builders to explore their key benefits and challenges and discuss why design systems haven't been easier to build and scale for much of the last decade. We also dive into how to effectively leverage design systems in enterprise organizations, how emerging technology will shape the future of design systems, and how today’s leaders are thinking about scaling design systems within their organizations.

Featured experts:

Brad Frost, Author of Atomic Design
Diana Mounter, Head of Design, Github
Dan Mall, Founder, Design System University
Jon “Q” Quach, Staff Frontend Engineer, Webflow

Chapter 1

A brief look at the evolution of design systems

Looking back at the past decade to better understand the future

? Reading time

Read chapter

For today’s web owners, the concept of design systems is nothing new. Tracing back to the days of print media and the early advent of graphic design, designers have been using design systems to build and develop consistent design experiences and visual uniformity. And with the rise of digital experiences, companies began adopting design systems to ensure brand guidelines were adhered to across experiences and as the organization scaled.

Nathan Curtis, a design systems consultant who wrote the book Modular Web Design in 2009, defines design systems as:

“…a library of visual style, components, and other concerns documented and released by an individual, team or community as code and design tools so that adopting products can be more efficient and cohesive.”

This concept of modular design and design systems was further developed by Brad Frost, a design systems expert who introduced the concept of atomic design. In atomic design, systems are defined as a collection of atoms, molecules, and organisms, while the products of the system are templates and pages.

“…atomic design is a mental model for thinking about user interfaces as interconnected, hierarchical systems. Atomic design helps people consider the whole and the parts of that whole at the same time."¹

— Brad Frost, author of Atomic Design

‍

Systems (Atoms, Molecules, Organisms) | Products (Templates, Pages)

*Image source:* *Brad Frost,* *Atomic Design*

Design systems have evolved over the past few decades, and have become increasingly critical for scaling web and brand experiences. Even with this rise in ubiquity, organizations still tend to struggle maintaining brand cohesion. So much so that 53% of today’s organizations report their website does not fully align with their brand identity.²

In the next chapter, we’ll walk through how design systems can play a larger role in addressing key business challenges, and how website owners can better leverage them to tackle business critical initiatives.