image of a man balancing pencil on his lips

Use Balance to Create Fulfillment in Web Design

Balance in design is the distribution of the visual weight of elements between both sides of the design to create unity, fulfillment and satisfaction. 

When organizing your web page, the first things to ask yourself are: Will my design be attention-grabbing? Will my customers feel comfortable using it? It is important to have a well functioning design, which also looks visually appealing. That is why we use such a fundamental design principle as balance. 

Balance is easy to understand in the physical world. If something is off-balance, it will tend to fall over. Visual balance is just as useful as physical. Our brains favour balance and recognize it on a subconscious level. 

On the other hand, things that are chaotic and unrecognizable give us tension, which will inevitably lead to lower conversions. Moreover, without visual balance, viewers may not see nor spend time in areas with less visual weight. Information in those areas could easily go unnoticed. What if it is an important one? 

In this article, you can learn basic balance principles and how to implement them in your web design.

Types of balance

There are a few things that you will have to note when trying to balance your layout. Design elements such as objects, colours, textures, white space and others have to be well organized on your page to create a balanced composition. There are ways you can achieve it with these four types of balance:

  • Symmetry
  • Asymmetry
  • Radial balance
  • Mosaic balance

Understanding these types and how they relate to design can help you become a better web designer.

Symmetry

Symmetry means that everything on one side of the axis mirrors the other side. As a result, the visual weight is distributed evenly. It makes the composition look stable and creates an orderly look. Natural symmetry can be both vertical and horizontal. It can also have multiple axes at the same time. 

Usually, the first thing that comes to mind when you read symmetry is the human face. Another popular example is the pattern on the wings of the butterfly. The more symmetry we see, the more attractive it looks to us.

Research shows that humans and animals have developed a preference for symmetry through evolution:

“Work with human infants demonstrates that children begin to show preferences for vertical symmetry by four months of age, a preference which is well-established by twelve months of age.”

Symmetry works well for those designs that display comparison or highlight two focus areas of the company’s business. For instance, in his website landing below, Adham Dannaway emphasizes that he is a part designer and part coder. 

web landing with a face which is divided into two parts desingner and coder symmetrical balance
heatmap of web landing with a face which is divided into two parts desingner and coder symmetrical balance

The main disadvantage of symmetry in design is that it may be considered boring and too old fashioned. However, if done well, it can have a classical, sophisticated look. For example, graphic designers often use pure symmetry for wedding invitations and business cards.

Another advantage of symmetry is that it is easy to establish on the webpage.

Asymmetry

Balance does not only mean having all the elements symmetrically distributed. You can also maintain balance despite the lack of symmetry.  

Asymmetrical balance, sometimes called informal, is created by the juxtaposition of contradicting elements. For example, you can have several small elements distributed on your page to balance out the big ones. You can also position smaller elements further from the center of the composition. All in all, these asymmetrical designs are balanced, but just not through perfectly similar halves.

It usually looks more eye-catching than the symmetry. Designers tend to use it in more modern and energetic designs. It can also give your page a sense of movement.

SaaS websites often use asymmetry to deliver key product messages. For example, Hubspot below places a more intense element, their selling proposition and Call-to-Action on one side, while the other half has more subtle visual graphics. 

Hubspot landing page design asymmetrical balance
heatmap of Hubspot landing page design asymmetrical balance

Asymmetry is often played around with a lot of white space. As Alex W. White describes it in his book

Asymmetry requires a variety of element sizes and careful distribution of white space”. 

In the same book, White also states that: 

“Asymmetrical design evokes feelings of modernism, forcefulness and vitality.”

Radial balance

If you do not want to balance the composition on the sides of the axes, you can also choose radial balance around a single central point. It will give your page a sense of unity and movement.

Most of the time, designers establish radial balance in the center, but it is not a necessity. 

To create radial balance, you need to establish a focal point and balance the rest of the composition around it. You can do it through placing objects, colors, or textures at equal distances from the center, or organizing it in a spiral to or away from the center. The central point will attract the most attention, so usually, web designers reserve it for CTAs or other important clickables.

Radial balance is often used in pricing pages to highlight one pricing model. Web designers often apply size or color contrast to establish the central point. It perfectly resembles Hick’s law, which states that “the time we take to make a decision is directly proportional to the possible choices we have.”

In the example below, Whatagraph did exactly that. They used color contrast for the mid-value plan by surrounding it with a low and high-value plan. 

Whatagraph pricing page radial balance
heatmap of Whatagraph pricing page radial balance

By using radial balance and contrast, Whatagraph cleverly suggests which plan will most likely work for you best.

Mosaic balance

The last one on our list is a mosaic balance or crystallographic balance. It is perhaps the most difficult one to organize.

Mosaic balance can sometimes appear as noise or a mess because, at first glance, it lacks visual hierarchy. However, if it is done right, this type will impress your clients. Think of paintings by Jackson Pollock.

Painting Image - Buttherfly - Tribute Jackson Pollock by Juan Jose Garay
Buttherfly - Tribute Jackson Pollock Painting by Juan Jose Garay

Pinterest’s layout is an example of a mosaic balance. Even though it feels a bit chaotic due to lack of alignment, a clear structure of five columns organizes it. At least to the point where it looks visually pleasing. Set margins between the elements also contribute to some kind of order. 

Pinterest's layout mosaic balance
heatmap of Pinterest's layout mosaic balance

Generally, this type of balance does not have any rules and is usually avoided by designers. It is incredibly easy to overdo it and to leave the web page jumbled, just like an example below.

an example of really bad balance in web design, some random website with random images all over

Yes, it is a real and functioning website. Oh, dear.

Conclusion

The balanced layout is an essential part of your web page development. If your page has a sense of a logical unity, it will be easy to navigate and comfortable to use. Your design will also have an overall impression of stability and sophistication. 

You can achieve it through classical or formal symmetry, or modern and informal asymmetry. You can also use a radial balance, which will give your page a dynamic feeling, or finally create an organized mess with mosaic balance. 

Follow these simple tactics, and you will surely attract attention from potential customers and increase your conversions.

Product Hunt deal

FREE for everyone:

Days
Hours
Minutes
Seconds

GET HEATMAP