It seems like design systems have taken the web world by storm. I feel like everywhere I look there’s a tweet or a blog entry or a conversation about creating or implementing a design system. So I thought I’d dive in and see what this is all about. And in that process, I discovered that this is something I have thought should exist for a long, long time, but I didn’t know what to call it.
After doing a deeper dive into these things, I decided to create a design system for Brettrospective. It might be overkill for a one-man shop, but I learn best by doing, so by creating one I’m learning and earning experience in the process. And it’s fun.
Basic Comprehension
The first thing I do when I want to learn about something is buy a book. Coincidentally, A Book Apart had recently released Expressive Design Systems, which provided a fantastic primer to the overall concept. From there, I read:
- Design Systems by Alla Kholmatova;
- Building Design Systems, Unify User Experiences Through a Shared Design Language by Sarah Vesselov and Taurie Davis; and
- Laying the Foundations by Andrew Couldwell
I took an in-depth look at Spectrum, Adobe’s design system, to understand its approach, drooled over the visual appeal of Audi’s design system and reveled in the structural elegance of IBM’s Carbon design system. And then I took Demian Borba’s “Creating a Design System with Adobe XD” LinkedIn Learning class.
Getting Started
With a basic understanding of a design system’s structure and contents, I began mapping out the initial structure of the Brettrospective Design System:
- Color palette;
- Typography and Text;
- Iconography; and
- Components
This isn’t a comprehensive design system structure, but it’s a good start. Over the next few months I’ll be documenting the development of each of these parts here.
Development Tools
As I get started, I’ll be using
- Microsoft OneNote to jot notes and document decisions; and
- Adobe XD to create and visualize the details and elements of the system
Check out the My Creative Toolbox entry for a deep dive into the products I use.
Let’s Get Busy
With some good baseline knowledge, great resources and a solid plan, let’s get started! The first thing I’ll be tackling is typography.