Balance in Website Design
The balance of your web page is like a seesaw or balance beam. A seesaw is in balance when both sides are equal in weight. Balance can also be achieved when the heaver side is closer to the center. If you have several small objects on one side, they can be balanced by a larger object on the other side. Visual balance is much the same. But in this case, balance can be affected not only by size but by color. The lightness or darkness of a color (visual weight) affects the balance. A darker color is heavier than a lighter color. Also the texture of the color or element affects the balance. There are two types of balance that are commonly used in website designs: Symmetrical and Asymmetrical. Also called Formal and Informal, respectively.
Symmetrical (Formal) Balance
Formal balance is mirror image balance. If you draw a line down the center of the page, all the objects on one side of the screen are mirrored on the other side (they may not be identical objects, but they are similar in terms of numbers of objects, colors and other elements. Sometimes they are completely identical (often seen in architecture). There is equal distribution of weight on both halves of a design from the central axis, creating symmetry. Mirror images.
- To check if a design has formal balance, draw an imaginary line down the middle and compare both halves. If you were to fold both halves, the outlines/shapes of the design elements should overlap.
- A common technique to use formal balance is to center every single element across a page layout. This technique creates a clean look, but is novice, easy, plain, and sometimes boring.
When a webpage is balanced, the elements are distributed in such a way that the viewer does not think that the page is about to fall over. Balance can be horizontal or vertical or radial. When elements are balanced left and right of a central axis they are balanced horizontally. When they are balanced above and below they are said to be balanced vertically. And when elements are distributed around the center point, or spring out from a central line, this is radial balance.
Keeping in mind that size, color, texture all affect balance, use the following guidelines in planning the website layout:
- A large form is visually heavier than a smaller form?
- A dark-value form is visually heavier than a light form of the same size on a light background?
- A textured form is visually heavier than a smooth form of the same size?
- A form placed close to the central axis may be visually heavier than a similar form placed near the outer edge of the composition?
- Two or more small forms can balance a larger one?
- A smaller dark form can balance a larger light one?
Also:
- Saturated colors are heavier than unsaturated colors.
- A stronger border is heavier than no border or a thin one.
- Texture is heavier than no texture. The denser the texture, the heavier.
- Don’t only worry about horizontal balance. Also remember vertical and radial balance.
- Colors like red and orange are heavier than calm colors like blue or green.
Balanced design has its place in web design, but can easily become too monotonous and uninteresting to look at. To make the page less boring, think about approximate symmetry. This could have greater visual appeal and interest for the viewer. The two sides of a composition are somewhat varied and are therefore more interesting to view. Even though the elements are varied somewhat, they are still similar enough to make their relationship symmetrically balanced.
Asymmetrical (informal) Balance
Asymmetrical balance occurs when several smaller items on one side are balanced by a large item on the other side, or smaller items are placed further away from the center of the screen than larger items. One darker item may need to be balanced by several lighter items. Using the guidelines above, you can manipulate the various elements to achieve an overall balance. By estimating the various elements and visual weight, you should be able to balance the elements as a whole, resulting in a more interesting webpage design.
The use of asymmetry in design allows for more freedom of creativity, because there are unlimited arrangements that may be devised using asymmetrical balance. The way to use asymmetry is by balancing two or more unequal components on either side of the fulcrum by varying their size, value or distance from the center. The dark tree trunk is heavier than the yellow stars and sun and pull your eyes towards it, even though there are many yellow elements.
An example of asymmetric balance is the use of placement and color of text. The design at the left illustrates a visually appealing balanced graphic design for a logo.
Another example of asymmetrical balance can be seen by the use of color. Small areas of bright color can be used to balance larger areas of neutral colors. The red color of the three figures balances the 30 or so natural figures.
Balance can also be obtained by value, where value is the darkness or lightness of the element. A black element has a much greater balance value or weight than a lighter element. To balance a small black figure, you would need a large gray figure positioned appropriately.
You can achieve balance by using different shapes. For instance, large flat areas without much detail can be balanced by small irregular elements that have more detail and color. The dancer in the Degas painting stands out in great detail compared to the blurry area at the top of the painting.
You can use position to balance the page. A larger element closer to the center point can be balanced by a lighter element further away from the center. This is the basis for balance by position. Sometimes larger elements on one side of the page can be balanced by a smaller element that is positioned by itself at the far end of the other side of the page. This is a very tricky type of asymmetrical balance that often ends up looking out of balance. Look at how the small watering can on the left is used to balance the larger dancers to the right
You can use texture to achieve balance. Small elements with texture have more weight than large smooth untextured elements. The eye is drawn to that area texture, but the overall effect is balanced.
Your eye can be led to a certain point on the webpage depending on how the elements are arranged. If the elements on the page are all pointing in a certain direction, your eye will be led there as well. 
Look how the eye direction of the dancers and musicians in this painting by Seurat moves your eye to the small gaslights which provide a focal point in this painting.
Elements , such as triangles or arrows, will also lead your eye to look to a certain point and maintain the balance of the page.
Use White Space to help achieve balance! White space refers to the negative space on a design and represents the space between design elements such as text and graphics. Compare the amount of white space on both halves of a design to see if it has balance. White space is needed in order to create a layout that is not too cluttered or busy.
Using Asymmetric balance on a webpage takes some planning. You need to be very careful that the elements are balanced. It is all too easy to place the elements on the page and create a feeling that the items will slip off the side or tip over. This would create a feeling of tension when the viewer looks at the page.
On line References:
Sitepoint- balance
Noupe – 7 Key Principles
desktoppub – balance
daphne- Design and Composition
Smashing Magazine- all about the web
Five Simple Steps to Designing Grid Systems A beginner’s guide to grids
The Golden Ratio in Web Design
8 Simple Ways to Improve Typography in Your Designs
Fonts and the Web About the state of fonts on the Web and image replacement.
4 Principles of Good Design for Websites Four other principles, more from a practical standpoint.