Thursday, September 11, 2008

Weekly Article: What is Balance in Design

What is Balance in Design:
Balance in design is the distribution of elements across 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 with 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. And 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.

Summary of this article:
One of the basic principles in designing is balance. Balance in design means to distribute the information so that it is comfortable for the reader to read and it is visually affecting the reader. Layout is the common way in which you balance a web page. There are three types in balance and they are symmetrical balance, asymmetrical balance and discordant or off- balance. First of all, symmetrical balance means when you put a small image on one side, you should put a text which doesn’t have much information in on the other side to equally balance both sides out. Also the information can be in the center but it could be boring so you have to be careful about that. This is the commonly used one. Asymmetrical balance is when if you put a big looking picture on one side close to the edge, you should put a small text right next to the center line on the other side. You can also use color to balance an asymmetrical design. The last one is off-balance and it is to make the page off-balanced on purpose to make the reader uncomfortable reading it. When you are trying to write something which is uncomfortable then off-balance is good for that.

Source from: http://webdesign.about.com/od/webdesignbasics/p/aabalance.htm

No comments: