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.
-
- 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.
-
- 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:
-
Polaris by Shopify (my favorite)
-
Material Design by Google
Books:
-
Atomic Design by Brad Frost
Articles:
-
Design Systems 101 by Therese Fessenden
Videos:
-
What is a Design System? Design Systems 101 for Designers by DesignCourse
-
- 10 returns spacer