How to Create Design System for User Interface?

What Is A Design System?

A design system is a collection of elements that can be combined and reused to build products. A design system is about communication. A well-crafted design system establishes a common shared language among team members, and this language allows the team to collaborate more effectively. Thus, the ultimate goal in creating a design system is to create both a single source of truth that can be referred to during product design and an effective shared language that all team members can use when working on a product.

A UI design system is a set of standards for design and code along with components that complement each other and producing the conceptualized result. A UI system helps your users navigate intuitively, making them familiar with your design language.

Read more : The Creative Process of User Interface 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.

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

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. List down your Primary, Secondary & Tertiary colours and 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 sets the tone for your UI Cards, Tables and changes the overall look and feel of your UI.

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.

Read more : Why Digital Product Stage Development Matter?

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

Sagara Technology can help you develop beautiful and functional interfaces for desktop and mobile applications. At Sagara Technology we develop attractive, engaging, usable interface design that focuses on solving usability problems and producing outstanding results.

(EL) (SA)

https://www.sagaratechnology.com/blog/2019/11/07/how-to-create-design-system-for-user-interface/