Design System heading.png

My Design System

Introduction

What is this page and why did I spend time making it? As I created my portfolio, I struggled to keep my UI components consistent throughout my site. I knew a design system could be the solution, but I didn't have any experience with them. During a project at work, a colleague recommended the book Atomic Design by Brad Frost. I was immediately impressed by the simple yet powerful methodology. I decided to create my own design system using Mr. Frost's methodology. I'll be quoting from his book throughout this page.

What is a Design System?

I am using the article Design Systems 101 by Therese Fessenden with the Nielsen Norman Group. My definition below is based on content from Ms. Fessenden's article.

A design system is a comprehensive collection of standards, documentation, and principles along with reusable UI patterns and code components. It's purpose is to facilitate efficient management of design at scale. It establishes a shared language and visual consistency across pages, products, and platforms.

Benefits:

  • Maintains a consistent, cohesive brand identity

  • Speeds up design and development by minimizing repetitive structural tasks

  • Improves collaboration by creating a shared vocabulary and mindset across the team/organization

Challenges:

  • Complicated and time-consuming to create, maintain, and govern

  • This complexity makes executives hesitant to approve and support the project

  • Quick to be pushed aside and forgotten by undisciplined teams

My definition is complicated, so here is the simplified goal of a design system:

To help teams design consistent experiences with ease, yet with enough flexibility to support a wide range of business requirements.

-

- 5 returns spacer

What is Atomic Design?

"Atomic design is not a linear process, but rather a mental model to help us think of our user interfaces as both a cohesive whole and a collection of parts at the same time." (Frost, 44)

Atomic design is a methodology used for creating UI patterns. It breaks down interfaces into five distinct stages. These stages work together to create interfaces in a more deliberate and hierarchical manner. 

For more details and to see it in practice, go to my UI Patterns style guide.

The 5 Stages of Atomic Design

-

 

- 5 returns spacer

Style Guides

"The cornerstone of good design systems are style guides, which document and organize design materials while providing guidelines, usage, and guardrails." (Frost, 23)

 

Brad Frost's book is primarily focused on UI components. But a comprehensive design system is more than just a UI toolkit. In order to solidify and convey my brand identity, I created the following style guides.

Brand Identity

Who am I and what do I want to convey?

Design Language

What are my principles and goals? How do they influence my designs?

Voice & Tone

What defines my personality and how do I express it on my portfolio?

Writing

What specific guidelines should I follow when writing my content? 

UI Patterns

What UI elements do I use and how do I keep them consistent? Based on Atomic Design.

Code

What guidelines should developers follow when creating and using code components?

-

 

- 5 returns spacer

Sources of Inspiration

I didn't create my design system in a vacuum. Below I've listed the systems I reviewed along with informative articles and videos. I can't recommend Brad Frost's book enough. Anyone who found this page would benefit from reading it.

Design systems:

Books:

 

Articles:

 

Videos:

-

- 10 returns spacer