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:

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.

Written By Kayla

Kayla Knight is a 20 year old college student, part-time web developer, freelancer, and blogger. Webitect is where she spends too much of her freetime, sharing interesting finds and valuable resources. Be sure to check out her portfolio.

14 Comments

  1. Jordan

    December 31st, 2008 at 06:02 pm

    Sea 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.

  2. Kari

    December 31st, 2008 at 06:44 pm

    Wow 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 :)

  3. Jay

    January 1st, 2009 at 08:43 pm

    This 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*

  4. Jijy

    January 2nd, 2009 at 02:25 pm

    This 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 :D

  5. prabakaran

    January 3rd, 2009 at 09:15 am

    Thanks 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

  6. Patrick

    January 8th, 2009 at 12:26 am

    Good stuff, thank you- some of this will be useful when discussing design with clients.