close

Styleguide

Synonyms: manual of style, stylebook, brandbook, design system

Is a system of carefully selected elements and rules for developing a design. A brand style guide is a set of rules that explains how an organization presents itself to the world through its logos, fonts and colors, photos, and other interface elements.

 

Singleton UI Kit by Craftwork Studio 
 

Why to Use?

  1. To achieve consistency and uniformity in the design of the company's products, both mobile and web.
  2. To optimize cooperation between designers and developers. If the project is large and many people work on it, it is much easier for them to follow the same rules for the chosen style.
  3. To simplify the development process removing some of the tasks from layout designers and programmers.

 

Elements: Tips and Tricks

Color

The palette includes primery, secondary, and neutral colors. Each color is assigned an individual code, which eliminates the possibility of errors in the layout and in future design improvement. Harmonizing of the color palette allows you to place style accents and highlight the areas you want users to focus on. Explain how, where, and why certain colors are used.

Typography

The styleguide contains information about the fonts used, font style, and font sizes. Use a minimum number of fonts. A site with more than three fonts looks unprofessional and untidy. Start with two fonts — one for the headings, the other for the body text. Also, add examples of using typography to help designers and developers understand when to use bold or italics, etc.

Components

This is about the states of links and buttons when the user hovers, focuses, and visits them. And also about checkboxes, checkbuttons and other tools that allow you to have a dialogue with the user. This is an important part of the styleguide, because the components provide the interaction between the site and the user. Make the buttons and other components visible and user-friendly.

Iconography and Illustrations

The icons tell the user the meaning of the current action and what will happen after it is completed. In terms of information content, this is the most useful tool. Selecting icons and illustrations is important to focus on the specifics of the audience and take into account the features of the product, service, and brand.

Logo

The style guide contains the rules for using the logo on the site, the allowed color combinations, and the correct ratios of margins and lines. The logo is the first step towards a corporate identity. It sets the tone for the whole site and creates the mood.

Grids and Spacing

The grid helps to keep the correct proportions, and adapts the product to different devices: desktops, tablets, smartphones. To avoid layout errors, it is important to regulate the grid and margins and strictly follow them. There is a 12-column grid most often found in layouts. But the grid can have any number of columns and adapt to the parameters of each project.

Styleguides

share the term