The Concept of Balance in Web Design

The Concept of Balance in Web Design

In design, balance is the notion that elements are symmetrical, which in turn creates harmony, order, and cohesion. Often found in nature, the concept often yields aesthetically pleasing results that are complete in our minds. On the other end of the spectrum, asymmetry is a break in balance and can lead to visually interesting results in return. You’ll see just as physical objects have weight, so do the elements of a layout.

The Concept of Balance in Web Design


When applied strategically, this concept of balance can help guide the viewer’s eye to places we want in a design. In this article I will cover the concept of balance and the factors that influence it. The outcome will give you the designer the tools you need to incorporate this concept into your work.

What is Balance?

Balance is the equal distribution of visual weight in a design. Visual balance occurs around a vertical axis; our eyes require the visual weight to be equal on the two sides of the axis. We are bilateral creatures and our sense of balance is innate. When elements are not balanced around a vertical axis, the effect is disturbing and makes us uncomfortable.

Symmetrical

Symmetrical balance, or formal balance, occurs when the elements of a composition are the same on either side of an axis line.

Shapes

The website for Kite Experience, shown below, illustrates this concept well. Many elements and blocks of content are centered and are evenly proportional on both sides to create bilateral symmetry, and we can see how sections of content are kept to the same size and then translated across the page. Even when this grid is broken up, the proportions still match up to compensate for the difference.

Kite Experience

HTML5 Demo
This design remains centered, creating a horizontally centered look. Although some of the imagery at the bottom isn’t centered, the overall balance of the design is.

HTML5

Vertical Balance

Vertical balance is the vertically oriented version of symmetrical design. If one were to split a website along the vertical axis along the middle of the page one would find that the top and bottom halves reflect on this axis.

Balance
Klee Painting

Horizontal Balance

Conversely, when elements are balanced left and right of a central axis they are balanced horizontally.

Last Supper

Other Forms

Other forms of symmetry exist that aren’t readily expressed in web design but are widely popular in logo and print design. Still, each can be used in design to create strong points of interest and visual stability. These forms are:

Radial Balance
Other Forms

Bilateral Symmetry, or Reflection Symmetry, exists when a composition is balanced on more than one axis. It’s often known as the “mirror” effect. Reflection symmetry can take on any direction: vertical, diagonal, and anything in between.

Bilateral Symmetry

Radial Symmetry, which occurs when elements are equally spaced around a central point. In design, it can be used to portray motion or speed. Even on a static medium, rotational symmetry can convey action.

Radial Symmetry

Asymmetrical

Asymmetrical balance is the lack of symmetry. Asymmetry can also represent an object that breaks a predefined pattern of symmetry, or an imbalance of design elements.

Shapes Assymetry

You’ll find this concept exemplified on the website for The Fashion Sketchpad shown below. The result is a design that is creative and visually appealing.

Note that balance is achieved through visual weight: the purple is heavier visually, but is balanced by the abundant use of the color aqua to the right. Rather than mirror images on either side of the layout, asymmetrical balance involves objects of differing size, shape, tone, or placement. These objects are arranged so that, despite their differences, they equalize the weight of the page.

Asymmetrical balance is used often on the web due to its versatility. If you take a look at most two-column website layouts, you’ll notice that the wider column is often lighter in color – a tactic that creates a good contrast for the text and main content. The diminutive navigational column is often darker, has some sort of border, or is made to stand out in another way, in order to create balance within the layout.

The Fashion Sketchpad
The Fashion Sketchpad

Symmetry vs. Asymmetry

How do you know when it’s right to use either? In general, symmetrical objects are less heavy visually. This is why you see this technique used often for backgrounds, patterns, or anything that needs to be visually subdued.

So if you’re designing a website that calls for stability and a strong organizational structure, a symmetrical design may be well suited. It’ll lend a trusting, safe feel to the design. On the other hand, if you’re looking to break apart from what is considered safe, an asymmetric design can reinforce that message. Asymmetry can add spark to an otherwise visually safe design.

Mcdonalds

  • Symmetry is best used: For layout or any other time you need to keep content roughly the same size and spanned across the entire website or print design.
  • Asymmetry is best used: To draw attention to a certain area by throwing a viewer’s eye off balance.

The Rule of Thirds

The Rule of Thirds is a visual arts rule that states that an image should be imagined as divided into nine equal parts by two equally-spaced horizontal lines and two equally-spaced vertical lines, and that important compositional elements should be placed along these lines or their intersections. Aligning a composition according to Rule of thirds creates more tension, energy and interest in the composition than simply centering the feature would.

So how do you split a layout into 9 equal parts? Jason Beiard states the following method for applying the Rule of Thirds to your layouts:

To start the pencil-and-paper version of your layout, draw a rectangle. The vertical and horizontal dimensions don’t really matter, but try to keep straight lines and 90-degree angles.

  • Divide your rectangle horizontally and vertically by thirds.
  • Divide the top third of your layout into thirds again.
  • Divide each of your columns in half to create a little more of a grid.
  • You should have a square on your paper that looks similar to the rule of thirds grid.

Showcases

MacAllan Ridge
You’ll see in this asymmetrical layout that balance is achieved in the navigational column through the use of border. This tactic is used a lot in asymmetrical layouts to create contrast from the main text, which is dominant

Macallan Ridge

CGVietnam
The website for CG Vietnam, a graphics development firm, is another study of the capabilities of asymmetry. The background provides a calm, stable backdrop for the imbalance.

CGVietnam

Biltmore
To create a sense of order, the website for the Biltmore uses a symmetrical layout where content is evenly distributed in blocks. As you can see, the use of illustration adds another dimension to the website, breaking the monotony.

Biltmore

RJay Haluko
The multidisciplinary designer RJay Haluko presents his portfolio is a symmetrical format. In web design, symmetrical design is often translated through the use of a grid, as is the case on portfolio websites. To break up the monotony, the header features as asymmetrical layout, giving you a glimpse of what’s ahead in a compelling format.

Weatherre Imagined

Polecat
An example of radial symmetry is portrayed on the website for Polecat. It’s also featured in the “Our Team” section, creating a balanced yet visually interesting layout for this iPhone app developers website. This balance is offset by an asymmetrical background, adding visual interest.

Pole Cat

Warble Entertainment
The use of a symmetrical layout is clearly defined on the website for Warble Entertainment. Evenly sized blocks are translated across the screen, forming a grid. The logo is also balanced by the cartoon bird illustration on the right. Whereas the layout is formal, the background adds plenty of visual interest to the website for this entertainment company.

Warble

Paradox Labs
You’ll see in this example for Paradox Labs, the balance is predominantly vertical. If you fold the design along the horizontal axis the top and bottom elements remain balanced vertically.

Paradox Labs

Get Active
Here’s another example of a website featuring radial balance. The elements are all spaced equally around the large central illustration. The result is a design that conveys action and supports the website’s theme very well.

Get Active

Zagg
Symmetry is exemplified on the website for Zagg. If you split the design down the center, you’ll see everything basically reflects perfectly, creating a nice horizontal balance.

Zagg

31 Three
31 Three is asymmetrically balanced with the large image on the right balancing the text and smaller images on the left. Notice how the 3 circular images on the left are symmetrical forms and through translation symmetry they create a rhythm and flow leading to or from the large image on the right.

31 Three

Conclusion

As you can see, the use of balance in design can be a very powerful tool. When using symmetry, the result is one of order, cohesion, and professionalism, whereas asymmetry lends itself of interest, character, and uniqueness. It also can be used to showcase points of interest in the design. Discover the message your client is trying to achieve with their website and use these examples to relate which will work best for them.

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.