Developing Balance in Web Design
Following on from my previous blog about an article i found regarding Unity in web design, I have come across another article by the same designer regarding Balance. Balance is key in making your visitors feeling comfortable and engaging them in your site. If your site if off balance your design will feel disorganised which will have a negative effect on your users. Your visitors should feel invited to look around at their own pace, the best way to achieve this is through visual balance. Visual balance is basically just balancing design elements off of each other.
“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.
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).
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.
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.
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.
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.
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.
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.
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.”
More posts from our team
Five Star
Reviewed Marketing
"Would definitely recommend to a friend"
"I cannot recommend Dental Design highly enough"
"Really great company to deal with"
"Very professional, efficient & adaptive to new situations"
"I cannot recommend them highly enough"
"Has been invaluable and gone out of her way to help us"
"We love the look of our practice website. Very professional!"
"Dental Design stood out both in their knowledge of the industry and their professionalism"
"The team and package offered at dental design was unrivalled"
"absolutely fantastic and are always on hand to help"
"Dental Design are fantastic to work with"
"always met with a swift and professional response"
