Web Design Tips: The Use of Balance
I often see webmasters who complain that they don’t have a ‘knack’ for the design element to creating websites. What most people don’t realize, though, is that design skills are a learned aspect for even the greatest designers. Nobody is born a great artist, whether their talents included an easel or a web design template.
In order to create good designs, especially in web design where functionality is so important, one needs to understand design principles. These include understanding color, size, contrast, shape, and what I’m going to be focusing on today, balance.
Why Balance makes Websites Look Good
Our brain likes it. Because of natural forces (like gravity), our natural mind likes things that are even, and seem stable. Something that is the opposite, such as scattered and unorganized, gives us a subconscious tension.
Therefore, visual balance is a key element to making a website look good. It’s that extra ‘spark’ some designers seem to have and others don’t. As an added benefit, a balanced design goes well with functionality. We relate things to the natural world, and a natural balance will allow our eyes to see what we’re supposed to in an a design.
Types of Balance
There are three different types of balance: formal, informal, and radial. Formal and informal balance may also be called symmetrical and asymmetrical respectively.
Here is a website that goes over the different types of balance more in detail, with visual examples included:
Understanding these types of balance and how they relate to the design world can help you become a better web designer.
How to Include Balance on Your Site
So finally interested in integrating this into a design? The most basic balanced template is the centered layout. It obviously has a content area, and the white space on the two sides, which are even.
Just a content area is a bit plain and unusable. So now a navigation bar needs to be in place. If you look at an appealing layout, you’ll notice the navigation menu is probably darker than the content area. This is because darker space is ‘heavier’ than lighter space, and a smaller navigation area is ‘lighter’ than a large content area. Therefore, the two balance each other out.
The first step is to plan a layout. Include your content, navigation areas, and keep your images in mind to. Use the concept above, and remember to keep your design balanced as you add more elements. Use the tips below when planning a layout.
- Bigger areas are heavier than smaller areas.
- Darker areas are heaver than lighter areas.
- 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 (Like a basic, centered layout). Also remember vertical and radial balance.
- Colors like red and orange are heavier than calm colors like blue or green.
Look at Examples
Sometimes it is easier to understand the use of balance in design with visual examples. Take a look at these websites that define the design principle better, and with a more visual appeal:
- http://www.bluemoonwebdesign.com/art-lessons-2.asp
- http://www.digital-web.com/articles/principles_of_design
- http://desktoppub.about.com/od/designprinciples/l/aa_balance1.htm
Of course, any principle of design cannot be learned just like a math formula. Rather than a specific set of rules, design skills come from experience, and a basic knowledge of the science we can make of it.
Obviously design balance can be a lot more advanced than this, and it is indeed a lot about creativity. Do you have a creative way to find balance in a website layout? Are you using balance in your design at all?
I noticed I started using balance in my website layouts before I was even aware of it. It just comes naturally, sort of. By being aware of it, though, I became much more experienced and was able to control it consiously.

2601
3690
Get Updates by Email





Jordan
December 31st, 2008 at 06:02 pmSea monkeys are about as fun as watching paint dry. But I named them all anyway
That’s really helpful, I really like this article. Makes good sense. I’m a big fan of organization, which isn’t easy. I’ll probably read this about 2 or 3 more times.
Kari
December 31st, 2008 at 06:44 pmWow great idea. I’ve never heard of anything like that – well I’ve heard of balance, but never seen a real article on it. Great job
Jay
January 1st, 2009 at 08:43 pmThis is where my brain starts to fail me. I’m no good at the coding the LAYOUT of my designs. I have trouble placing my navigation, and crowding the top of my layouts with mess. I have this habit that I feel certain things are important when really they’re not. I can design a header, no problem. But putting it to a layout is where I fail.
I’ll keep this article in mind. *book marks*
Jijy
January 2nd, 2009 at 02:25 pmThis is a really good blog, I’ve never thought about balance in that way before. Ugh my site is a mess right now lol. I’m going to change my navigation/sidebar area to have a different colour, so it probably makes an impact and less distracting to the content area. I think it’s a little too crowded, so just to space it out more. Thank you for this blog
prabakaran
January 3rd, 2009 at 09:15 amThanks for your valuable information.
It was really of use to me.
-Prabakaran.K
http://www.usjobcareer.com
The No.1 Job and Career Search Portal
Patrick
January 8th, 2009 at 12:26 amGood stuff, thank you- some of this will be useful when discussing design with clients.