The UI Style Guide for the Beginners

The creation of the design system requiring huge efforts from the product teams. Considering the efforts and time that need to invest in creating the design system, for the smaller, less mature companies or startups, instead of the design system, they may have something called a style guide. In this article, I will walk through what is the style guide, why it is important in UI design, and what are the elements in the style guide. Let’s dive in!

What is the Style Guide

The designer is common to be viewed as too creative to be grounded, but if you truly understand how detailed and systematical the UI designer to craft their project and build the style guide, you may feel surprised by your pre-judgment. The UI designer may have an “a-ha” moment that to thank for the inspiration, and a professional designer will also focus on increasing the efficiency and consistency in their works. Therefore, the style guide is needed.

A style guide is a set of standards, principles, and rules that helps designers stay visually consistent and work more efficiently.

Takeaway

If you are first to know about the style guide and feel difficult in creating your own, here are some great works from the talented designer that will inspire you. Style Guide by Pro Designer.

Why you need the Style Guide

• It defines the way the brand will look and keep the consistency and uniform across marketing channels and assets such as logos, fonts, and UI elements.
• It serves as the documentation to store all your standards and rules in design that you could refer to and allows for future interaction.
• This will increase the design efficiency and help to communicate with the developers, and to a clearer CSS code.
• It ensures to convey a continuous brand experience to users and to build the brand and brand loyalty.

Style Guide Elements

The elements inside the style guide:

1. Logo

The logo is the first touch-point that the users connect with the brand. To create a logo, there are several points that need to take into account. Color, as it determines what kind the mood and attribute that the brand wants to convey to the users. Size, based on where your logo will be used, the size you need may vary.

A company’s logo is a graphic element or mark that serves as the primary point of recognition for the organization.

If you are a beginner without much graphic design background, compared to create the graphic logo, you could start with creating a wordmark logo by selecting that font family that could represent your brand.

The Logo that I created for an app that targeted 2–8 years kids.

Takeaway

Here are the brand guides to create a logo and if you want to know more about the logo size, click here.

2. Color Palette

Different color represents different moods, and when deciding the colors to be used for the products, the brand attributes and personality need to take into consideration.

A color palette sets the tone of a product, site, or app and creates an emotional connection between that product and the user.

The other principle to reduce your workload in selecting the colors is to keep the 60–30–10 ratio, which means 60% should be the main color that is neutral and easy on the eyes, and the secondary color of 30% that contrast nicely with the main color to create visual interest. The remaining 10% is the accent color that to be the most vibrant as it will emphasize critical elements. To follow these prescribed proportions can help to organize and balance your designs.

photo credits: mastersinsychologyguide.com

3. Fonts

The font is another important element that occasionally is overlooked as it may not easy to stand out compared to the imagery and icon. But the truth is that the selection of the font directly affects a product’s readability and ease of use. To determine the font is not only about the font family, the usage of font size, width, color, and text structure, is all matter.

Takeaway

Here explain the typography guide for the UI beginner and the rules to pick the right UI fonts.

4. Grid

The Grids help to align and balance designs and shape design layouts by keeping content organized. Moreover, it optimizes the design workflow and increases design efficiency. The part that may annoy some UI beginner is it seems a bit complicated as it requires some calculation and understand how to set the gutter, column width, and offset. The 8pt grid guide is a good starting point to comprehend the grid system, as it scales perfectly in all the different screen displays and is a good basic unit to work with. If you want to know how to set the layout system in the sketch, here is my previous article with the exact example.

5. Icon

The icon is the visual language that represents the features and functionality. The icon in the style guide should clearly communicate your brand personality and attributes to the users while also being functional. Scott Lewis introduces how to design the icon in 6 easy steps and I strongly suggest you have a look at it. About the icon size, the recommended target size for touchscreen objects is 7–10mm which means the size of the icon should be at least 48 px x 48 px.

Takeaway

Here is the checklist of the icon by the author of Nick Babich, who is also the editor-in-chief of UX Planet.

Use the grid template to create the icon

I designed the icon for the speech app company, as the stronghold for this speech app compared to others is by showing the movement inside the mouth to teach the kids to pronounce and the hippo has a big mouth, which kids are familiar with.

6. UI Component

UI elements are the most common design elements such as the buttons, forms, dropdown that used in product design. By adding these elements in the style guide will create consistency and depict a better overall look. The key here is to keep the consistency of the components and clearly explains the scenarios of its status, usage, and style.

7. Imagery

Imagery communicates and differentiates a product through visuals and it refers to the photography and illustrations that throughout the products. Same as the color palette, the selections of the imagery should line with the brand’s tone and attribute. Material Design explains the principles and usage of the imagery.

Imagery can both enhance the user experience and express a brand’s visual language. — Material Design

Takeaway

Here are a few of free imagery sites with high-resolution images: Pixabay, Unsplash

Below is the style guide I created for the speech app that targeted the kids from 2 to 8. I incorporate the elements outlined in the article that matches the tone and attribute of the company and its’ product. The company is striving to provide the best speech learning by offering personalized, fun, and interactive products for the children. Hoping this example will offer a more comprehensive introduction of the design style.