A guide for creating a Style-guide and UI library

Image source “Unsplash.com”

Are you excited to know what it takes to design a style guide? Then you are on the right page.

In this article, we will explore What exactly a style guide is? Why is it important for any product?, and What sections are included in it?

So, let’s get started…

Good designed product has its basic things correct, and a style guide is one of the things which bring consistency and value to the product. And you know how consistency keeps products recognizable.

Now you may have a question, what is the design system then?

The answer to your question is, the design system is very deep which covers a lot of aspects (check these 5 best design systems). On the other hand style guide only focuses on styles and components to be used in the product (Of course, you have to think of their states and usage pattern).

Why is it important for any product? 🤔

1. Consistency

When a user visits a product, they gain a perception about it. By making a product consistent takes less time for the user to recognize the elements inside it and act on it. For sure this helps to improve the user experience at a certain level.

2. Defining standards and usage

Few cases occur while a product is getting developed. And due to some time constraints, developers fix those cases by themself.

Example, a case could be adding a new font size.

But if you already have defined standards and usage of typography in the style guide then such cases could be tackle by using it. And it will help the developer to focus on the functionality part instead of other things.

3. Value

Consistency allows your product to appear more professional and reliable. By using a style guide you make it easier to maintain the quality of your product and make sure about future addition would have the same quality.

What sections are Included in Styleguide? 🧐

1. Grid system

Every other product owner wants to enable the responsiveness of a product so the users can visit the same product from different interface sizes. To do so the grid system plays a major role here.

Also, the grid has many other advantages like it is being used in designing different layouts and helps to have consistent spacing throughout.

The grid system has few aspects like container, gutter space, number of columns, and margin. Generally desktop has 12 columns grid system, the tablet has 8 columns, and the mobile has 4 columns.

If you are interested to study the grid system in detail please check the Bootstrap grid system.

For the below grid system, I have used 1200 px of full width, 30 px of gutter space , 70 px of column width , and 1170 px of container widht.

2. Typography

Typography has been used to create information reading patterns throughout the years and yet it is so powerful technique in every other form of design.

Typography can also contribute to accessibility if it is defined correctly. Disable users also can gain an understanding of the information flow using screenreaders (To do that I would recommend studying basic HTML structure).

Typography should consider aspects like the readability, product type/nature, styles availability in selected typeface, glyphs style($, @, %, etc..).

Below is the typography defined by me for my recent work. You can include more stypescales if required.

3. Colors

Now we are at the most loveable part of the style guide. Colors bring life to the design as each of them indicates a certain meaning (Check color meaning). And it helps the product/brand to create a unique identity and impression.

Before selecting a color palette for a product, consider a few things:

1. Select color those are inline with the product nature/type (like red indicates passion and energy).
2. Pick palette using color schemes, so combinations will go correct (for example, I have used an analogous color scheme in the example image below).
3. Don’t forget to add denotive colors even if you haven’t used them in the design. This will help developers to handle unexpected cases in the development phase.
4. Consider disabled (color blind) users too, who can’t see colors. My advice to tackle this situation is to select the colors which have different saturation so the user could easily identify the colors using their intensity.

4. Imagery

According to marketing industry influencer Krista Neher, the human brain can process images up to 60,000 times faster than words. Images are very important in design to convey the product/service vision more effectively.

And defining image usage in the style guide is kind of expressing your product consistently. If you don’t have a budget for the stock photos, refer free stock image websites like Unsplash, Pexels. (visit here for more resources).

Example, I have picked calm theme in below imagery

5. UI components/library

Most of the time we skip adding UI components into the styleguide. As a result of this, we invest more time communicating the interaction of those components to the developers. And this is not a good sign for anyone.

I tried to have as many components as possible in this section. You may have more components than listed below.

5.1 Buttons

You can define the style of the buttons to be used in the design. and group them into primary, secondary, tertiary, and links as per your preference and solution need.

Also, define a few more details like states, size, and usage pattern. You may not have used all the button states in the design but it will help a developer to code interaction accordingly.

5.2 Form elements

Filling out the forms is a very boring task and if the system is failing to streamline it then users may drop their interest before signing up for your product.

Defining the interaction of form elements is very crucial, consider a few things listed below:

1. Every state of form element should be unique and able to communicate the current status.
2. Local validation and typing errors should be displayed before submitting the form. So you are improving the form submission success rate.
3. Use helper text for hard/complicated labels.
4. Try to have alternative text to explain the states if required (Mostly used in disabled elements).
5. If you want to try a new interaction concept, just make sure it’s simple and fast to interact with it.

5.3 Other elements

The overall intention to add other elements into the style guide is to make sure you cover their interaction so that you can save your time communicating the same to the team members.

6. Iconography

Nowadays we have a more complex solution and minimally communicating that information is a challenge for every other designer.

Here icons could help us to do that, and defining iconography for a solution is a must. I have written a blog on “Optimizing Icons for Application” that could help you to make icons as optimized as possible and allow their effortless use.

Considerations for defining iconography:

1. Choose a single style (Outline or Filled) for your icons and follow throughout an icon set.
2. Follow familiar and simple metaphors will help users to understand icon meaning quickly.
3. All icons in your set should follow the same proportions and sizes (The recommended grid is 24 x 24 px).
4. Use one kind of line of thickness for the icon set.
5. If your icons are rounded corners, all other icons in a set must follow the same pixels of the rounded corners. It gives consistency to the icon set.
6. Don’t make smaller icons detailed as they will be not visible enough and will look cluttered.
7. Your icon has to be big enough to capture fingertip actions for small devices without frustrating users. The average adult finger is about 11 millimeters (mm) wide.

Making a style guide for the product always works in your favor. It saves your time communicating with developers/team members, adds consistency to the solution, gives the best interaction experience to the user, and boosts the business.

What are your thoughts on this article? Let me know your suggestion or if I missed anything.