Unity of Style in Web Design

A style guide is a collection of modules and rules that helps to set up a website in one style and simplify the work of designers and developers. The unity of style works for creating an integral image of the company or product and their designed purpose.

It’s an ideal case. But does style guide always support a unified style and reflect the company’s mission? When it’s the key to harmony, and when it’s the limiting set of rules and patterns?

To understand this, let’s try to figure out what the unity of style means and how to achieve it in practice. Let’s consider a particular case — a style guide for website design.

‍

‍

‍

Why is the unity of style necessary?

In the web design, the unity of style creates the understanding that we remain within the same site, no matter which page we go to. This is not only a tribute to aesthetics but a functional necessity. The unity of style helps users to navigate the information space of the site better. Harmonious unity and coherence inspire user confidence in the product. All this is wonderful, but how to achieve this?

1. Unite the idea and its visualization

The unity of style should work for the site, and not for itself. Sometimes designers fall out for creative and forget about it. The unity of form and content is the foundation, whereon a style should be developed. You can’t take the set of modules and templates you like and use them far and wide.

Brand design is part of the brand’s body, namely its face. We all have eyes, ears, nose, and mouth, but that doesn’t make us identical, right? However, designers, armed with a style guide, readily stamp clones and call it the unity of style.

The unity of style isn’t just a set of rules and modules. This is an individual system within the design system, that works for Idea.

In practice, designers often sacrifice common sense for the sake of trends and their own convenience. Trendless color palettes, fonts, and animations are used thoughtlessly. The work is in full swing, like on a factory conveyor. No one denies the need to be in a trend — these are the rules of the game in the market. The paradoxicality of business is that you need to be standard (understandable) and special at the same time. For this, you need to study the brand and target audience properly, and then find a balance between unification and uniqueness. A reasonable style guide restrains inappropriate creativity but doesn’t obstruct the creation of a unique project.

A faulty understanding of the essence of the style guide or poorly compiled guide is the reason for the loss of uniqueness and integrity of the brand image.

The goals and topic of the site determine the hierarchy of content, navigation on the site, and its features. These goals are the basis for the development of the style guide.

When we meet a stranger, we respond to his posture, face and facial expressions, gestures, and tone of voice in the first instance. It takes us a few seconds to understand whether we like them or not. The same thing happens when we meet the “brand face” or website. Any brand has a face, posture, tone of voice, and message for the audience. The task of the designer is not just to create an attractive face, but to reflect its essence.

Before developing a style guide, you need to delve into the goals of the product and think through how you can create contact with users and how to translate these goals to them using visualization means.

‍

‍

2. Rely on the basics of composition

To develop a style guide, you need to clearly know the basics of composition and style unity. These are not identical buttons and icons, not the same fonts and indents, not the same palette. We need to create an integral style, not an army of clones. What exactly helps achieve visual integrity?

Three laws of composition:

1. Unity

2. Subordination

3. Balance

‍

A style guide should be based on these laws.

‍

The unity of style means:

• proportionality and subordination of parts and the whole;
• inner hierarchy of elements, prioritization;
• uniform proportions, rhythm, balance, emphasis, color palette and tone, typographic, and animation.

Only on the basis of an understanding of the brand’s mission (goals of the website) and knowledge of the composition you can start creating a style guide.

‍

‍

Rules for creating a style guide or an integral style

The style guide rules should be short, simple, and clear. It’s better to write them in the form of friendly recommendations and include examples of use. A lengthy list of requirements looks like a bunch of restrictions and ties the hands and imagination of the designer. Only the most important things should be considered:

Common goal

All design elements and compositional techniques must be subordinated to the general concept.

Design language and tone of voice

The design language should show the overall goal of the project through justified and reasonable visualization tools. It should be integral, logical, and understandable to users. The design language and tone of voice serves to reflect the tone of the brand’s voice (openness, friendliness, credibility, competence, easiness, etc.)

Design tools

All tools should work for creating the desired image and attraction of the target audience. Their combination should be integral and harmonious. Each tool of design (color, shape, graphics, typographic, icons, images, logo, etc.) should be an organic part of the whole.

Basic tools and techniques for creating a unity of style:

1. Unified color palette

• color scheme of the website (a set of primary, secondary and neutral colors)
• color matching
• color hierarchy
• color accents on the main
• tone density

2. Graphic unity

• common melodics of lines and forms
• rhythmic unity of forms, colors, lines, proportions
• unified scaling
• unified form elements — buttons, text fields, drop-down lists, checkboxes

3. Unity of typographic

• reasonable type of fonts, their color, size, line thickness
• hierarchy and consistency of fonts
• indent and text alignment

‍

‍

4. Icon collection

• compliance of the icons with the goals and the overall style of the site
• stylistic unity of icons
• clear language of icons
• icon hierarchy

‍

‍

‍

5. Images

• expression of brand ideas
• correspondence to the topic of the site
• compliance with the common style of the site

6. Grid

• grid system
• space structuring
• distances between sections and elements, indents, “air”
• openness or closeness

7. Conditions and interactions

• fitting and consistent animation
• conditions of forms, links, and buttons on hover and usage
• hover menu view, active item, drop-down menu

8. Exceptions to the rules

(rarely used and require professionalism)

• deviation from recommendations to attract attention (for example, creating an emphasis, еpatage)

9. Recommendations and restrictions

• style options and suggestions
• what is permissible for a given style and what isn’t

Let’s sum up

To achieve the unity of style, the designer should look at the project as an integral whole. When creating a style guide, you need to remember that first of all it’s a system that works for the image of a company or product. The design language should address the target audience and reflect the tone of the brand’s voice. The integral style is born from the unity of the idea and its execution. This is the external, semantic shell of the unity of style. The internal unity of style is based on the laws and principles of composition. Composition techniques will help to structure the project, balance the design, and make it integral and harmonious.

This comprehensive approach helps to create a useful guide, maintain the unity of style in any design work, and make it truly professional and integral.

‍