Visual balance is the key aspect of web design and if it is not done properly, it creates tension for the viewer who looks at the page.
Figuratively speaking, a parallel can be drawn with the physical balance depicted by a seesaw to explain the idea of visual balance in web design. Like physical objects, every element in a layout has a certain amount of weight. For example, elements with darker colors are heavier than elements with lighter colors and elements with stronger borders are heavier than elements with thin borders or no borders. A layout without proper visual balance makes a viewer feel that the page is about to tip over. Visual balance is achieved in a layout by putting elements of equal weight on either end of an axis drawn through the center of the page. There are two different systems of controlling visual balance, known as symmetrical and asymmetrical.

Symmetrical balance, which is sometimes referred to as formal balance, happens when the composition on a side of an axis line is a reflection of the other. There are three forms of symmetrical balance: horizontal, bilateral and radial. Horizontal symmetry is best depicted in the David Lanham digital painting called the Contemplation. The painting shows a male figure on the left and a female figure on the right and both the figures are facing each other and they are very much alike in position and proportion. Everything, including the shaded area around the figures exactly mirrors one another.

To apply horizontal symmetry to website layouts, you need to center and balance the content between columns. Bilateral and radial symmetry are not as prevalent in website design and are typically used for logo and print design. Bilateral symmetry is a form of symmetry that uses more than one axis is to balance a composition. When a central point is used to equally space elements of a composition, it is called radial symmetry.

Visually more interesting, asymmetrical balance, also known as informal balance, is a lot more abstract. Asymmetrically balanced layouts take a lot of planning to make sure that the layout is free of the tip over effect. Objects in an asymmetrical balance composition are of different sizes, shapes and tones. Even though the objects on each side of the axis are not mirror images, they are arranged in a manner as to equalize the weight on either side. For example, a large object on one side of a composition is balanced out by placing several smaller objects on the other side. Asymmetrical layouts are more common in web design than symmetrical layouts as this type of design is much more versatile. You’ll notice the following in most asymmetrical two-column web site layout with one column much wider than the other. The color of the wider column is generally light whereas the color of the smaller navigational column is dark. The smaller column is also generally enclosed within a border of some kind to add more weight, create balance and to make it stand out in contrast to the wider column.

The key to a harmonious asymmetrical balance is the principles of unity. The principles of unity are proximity, repetition, placement and proportion. Elements in proximity make your composition feel put together and cohesive. Create a focal point for the eye by putting elements close together in groups within the website layout and use margin and padding CSS style rules for elements to form these groups in practice. The next principle, repetition, unifies elements, such as a bulleted list: the preceding bullet of each item in a list makes a seemingly unrelated list of elements part of a group.

Another way to achieve asymmetrical balance is through the use of repeated patterns and texture because they are adding weight to the elements. For example, a textured small element adds more weight to the layout than a non-textured large element. Regardless of size, the eye is drawn to the textured element, and for example, consider repeated thumbnails used to display an image gallery with each thumbnail showing a completely different image. The repeated texture and equal height, width and border of the thumbnails make all the images in the gallery part of a whole.

Users typically look at the direct center of a layout first, so elements that are farther away from the center usually go unnoticed by most of them. The top-left corner of a layout also tends to have a big impact on users who read from left to right, while the top-right corner of layout garners more attention from users who read languages such as Hebrew and Arabic that are read from right to left. A page is also generally traversed from top to bottom, so this is where the placement principle of unity comes in to picture. Keep these tendencies of users in mind and place the content of maximum emphasis in the center of the page, then concentrate on the top left corner or the top-right corner, whichever is relevant to the particular website layout. Next, place content with decreasing order of importance from top to bottom.

Proportion, defined as the scale of the elements used, has much to do with emphasizing and element within a layout. Use the proportion principle of unity to display content that needs to be emphasized, such as headings, advertisements and announcements. Take the example of image thumbnails: no one image stands out within the thumbnails as they are of similar proportions. When one of the thumbnails is clicked to enlarge an image, the viewer’s attention is drawn to the image as the scale of the image is much larger than the proportions of the layout and it stands out in context. Web design is more of a creative art and not a mathematical formula, so there is no specific set of rules and your ability to create harmonious designs improve with experience. Most of the principles of visual balance are obvious and designers are usually aware of it naturally. Learning these principles though, makes you able to control your layout consciously.