Design Systems for Side Projects & Startups

Everyone is getting a design system. Do you need one too?

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.

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.

  • 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.

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.

  • 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.

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.

  • 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.

is a UX designer & prototype developer. Helps startups, and builds projects like the http://phage.directory and http://novelmonkey.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store