How to design balanced web layouts

Do you ever wonder why some websites seem a bit off and make you just want to close your browser and move on?

Almost always, the layouts of these sites are off-balance.

The great thing about balance is that it keeps designs from becoming an unattractive, confusing mess that adversely affects the user experience.

A balanced layout is the equal distribution of visual weight in a design, you will find that every design you think looks good, has a well-constructed balance underlying it.

You may not realize that the clarity and the appealing vibe of a website are the results of symmetry because it’s such a natural and way of creating harmony.

Balance symbolizes stability and a stronger organizational structure that lends a trusting, reassuring, and safe feel to a web page.

Our mind searches for stability and order. Lack of balance tends to make us unsure, confused, and if we are honest, a bit afraid.

A balanced design is a great way to arrange elements so some don’t outweigh or overpower others, so the visitor can flow through the layout, the way we want them to. This creates focal points  (like buttons) to be crisp and clear.

The most common way to achieve a balance in layouts is to maintain symmetry. While some critics refer to this type of balance as boring or predictable, I personally always follow it and recommend to my student to do the same.

 

So, what is a symmetrical balance?

A symmetrical layout is the visual distribution of the weight of objects, colors, and space. If we imagine that the layout was a scale, these elements should be balanced to make a design feel anchored and stable.

If you want the layouts of your web pages, and the entire website, to look elegant and polished, and increase conversion, it’s a great practice to use symmetry. This effect is easily achieved by placing similar objects on either side of the center axis. Elements on a web page that have been properly balanced will create a visual connection with each other to form the brand’s story that the visitor can follow.

This can be achieved by using images of the same size and color palette, grid-based titles and paragraphs, or spacing, and more importantly, white space (you can read more about the use of white space in this post Let Those Pixels Breathe.)

Here are a couple of examples of website that I designed that follow this format:

 

 

You can see in the image above that we have approximately the same amount of content on each side of the layout.

Symmetrical balance occurs when the elements on a page are the same on either side of an invisible central line. So the page doesn’t optically tip to one side.

Our mind automatically favors symmetrical objects that are forming around a center point. It is visually pleasing to be able to divide objects into an even number of symmetrical parts. This orderly construction increases conversion on pages. The content is easily found and digestible, and the path to the desired call-to-action is clear.

So imagine an invisible line going vertically through the center of your page. When designing your web pages make sure that the weight and value of the composition of elements are essentially mirrored.

This will create well-balanced layouts, and, as a result, when elements are balanced and symmetrical, visitors can easily find and absorb the content. When a design composition has balance, it just feels right. It puts the visitor to your site at ease and they are ready to be converted into paying clients.

 

What is an asymmetrical balance?

When a webpage layout is unbalanced, it feels as if it’s tilted to one side, and it makes us uncomfortable. So we will most probably want to move away from the page. So imagine an invisible line going vertically through the center of your page.

Elements are unevenly spaced, unevenly sized, there is no focal point, no cohesiveness, or order.

As you can see in the image below, the “Do” side is crisp and clear, and highly organized so we can progress from one element to the next with the ease of a natural flow. The “Don’t” side is chaotic and disorganized and our eye isn’t sure which path to follow. This leads to confusion and a higher bounce rate because the visitors can’t follow the story the page is telling.

 

 

If you want to learn more about balanced layouts, in the Layouts module of my DesignClass course I teach the Do‘s and Don’ts of balanced web pages and how to create and enhance cohesiveness and order, which ultimately lead to high conversion rates.

 

Enjoyed the read? Learned a new thing? Let’s stay connected. You’ll love my emails.

By signing up, you agree to be added to the FlixFrame Design Studio and BrandFrames newsletter email list. You can unsubscribe at any time!

Your contact details are securely handled and stored by Mailerlite and ConvertKit.

No spam, ever. Period.

Scroll to Top

Sign up to get your FREE eBook/Lead Magnet sample pack, yours to completely customize and brand to match your brand.

By signing up you’ll be added to the BrandTemplates and FlixFrame Design Studio email list. You can unsubscribe at any time! Your contact details are securely handled and stored by Mailerlite and ActiveCampaign. No spam or sharing your information. Ever.