A balanced design of your website is just as important as the content you put in it. An unbalanced design can be overwhelming for the user and cause frustration, at which point the user will probably bounce off your page and find a more pleasing site to navigate through. Visual design is a very important component that shouldn’t be neglected.
Balancing your website is done with both positive elements and negative space. Positive elements refer to images, videos or text. Negative space refers to the areas that are blank, or space containing no elements. Neither the elements nor the negative space should pull your eye more than the other, they should work in harmony. To understand balance in a visual sense, it’s easier to use an example of something physical such as a seesaw.
On a seesaw, 2 children can correctly work so they are balanced visually and physically (assuming they are roughly the same size). Now, if we had an adult and a small child on the seesaw the result would be different. The child would be left up in the air with the adult on the bottom – both physically and visually unbalanced. In order for this pair to balance the seesaw, the adult would need to come to the middle of their side of the seesaw.
Keeping these things in mind, a balanced website will give the user a harmonized feeling and keep them moving about the site. There are two main kinds of balance – symmetrical and asymmetrical.
Think of symmetrical balance as the two children on the seesaw that are about the same size; both physically and visually balanced. This type of balance tends to be more formal and traditional. A wedding invitation is a good example of this kind of design.
Asymmetrical balance can be associated with the adult and the child on the seesaw. To make this balanced, the adult would have to sit closer to the center. This type of balance is more dynamic as there’s more visual variety in design elements. You could balance out a big image with a few smaller images.
Taking it a step further, two other types of balances are radial and mosaic. Radial balance occurs when all elements radiate into or out from the center. The sun is a good example of this.
Mosaic balance occurs when many elements on the page create a sort of balanced chaos. This type of balance lacks a focal point and looks like static noise. A famous reference would be Jackson Pollack’s paintings. Visual weight is something to keep in mind as you’re balancing your site.
When dealing with visual weight there are certain characteristics that you need to be aware of.
- The size of the element. A larger element will be carrying more weight and vice versa.
- Some colors are perceived to have more weight to them such as red, while yellow seems to be the lightest.
- Density – Packing more elements into a given space gives more weight to that space.
- Value – A darker object will have more weight than a lighter object.
- White Space – Positive space weighs more than negative space or white space.
Balance is something that can make or break your website. To keep users happy and engaged with your site, be sure you are thinking about how the elements are laid out. Are they working together or fighting for your attention? By applying the characteristics above you are ensuring that you not only have a visually appealing site, but that it’s also not scaring off users. Whether your site is symmetric or asymmetric is up to you, but make sure the elements are balanced and working in harmony. Not confident in your web designing skills? No problem! Contact Ferocious Media to have an expert Web Designer help you out!