Physical weight is a measure of the force that gravity exerts on an object, but two-dimensional objects (such as elements on a web page) don’t have mass and, therefore, don’t have any physical weight.
Visual weight is a measure of the force that an element exerts to attract the eye. Two-dimensional objects can attract attention. The more an element attracts the eye, the greater its visual weight.
Visual balance comes from arranging elements on the page so that no one section is "heavier" than the other.
A design composition does not have to be symmetrical or linear to be considered balanced. It is also true that perfectly symmetrical and linear compositions are not necessarily balanced. Asymmetrical or radial distributions of text and graphic elements can achieve balance in a composition.
Symmetrical balance is easiest to see in perfectly centered compositions or those with mirror images. When a design can be centered or evenly divided both vertically and horizontally it has the most complete symmetry possible. Symmetrical balance generally lends itself to more formal, orderly layouts. They often convey a sense of tranquility or familiarity or elegance or serious contemplation.
Asymmetry means “without symmetry.” Since there is no formula for asymmetrical balance, you must achieve it by sensing whether it looks balanced or not. With asymmetrical balance, you are evenly distributing the elements within the format which may mean balancing a large photo with several small graphics. You could have an odd or mismatched number of differing elements.
Asymmetrical layouts are generally more dynamic and by intentionally ignoring balance the designer can create tension, express movement, or convey a mood such as anger, excitement, joy, or casual amusement.
Above (Left) This photograph illustrates asymmetrically (informal) balance because the subject building has some very free-flowing architecture. Balance is achieved because the colour, texture and repeating elements create a neatly organized asymmetrical layout. (Right) The large column of text is balanced by the simple illustration to its right, notice the contrasting colours used to help achieve informal balance. The upper right text is countered with smaller black text in the opposite corner of the layout. In this case, because the large white text is in a block shape, it becomes an element of the design in its own right.
For more tips and examples of asymmetrical balance to create more dynamic and interesting compositions, see this article.
On square and rectangular pages we generally place elements in orderly rows and columns. With radial designs, the elements radiate from or swirl around in a circular or spiral path. Parts of the design must still be arranged so that they are balanced across the width and length of the page unless you're intentionally aiming for a lack of balance.
Above — Here we have a couple examples of radial balance in a rectangular space. (Left) In this illustration, the running shoe is at the center of the design with the glow and burst of light and geometric shapes radiating from the center. (Right) The ornate window itself is perfectly symmetrical but it is off-centre and the outlines edging off the page to the top and right throws it all slightly off-balance.
Take the Balance Quiz to test your knowledge. You will receive an email with your results. You may take the quiz as many times as you wish.