Developing Balance in Web Design

Developing Balance in Web Design
4 November 2011 | | Creative 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.


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.


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.


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.


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.


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

Previous Post:
Next Post:

Back to all news

Five Star
Reviewed Marketing
5 gold stars
google review logofacebook review with 5 stars
"Excellent service from James at Dental Design, thank you very much for your prompt attention whenever I get in touch! Would definitely recommend to a friend" Alison Tarmey View Full Testimonial
Google reviews logo "Would definitely recommend to a friend"
5 gold stars
"As a dental practice manager I cannot recommend Dental Design highly enough. They are just brilliant at what they do. Lucy and her colleagues are just an email or a phone call away...." Emma Smith View Full Testimonial
Google reviews logo "I cannot recommend Dental Design highly enough"
5 gold stars
"Really great company to deal with. They always respond quickly and are truly reliable. I would 100% recommend, the staff are so friendly and helpful." Michelle Molloy View Full Testimonial
Google reviews logo "Really great company to deal with"
5 gold stars
"I got increased traffic and new patients applying to my surgery, once Dental Design upgraded my website. They are very professional, efficient & adaptive to new situations..." Joanna Gallop View Full Testimonial
Google reviews logo "Very professional, efficient & adaptive to new situations"
5 gold stars
"Lucy has been a star, responding to and acting upon our requests in a prompt, efficient and professional manner, as well as the rest of the Dental Design team..." Abhay Shah View Full Testimonial
Google reviews logo "I cannot recommend them highly enough"
5 gold stars
"...Since the website has been up and running Lucy Mander has been our point of contact. She has been invaluable and gone out of her way to help us, especially during COVID-19 lockdown... " Lucy Jones View Full Testimonial
Google reviews logo "Has been invaluable and gone out of her way to help us"
5 gold stars
"Thank you for all your help and support, and the provision of valuable learning aids for our patients and staff alike in these difficult times. We love the look of our practice website. Very professional!" Sandra Luck View Full Testimonial
Google reviews logo "We love the look of our practice website. Very professional!"
5 gold stars
"Dental Design stood out both in their knowledge of the industry and their professionalism and can-do attitude. All of their staff are exceptionally competent and knowledgeable..." Harvey Rook View Full Testimonial
Google reviews logo "Dental Design stood out both in their knowledge of the industry and their professionalism"
5 gold stars
"Having done extensive research into all the dental website companies, the team and package offered at dental design was unrivalled..." Neil Shah View Full Testimonial
Google reviews logo "The team and package offered at dental design was unrivalled"
5 gold stars
"The team at dental design (especially Rosie) are absolutely fantastic and are always on hand to help. They are professional, friendly and extremely efficient. Rosie always gets back..." KiKi Wilmot View Full Testimonial
Google reviews logo "absolutely fantastic and are always on hand to help"
5 gold stars
"Dental Design are fantastic to work with, our website is amazing and the support they provide is second to none. Our account manager Rosie L is a fabulous point..." Luke Lucas View Full Testimonial
Google reviews logo "Dental Design are fantastic to work with"
5 gold stars
"Having worked with the Dental Design team for the last six months, I've found them not only helpful, but friendly and approachable too. I bombard Marcus with regular..." Sophie Harper View Full Testimonial
Google reviews logo "always met with a swift and professional response"
5 gold stars
desk with branded documents