Blog

Design Principle No. 1 – Why Balance Makes Websites Look Good

This post is the first in a series focusing on the basic building blocks of design. With each new post we’ll feature a different principle that will help you understand how designers do what they do. If you’re ever tasked with creating something yourself, these principles can help you make good design decisions too!

Our brains like balance. Balance is the state of equilibrium that results from comparing visual elements to physical structures (such as mass, gravity, or the sides of a page). Balance is the arrangement of objects in a design in relation to their visual weight within that composition. Our mind likes when things are even and stable. When things are scattered and disorganized it gives us subconscious tension. Thus, visual balance is a key when designing all marketing materials, including websites.

SOME THINGS THAT AFFECT VISUAL WEIGHT:

  • Size – As you would expect, larger elements carry more weight
  • Color – It’s not fully understood why, but some colors are perceived as weighing more than others. Red seems to be heaviest while yellow seems to be lightest.
  • Density – Packing more elements into a given space gives more weight to that space
  • Value – A darker object will have more weight than a lighter object
  • Whitespace – Positive space weighs more than negative space or whitespace

 

BALANCE USUALLY COMES IN TWO FORMS: Symmetrical & Asymmetrical

Symmetrical – Both the left and right sides of the design are a similar size, shape, weight, texture etc. Symmetrical balance tends to be more formal and more static. It evokes feelings of consistency, elegance and classicism. Symmetrical design balance is easy to see and relatively easy to achieve.

Balance - Rich May

When we designed the website for Rich May Law, we made a conscious decision to have the images centered on the page. The middle image is in color, and acts as the focal point, while the previous and next slides are displayed in black and white and transparent. The layout is a three column grid with a centered footer.

 

Asymmetrical – The left and right sides of the design are different from each other. Asymmetry creates energy and tension. It’s more dynamic as there’s more visual variety in design elements. It’s more interesting because of that variety, but also more difficult to achieve. The overall design will use more whitespace to equalize the balance. Asymmetrical design evokes modernism and feelings of forcefulness, vitality, and movement.

When we designed the website for Connolly Brothers, we wanted to highlight the asymmetrical logo. The lime green logo symbol is balanced with the dark simple footer elements and minimal navigation. The photography is large and fluid, it stretches the entire browser window.

 

If you have any questions about design principles or the projects mentioned above, shoot us an email and we’ll be happy to help.

 

Additional resources:

1st Web Designer – Web Design Symmetry and Asymmetry

1st Web Designer – Graphic Design Basics: Design Principles

Digital Web – The Principles of Design

Top Design Mag – The Importance of Balance in Web Design

 

Related Articles:

Design Principle Blog Headers-02

Design Principle Blog Headers-03