Creating a UI Component Design System (step-by-step guide)
Want to learn how to create a UI system from scratch? I’m going to take you through the process of making one. I’m sure you guys will learn something new! Let’s dive right in.
What is a UI Design system?
A UI design system is a set of standards for design and code along with components that unify both these practices helping them complement one another and producing the exact result which is conceptualised. Think of it as an Instruction manual. It’s also like an inventory which can be used to pick up resources and use them in your design.
Why do we need a UI System?
To design consistent UI across every part of your design can be daunting. A UI system helps your users navigate intuitively and makes it uniform across your product, making them familiar with your design language. They help teams by giving them a more structured and guided way to build UI for their products. So now that you guys are familiar with what is a UI system and why do we need one, let’s create one!
Creating a UI Design System
The best way to start is by building an inventory of all the different patterns, colours, text styles and assets which you will use in your design. It should be a clear inventory which shows all the components and features needed to build a product (Website or Application). Creating a complete inventory, as described below, takes time. UI design Systems require time and dedication and it may get tiring but don’t give up! There’s a clean and uniform UI waiting for you at the end of it, so keep pushing!
Moodboards & Colour Palette
Let’s start by creating a mood board and colour palette, this way you set the theme of your design and have quite a good picture on what your design would look like. Your mood board could be pictures of trending UI, inspirational products or images which you are inspired from. This mood board also helps you select your colour palette, remember your colour selection is also based on your research. I’ve written another article which you can refer to which will help you select colours. So list down your Primary, Secondary & Tertiary colours, don’t forget your success and error colours too! Have a Greyscale. Greyscales are used for various elements in your UI Design system. Most UIs will need at least the following grey colours:
- A very light grey for backgrounds
- A slightly darker grey for borders, lines, strokes or dividers.
- A medium grey for subheadings and supporting body copy.
- A dark grey for main headings, body copy and backgrounds Ideally, you’d want to keep tints and tones of your primary colours they may come in handy.
As a final touch, we may want to add tint or tone variations for each of your colours. These can be useful when it comes to designing components for adding light backgrounds or dark strokes.
Border Radius and shadows
Following up colour, let’s start setting up the border-radius and shadows for your UI. Border radius set’s the tone for your UI Cards, Tables and changes the overall look and feel of your UI. Now you may ask
How do I know how rounded I want my edges to be?
It depends on the mood you want to set your user in. If your radius is more rounded it may come off as cute or more friendly or if you decide to keep it boxier, it may look more serious. My suggestion is to always stay in-between 2–8 px.
Our shadows are mostly used to apply depth and perspective into our design. Lately, shadows have been trending and they are used to distinguish between multiple elements in your UI. These four shadows should be enough to style every component in our system:
- A subtle shadow to raise interactive components and add affordance.
- A more pronounced shadow for a hover effect on components.
- A strong shadow to give perspective to dropdowns/popovers and other similar components.
- A distant shadow for modal components.
Type scale
There’s no UI without Type hierarchy. Type follows a rhythm. You need fonts to complement each other as well as a good scale for different tags. This may sound very daunting and hard but thanks to tools like https://type-scale.com/ which makes our lives so much more easier. All you need to do is select a type scale and it lists down different sizes which could be used. For websites, I would recommend the Major Third Type Scale. Here’s what all type of font-scales you may need.
- Default (1em) for standard text that will appear in many places throughout our marketing site, UI etc. 16px is the default browser font size so let’s run with that.
- A slightly larger size for large body copy in a blog for example.
- A couple of larger sizes for headings and sub-headings.
- Very large size for section titles.
- A ridiculously large size maybe for prices on a pricing page for example.
- We will also need some smaller sizes for smaller body copy, input hints and other secondary text.
Icons
Make your Icons uniform, ensure they use a similar style guide to one another and follow a certain guideline. For starters, you could just use Icon set packs which are free to use so you don’t spend much time on making icons yourself, but always make sure it’s uniform.
Buttons, Sliders & Progress Bars
Buttons are going to be really vital elements of your UI Design. Buttons allow users to take actions, and make choices, with a single tap. Buttons communicate actions and hence should be designed according to their work functions. They should be easily findable and identifiable while clearly indicating the action they allow a user to complete. There are various types of buttons. Showing the status of buttons is also an important part of your UI.
- Buttons
- Radio Buttons
- Checkboxes
- Navigation Buttons
Sliders, Progress Circles help you define these small elements to make your UI look even more uniform. Breaking them down will also help you design other elements better.
Dropdowns, Tags and Popups (Complex elements)
Now that we’ve set a basic guideline, you could all these other elements to build dropdowns, Tags and Popups! Note you could follow the different types of dropdowns, pop-ups as shown below.
Conclusion
So there it is guys! I’ve mostly covered most of the elements. You could always add other elements using this style guide. To conclude I’d like to say keep it simple and don’t go overboard with your UI. Keep it clean and simple. After setting your elements down you could start placing these elements in your design. For spacing, you guys could use an 8-point grid system. I’ll list down an article below which would help you guys understand what it is and how you could use it and Voila! you could have something like this.
Hope this was a good read people! I’ll see you guys soon. Adios!
Let me know in the comments what you guys think if you’re interested in seeing my work here’s a link to my Behance and Dribbble profile. I also keep posting on Instagram so that’s here too.
