Design Systems for Side Projects & Startups
What are design systems?
Design systems can be thought of as documentation for designers and developers. They describe how interfaces should look and feel, and often guide developers on how to best develop them.
The best way to get a handle on design systems is to look at what’s already been done. Design systems have been cropping up everywhere lately, so there are plenty of examples to refer to. Many of the examples are still not well-established, as most teams are still trying to understand how to put them to best use.
Design Systems and Pattern Libraries…
You’ll comes across a lot of buzzwords, and this UXcellence article helps break down their meanings (used below). Systems, guides, and libraries could vary wildly because they satisfy different needs of the teams that make them. While some systems may focus more on UI elements, others may talk about style and brand philosophy.
- Design System
“The comprehensive set of values, semantics, syntax, and context that form the foundation of a shared design language.” Design systems will often dive into branding, mission, and design philosophy, in addition to implementation. Sometimes they’re called design manuals or design languages, but often they encompass style guides, pattern libraries, and other guides. - Style Guide
“The physical or digital document that represents the styles, patterns, practices, and principles of a design system and teaches how to use it.” Style guides mainly focus on brand, copy, and the look and feel of the user interface. - Pattern Library
“An organized set of related, reusable components, often containing code examples, design guidelines, and use cases.” Dictionary of components that explains their design, behavior, and implementation. - Component
“A self-contained and reusable pattern that represents a specific piece of interface or functionality,” like a button, card, or a dropdown. Sometimes called an element. - Framework
Frameworks (or sometimes Toolkits) are style guides or pattern libraries designed to be adopted by others, and usually come with CSS, and code to help with implementation.
Design guides are built on the concept of “atomic design,” or the idea that every piece is made up of smaller building blocks. The idea of reusing designs helps prevent designers and developers from redesigning and building the same thing over and over, which takes time and can introduce inconsistencies.
Do you really need one?
Design systems are like maps — you only need one when you don’t know your way around. And like maps, they are approximations, and need to be updated from time to time.
Whether you think you’ll need one depends on how much work you want to put into the future of your project. If I do too much work ahead of time, I usually end up wasting a lot of time, as my plans are often loftier than what I actually accomplish… so your mileage may vary. I like to work on my design system as I develop my projects.
- Design systems are great for tracking ideas, designs, and components that have already been built. These systems are great for saving time and for keeping things consistent.
- Design systems shouldn’t be used for hypothetical situations (or interface components!), as those might never materialize.
- Design systems are tool bags. Only get the tools you need for the job. Throw them in your bag for the future. Over time, your tool bag will grow.
- Design systems are also like journals. They keep track of thoughts and findings as you go along, and special considerations like accessibility, user behavior, and other considerations.
- Design systems become dictionaries for larger teams, and helps every person on the team speak the same design language.
- Small projects don’t really need complex design systems. Start with a page of notes or a readme file. Don’t waste your time. If you need a style guide or pattern library, use someone else’s. Or use a framework. But build your own design system with purpose.
- Design systems are a huge pain. They cost effort and time to maintain. If things change often, you’ll spend all your time updating the system.
- A broken or out-of-date design system can make things worse.
- In the end, you’ll know when you need one.
If you’re just creating a project and really need somewhere to start, it’s a good idea to use an existing framework or pattern library. Start with Brad Frost’s Design Guide Guide]. Otherwise, I’d caution against spending too much time on making your own from scratch — you’ll spend more time on your system than on your actual project!
Articles & Resources
These have been most helpful in my own endeavors to build my own design systems, if you’re willing to dive deeper. But I have to warn you, it’s a fairly deep rabbit hole.
Articles
- Design Systems, Style Guides, and Pattern Libraries: Oh My!(UXcellence) — A primer on design systems.
- Building a Visual Language (airbnb)—Behind the scenes of our new design system.
- The system always kicks back (Shopify)—The designer of Shopify Polaris shares insights into building and managing a large design system.
- Design Better Handbook (invision)—Design systems handbook
- Atomic Design (Luke Wroblewski)—Principles of breaking design down into parts.
- Creating Great Design Principles (Jared Spool)—6 Counter-intuitive Tests to evaluate your design principles.
- 7 Practical Tips for Cheating at Design (Adam Wathan & Steve Schoger)—Improving your designs with tactics instead of talent.
Resources
- Catalog — Design system documentation tool.
- Design Systems—A curated list of design systems. Learning materials and tools for creating your own design system.
- Styleguides.io—Lots and lots of website style guide resources.
- Style Guide Guide — A style guide for style guides. Very good resource for getting your own guide started.
Examples
Below are a whole lot of examples you could dig through. Honestly, there are so many examples now and they all… kind of look like each other. They’ll give you some idea of what design systems entail, but you have to figure out for yourself what yours will be like.
Design Guides
Design Systems
Frameworks
Style Guides
