Evolving design systems

Strategies and future frontiers for web owners


? 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

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."1

— 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.2

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.

Other resources

Free resources on responsive web design, freelancing, and more.

Innovative web solutions

Leveraging Webflow for event management

How AI optimization drives conversions for marketers

Reimagining web development teams

Enabling cross-functional collaboration for success

Running a highly efficient marketing team

Tips and strategies from best-in-class organizations

A better site experience

Your guide to tackling website redesigns

The marketer’s website

How no-code puts your business first

No-code for enterprises

Why enterprises should build web experiences in a visual environment

The no-code revolution

Learn what the no-code movement means for the future of makers and businesses.

The modern web design process

Learn how a well-defined process translates to high-performing websites.

The freelance web designer's guide

The missing guide to becoming —and making a living as— a freelance web designer.

Web design 101

The future of the web is in your hands. Learn how to build it right.