Our designers just create something for you. Show your love with view our works.

It's Time To Think About User Interface Standards.

Elux Space
Published on
August 22, 2022
Table of Contents

The User Interface or Front-End Style Guide is the most important part that is used as a guide in designing a User Interface (UI). In other words, the Style Guide is used as a rule to make UI elements more consistent when designing an overall project. There are several UI elements, such as colours, typography, icons, and others.

Why use the Style Guide?

Style Guides are used for several reasons:

1. Visual Consistent

The Style Guide on visual consistency helps design a cohesive (unified, unified, compact) that visually reflects the language. Elements of visual design and interaction design, for example, such as colour, typography, animation and load time.

2. Context

Context explains why the designer chose the design by providing a visual overview of the design page.

3. Collaboration

A team needs a reference manual as a reference in project work so that within a team it remains in the same reference.

4. Code Standard

Code standardisation is used to make writing standards of a program code such as HTML, CSS, or JavaScript so that designers can see whether the design that has been made deviates from the reference or standard that has been determined.

5. Consolidation

Consolidation is used by designers to find references from all components.

There are several steps in creating style guidelines.

1. Colours

Determination of colour is needed so that designers have the right direction to create a branding. There are predetermined colours in colour, namely primary, secondary, and accent colours.

Primary Colour

Primary colours are the main colours that may be displayed frequently on the screen or the screen in application elements.

Secondary Colour

Secondary colours are colours that are a mixture of primary colours. Secondary colours in styles are used for micro actions such as sliders, navigations, progress bars, links or links for headings.

Accent Colour

Accent colour is usually used as a pandan colour if an error or error occurs, success, warning, or information.

Like the colour example below

  • Red is used as a marker if something goes wrong (error, wrong)
  • Yellow indicates if a warning occurs (alert, warning, caution)
  • Green as a marker if successful in carrying out a command (success, right, safe)
  • Blue is used to mark information

2. Gradient Colour

Gradient colours are part of the design. The combination of primary and secondary colours can provide several gradient directions such as diagonals.

3. Colour Symbol

The existence of colour symbols is used to be more consistent to provide colour during the design process.

4. Typography

There are typographical elements that are very important in UI design, namely front, font size, and colour. There are three stages in determining typography.

Choose a font family

Google defaults fonts and fonts such as Robot and SF Display pro can be used to design a mobile-based project.

Choosing a Font Weight

Font Weight is a measurement of the weight of the font used to determine the thickness of the font.

Creating Layer Styles

After selecting the font and font weight, the next step is to create a layer style. Layer Styles are used to give effects so that objects don't look too flat.

5. Icons

There are several types of icons including flat, outline, filled, and many more.

Icon Grouping

Grouping Icons is optional, it can be grouped or not. The grouping of icons aims to make it easier to design to be more efficient.

Ready to kick-start your project? Click here