Unity of Style in Web Design

How to ensure the unity of the website style? The essence of a style guide.

Rick Mess       |       July 24, 2020

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.

Outcrowd project. MEMO

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.

Outcrowd project. MEMO

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:

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.

Outcrowd project. Clover

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

2. Graphic unity

3. Unity of typographic

Outcrowd project. Clover

4. Icon collection

Custom icons set for project МЕМО

5. Images

6. Grid

7. Conditions and interactions

8. Exceptions to the rules

(rarely used and require professionalism)

9. Recommendations and restrictions

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.