While we’d all love to design new things from scratch every time a project gets put in front of us, the truth is that custom, bespoke design doesn’t scale. It’s slow, inconsistent, and difficult to maintain as it gets larger, more widespread, and more unwieldy. To operate at scale without the drawbacks and limitations that usually apply to designing digital products, designers are beginning to use design systems more often because they make design elements reusable and repeatable.
While design systems are becoming more popular in businesses large and small, they are by no means a new creation. Modular software solutions have been around since the 1960s, and certain fields of study have had central repositories of knowledge for reference for decades.
Image from Inside Design: WeWork
If design systems have been around for years, certainly there are reasons why they’re coming into fashion now. Likewise, the progression of and changes in how these systems are organized and utilized has lessons to teach us. Let’s take a look at some milestones in the history of design systems and see what each can teach us about the best ways to build and implement these frameworks into our digital design processes.
Related: A comprehensive guide to design systems
In the beginning, there were pattern libraries
Before design systems became the “next big thing” in UI/UX design, designers used pattern libraries to make their work more repeatable. Pattern libraries are collections of design elements that appear repeatedly on a site. The library defines how those elements behave, what they look like, and how they are coded. They were more about form than function, but they served as a starting point for consistent design.
Image from The Wayback Machine
Driven by a need to make better sense of the world of UI, designers in the early aughts began to create resources like the site UI Patterns and the definite guide to UI/UX design, Designing Interfaces by Jenifer Tidwell. These collections of early design systems sought to collect and make sense of design exemplars as a guide for the future. These early steps paved the way for UX designers in later years and enabled them to have a common vernacular when it came to discussing best practices within the industry.
Key Takeaway: Keeping tabs on peers and competitors can help guide and refine your design system. Ask for advice and get inspired.
This framework is the bomb
Towards the end of the aughts and into the early 2010s, there was a major shift in the types of digital products being designed and the platforms on which they were delivered. People and businesses began to respond to the advent of mobile technology. Desktop-based software and websites designed with Flash gave way to a flood of mobile apps and cross-platform, (hopefully) responsive UIs.
“The usage guidelines, rationale, and direction provided in a design system is where the power lies.”
In response to these changes, designer Brad Frost formalized his ideas into the Atomic Design framework. Instead of simply modeling products after existing exemplars, Atomic Design championed establishing a framework that UX designers could build upon and use repeatedly.
Image from Brad Frost’s Atomic Web Design/
Frost posits that by looking at design elements in a modular way, we have a sort of flexibility that had been missing until this point in design system history. While this approach did swing away from some aspects of pattern libraries (namely the “best practices” aspect), it was the first time we saw a system that provided guidance for use along with the elements themselves.
Key Takeaway: Think modular and repeatable. The idea is not to restrict creativity; it’s to make some decisions easier so you can worry about big picture ideas.
Related: The benefits of shared design systems
We’re living in a Material world
While it wasn’t the first, one of the early design systems that made a big impact was Google’s Material Design. When it debuted in 2014, Google sought to combine the best practices from both early pattern libraries and Brad Frost’s Atomic Design ideal.
Image from Material Design
The major goal of Material Design was to create a unified visual language that was consistent across all devices, platforms, and screen sizes. Because Google’s products have such a massive reach and scale, having commonly used elements (along with the guidelines for the where and the when) were key to maintaining a cohesive look and feel.
The debut of Material Design wasn’t just about having a collection of elements and patterns that could be duplicated and reused. It was also about having a set of principles that were backed by rationale and thought. The guidelines and principles of Material Design were what made it the next big step in design system history.
Key Takeaway: It’s not enough to have a library of elements. The usage guidelines, rationale, and direction provided in a design system is where the power lies.
What’s next?
More recently, companies like IBM, Airbnb, and Uber have implemented full-scale design systems in a effort to improve the user experience while making life easier for designers and engineers alike.
We’ve gone all-in of design systems here at InVision as well, both in the products we offer and the way we design them. Our creative team has taken full advantage of our new Design System Manager in their product design efforts.
Beginning with the Craft Library plugin in Sketch and moving to DSM implementation in InVision Studio, we’re breaking new ground and testing our own products to make sure they’re the best options available for designers. If you’re interested in learning more about how InVision and other companies are using design systems, make sure to check out the Design Systems Handbook over at DesignBetter.Co!
More posts you’ll love:
by Will Fanguy
Digital content wrangler | UX enthusiast | Recovering educator | Shameless nerd & GIF connoisseur | Hockey fan (Go Preds!) | Oxford comma or death | It’s pronounced FANG-ee
