Design Systems

Part I: Foundations

Emma Bostian
Jul 17, 2019 · 5 min read
Building blocks
Building blocks
https://undraw.co/illustrations

The web was built as a set of interconnected pages, and blossomed from how content was historically consumed: through books. Since books format content in a series of pages, it was only natural for web pages to leverage the familiar paradigm. Thus, web pages were born.

Other technology terminology stems from printed books: bookmarks and pagination are two such examples. And while the traditional concept of web pages worked for decades, we’ve quickly realized that this paradigm is no longer viable for building sustainable web applications.

Many companies are in the throes of a paradigm shift towards more modular web applications through the use of reusable components. And while modular web applications are more scalable and testable, they can also provide some challenges.

Building component libraries is good practice, so long as all teams within an organization are developing and consuming one library; unfortunately this often isn’t the case. More likely you’ll see multiple teams building the same component in different places; this is a catalyst for application inconsistency.

This is where design systems shine.

Design systems allow teams throughout an organization to define their own identity and bake it into accessible and consistent components. These are subsequently consumed by product teams and can have an invaluable impact on the success of a product.

Let’s delve into some of the foundational knowledge of design systems, and learn how your team can adopt them to build accessible, scalable, and consistent products.

Question mark
Question mark

What Is A Design System?

While the industry hasn’t officially defined a design system, in general it’s comprised of three facets: a design language, a component library, and a style guide. We’ll dive into each of these areas in-depth a bit later.

Benefits Of A Design System

Accessibility

Through the design language we can ensure that the color palette has sufficient contrast, the typography scale is legible, and the content is digestible.

These design language patterns are the foundation for building the component library, which ensures we leverage semantic HTML elements. And when HTML isn’t sufficient, we incorporate WAI-ARIA to fill in the gaps.

Accessibility is no longer an after-thought.

Trickle-Down Style Updates

Responsiveness

Consistency

Easy On-Boarding

Additionally, developer and designers can easily collaborate cross-team when there is one component library being used.

Improved Development Speed

Developers will no longer be burdened with building components from scratch and ensuring that they’re accessible and responsive. They will simply be able to import and leverage these components.

Drawbacks Of A Design System

Time Consumption

Additionally, design systems are never “done.” There will be points within a system life cycle where the focus is primarily on maintenance instead of active development. And while these periods of maintenance take less designer and developer resources, the ultimate reality is that design systems are products, not projects; they must be nurtured to survive.

Large, Up-Front Commitment

Product Team Buy-In

Who Is Building Design Systems?

Below are some of the most widely known design systems being developed.

Mailchimp

They’ve even published a separate content style guide to help their employees build products with the persona of Mailchimp.

Material Design

IBM Carbon

Atlassian


I hope part one served as a solid foundation of design systems. Part two will cover Design Language in-depth. Feel free to let me know what you think about design systems down below.

All graphics are courtesy of unDraw.

The Startup

Medium's largest active publication, followed by +563K people. Follow to join our community.

Emma Bostian

Written by

Software Engineer @ LogMeIn by day, cat Mom by night. Also a full-time Bibliophile. I enjoy all things Front-end & Design

The Startup

Medium's largest active publication, followed by +563K people. Follow to join our community.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade