Creating my own Design System - introduction
#Past use of UI libraries
I've worked on quite a lot of projects in the last couple of years. Most of them were my private projects, that I made either as a way to learn a new technology or to pass a collage course. Each time I was starting one, I had one big decision to make - what UI framework/component library should I use. It was a deliberate choice - I wanted to move fast with my interfaces and just go with ready-to-use pieces of UI, instead of building something from the ground up.
I tried many of them - Bootstrap (the prehistoric 3.x.x), MUI, CharkaUI, SemanticUI, Blueprint (this one I really liked) - just to name a few. I never really stick to one library for more than 2 projects, for a simple reason - none of them fully fit my needs. I always had some kind of issue with each one of them - lack of features, lack of certain components, missing config options, big bundle sizes, boring UI, overwhelming setup/config (especially with the MUI), they were hard to extend or integrate with something else I was using, you name it.
Using them anyway was the price I was willing to pay for the sake of velocity. This approach changed when I started creating my blog application. First application that really seemed to matter to me and that I really wanted to build, maintain and extend whenever I get the time to do so. For this project, I also went with a UI/component library, called Mantine. While I really enjoy using it, it has tons of components and utilities and I would probably recommend this to a friend, I started feeling like I need to structure things up a bit. I also use Tailwind, I created a few custom UI components of my own, I have some global styles in the project, things slowly start to get out of hand.
#The need of a Design System
That's where the need for a Design System came from. I don't want to end up in a situation where I don't know why certain styles are applied to a certain element, and that started happening to me lately. I want this DS to be simple and minimalistic, so that I always know what's happening. There's one major problem - design is my weakest spot when it comes to the front-end skills. I have issues with picking colors, font sizes, sizes in general, and all that jazz. In creating my own DS, I see the opportunity to learn more about design and composition.
#Main inspiration
I think that the biggest inspiration to create my own DS came from the Refactoring UI book by Adam Wathan (Tailwind creator) and Steve Schoger. It's a really quick and easy read, full of examples. My favorite part of every chapter is showing a bad design example, followed by an improved version of the same design. If you're short on time, you could only look up the examples and still learn a lot. But I don't want to write a review of this book, I encourage y'all to give it a go, if you feel like you need a hand at design (just like me).
#What elements should DS consist of?
This is a good question to start with. There are some obvious elements that every design system must have:
- color palette (this is a big one)
- font faces
- font sizes
- spacings (y'know, margins, paddings, gaps)
- basic UI components that utilize those elements.
You could also consider adding some sparks on top, like:
- gradients
- transitions
- animations
- textures
I know that I want to make my DS as concise as possible. As simple as I possibly can, to simplify the design process to a few simple decisions, each time I want to add a new element to my existing application. There are a few challenges to face upfront: should I make a separate repo with my DS? What to do with the components that I use from external UI library? How to manage fonts? How not to mess up the existing UI? I will try to find the most optimal solutions for each of those problems, so stay tuned!
#Final thoughts
While it's good to have a design system in place, it's also worth realizing, that having a DS will not magically make your UI better. More coherent? Sure. But better? Define "better" ~. No, but seriously, you can still make bad design with good DS. It all depends on other factors, like familiarity with design principles or your internal sense of aesthetics. It's hard to acquire those skills overnight, and it's always the roughest part to just start. The good news is, you can develop this sense, like many other senses, by paying more attention to details, whenever you see a design - good one, bad one, mediocre one, outstanding one. Observe more and try things on your own to find what works best for you. It's almost like with any other art skill, but design is a mixture of art and utilitarianism - you don't create designs just to impress people (unless you're going for the Awwwards nomination), but for them to find it easy to use as well. Identifying as a developer, rather than a designer, this thought is really liberating.