Balance: the Basic Principles of Design

Balance in design is the distribution of elements of the design. Balance is a visual interpretation of gravity in the design. Large, dense elements appear to be heavier while smaller elements appear to be lighter. You can balance designs in three ways:

• symmetrical balance
• asymmetrical balance
• discordant or off-balance

Use of Balance in Design

Balance in web design is found in the layout. The position of elements on the page determines how balanced the page appears. One big challenge to achieving visual balance in web design is the fold. You may design a layout that is perfectly balanced in the initial view, but when the reader scrolls the page, it can come out of balance.

How to Include Balance in Web Designs

The most common way to incorporate balance into web designs is in the layout. But you can also use the float style property to position elements and balance them across the page. A very common way to balance a layout symmetrically is to center the text or other elements on the page.

Most web pages are built on a grid system, and this creates a form of balance for the page right away. Customers can see the grid, even if there aren't any visible lines. Web pages are well suited to grid designs because of the square nature of web shapes.

Symmetrical Balance

Symmetrical balance is achieved by placing elements in a very even fashion in the design. If you have a large, heavy element on the right side, you'll have a matching heavy element on the left. Centering is the easiest way to get a symmetrically balanced page. But be careful, as it can be difficult to create a centered design that doesn't look flat or boring. If you want a symmetrically balanced design, it's better to create the balance with different elements - such as an image on the left and a large block of heavier text to the right of it.

Asymmetrical Balance

Asymmetrically balanced pages can be more challenging to design - as they don't have elements matched across the centerline of the design. For example, you might have a large element placed very close to the centerline of the design. To balance it asymmetrically, you might have a small element farther away from the centerline. If you think of your design as being on a teeter-totter or seesaw, a lighter element can balance a heavier one by being further away from the center of gravity. You can also use color or texture to balance an asymmetrical design.

Discordant or Off-Balance

Sometimes the purpose of the design makes an off-balance or discordant design work well. Designs that are off-balance suggest motion and action. They make people uncomfortable or uneasy. If the content of your design is also intended to be uncomfortable or make people think, a discordantly balanced design can work well.