A simple & comprehensive step-by-step process to a Design System
Originally written by catalinaruxandra on medium...
What will you get from this article?
Style Guides vs Pattern
Libraries vs Standards vs Design Systems
Design System components
To-done list (to be covered in Part II of the article)
Design System maturity levels
Design Systems. Everybody either talks about them, loves them, writes about them or is scared of them. Many don’t know how to build one or where to start. It’s the new 🔥 thing.
Whether you work for a start-up, or a large enterprise company, a design system can solve a variety of problems, ranging from communication to consistency.
Before looking at a to-do list, here are some things to remember:
First things first — your style guide is not a design system. There is a clear distinction between style guides, pattern libraries, standards and design systems. Too often I hear designers using those terms interchangeably, but each one of the terms serves a purpose and has a different anatomy.
Style guide — a template with layouts and styles that defines brand identity.
Pattern library — a collection of UI elements.
UX Standards — well established & familiar definitions & guidelines for UI elements.
Design systems — UI elements & components that go along with the company’s identity, guided by clear standards & principles & which are referred in a single place during the SDLC.
A design system includes style guides, pattern libraries & standards, amongst other elements that make a design system successful. Here are the key components of a design system:
Design System principlesCommon language & definition for UI elements and patternsGuidelines on how & when to use those elementsCorporate style guidePattern library with codeA clear process of UX deliverables and communication between Dev & UX.
Thanks for reading 😇