Developing Balance in Web Design

When designing for the web the last thing you want to do is make your users feel agitated or uncomfortable – like they are staring at a sink full of dirty dishes. If your site design is visually off balance your site will feel more disorganized and can make your users feel uncomfortable. Your design should be inviting and allow your users to sit down, relax, hang out and maybe look around a bit and the best way to achieve this is through visual balance. Visual balance is basically just balancing design elements off of each other – as if your design elements are sitting on a teeter-totter.

We generally think about balancing two or more items on a scale using weight – picture the stereotypical “legal” scale. Physical weight and design weight are very similar, a physical object can be very small and yet very heavy regardless of mass just as a visual design element can be very small but still demand the eyes attention. The gravity of a physical object is the same as the visual interest of a design element and each element pushes and pulls other design elements the same an object’s gravity pushes and pulls other physical objects.

There are a couple of different factors that come into play when working with the visual interest of design elements; How you balance two or more elements against each other and how you represent the visual properties of the elements – the type of balance and the properties of balance.

Types of Balance

There are many different types of balance – the way design elements interact with each other in a composition. You can use these different methods to arrange and organize your elements’ “gravitational” pull to create a well balanced feel that will allow your users to feel comfortable. There are basically five ways you can achieve balance

• Horizontal balance
• Vertical Balance
• Radial Balance
• Symmetrical Balance
• Asymmetrical Balance

Horizontal and Vertical Balance

A great way to manage visual interest is to balance them off a central axis – horizontal or vertical. Horizontal balance is where you balance elements left and right of each other – literally like a teeter-totter. Vertical balance is where you weigh elements top to bottom of a central axis.

likeness.com

danielmart.in

Radial Balance

Instead of balancing compositional elements off a central axis, you can also balance elements off of a central point – radial balance. Basically, you can place elements around the central axis or you could even have elements feel like they are coming out of that central axis point (like a sunburst).

ipolecat.com

Symmetrical and Asymmetrical Balance

Another type of balance that is typically combined with horizontal, vertical and radial balance is symmetrical and asymmetrical balance. Symmetrical balance is when both sides of the composition are mirror images of each other – or folding a piece of paper in half. Symmetry is a very formal balance, it’s more soothing and comfortable on the eyes so it is widely used in building design or web grid layouts. It’s also becoming more popular as responsive web design becomes more popular because it’s easier to reproduce in larger or smaller sizes.

frontend2011.com

Asymmetry is probably the most common form of balance. Essentially it’s the opposite of a symmetrical balance where elements are balanced from each other but not exactly positioned from each other. Asymmetry is much more interesting than symmetry because symmetry tends to lack a visual hierarchy where as asymmetrical layouts tend to have a high visual hierarchy. Asymmetry doesn’t mean however that there is no balance in the composition, it just simply means that elements are not positioned in carbon copies of each other.

teamviget.com

Properties of Balance

Each object in any composition has its own properties as well as the properties of how it relates to other objects. The main properties of balance are: size, color, shape, value and position. Each of these properties can be used individually to create a symmetrical balance, but a combination of each will be needed in order to create balance within asymmetrical compositions – a change in one will effect the other.

Size

A large empty object has a lighter visual weight and so it can be balanced with a smaller filled, or more dense object. For instance a blog with a content area and side bar has two distinct sizes of objects, the content area is usually larger than the side bar. You could balance the two by adding more white space the content area and filling the side bar with something more visually heavy. If you want to accomplish symmetrical balance in your design then you’ll need to make sure elements are the same size, regardless of visual weight.

atlason.com

Color

The color of an object in a composition can make that object feel lighter or heavier. Bolder and darker colors are visually more heavy than softer lighter colors – red is visually heavier then yellow because it demands the attention of your eye. If you are trying to balance a bolder, darker colored element with another or multiple lighter colored elements you can play around with the other properties of balance – or alter the background colors surrounding the elements.

touchtech.co.nz

Shape

The shape of elements in a composition can drastically alter the balance of a composition. A really squiggly or jagged shape is visually more interesting and therefore heavier than a shape with very clean straight lines. But rather then balancing a complex shape with another complex shape – creating confusion – balance the complex object with a clean but bolder shape.

infinvision.com

Value

Contrast can be a huge factor in compositional balance. The higher the contrast of an object the heavier it becomes and the lower the contrast of an object, the lighter it becomes visually. There is a couple of ways to resolve balance between high and low contrast objects; one great way is to offset the low contrast element with a contrasting background color or texture. You can also add simple borders, gradients and drops shadows to lower contrasting elements as well.

galp.in

Position

This is a big factor and it’s also the property you could use the most to balance off other elements that differ in shape, color, value and size. As we talked about earlier, a large object is heavier than a small one, but the closer or further these objects are to the center axis the heavier or lighter they will be. Objects closer to the center line weigh more than objects further away, so if you have a large red object close to the center axis you can either move it away from the center line or move the other objects closer to the center line.

girlwithacamera.co.uk