Balance. It’s the one thing that keeps things in perspective in pretty much every area of life. It keeps things ticking over smoothly and it prevents boomerang effects. When there is no balance, one area often requires overcompensation, which inevitably results in more of a deficiency. It’s a vicious cycle. In the context of your website layout, a lack of balance can seriously have negative impact on the user-experience for your visitors.
Balance & Your Primary Objective
What is the goal of your page? No – it is not about looking pretty. It is about effectively communicating information to your readers, and one of the most effective ways to achieve this, is by creating an aesthetically appealing, balanced layout.
Whether you’re designing a website or a print brochure, your layout template can make or break your success.
Most of us feel our way through the design process, doing and redoing the arrangement, placement and formatting over and over until we are pleased with the end result. However, that can be time-consuming, and it can be too looks-oriented, rather than goal-oriented.
Today, we’re discussing page balance, and the 7 elements that are crucial to the structure and balance of your website – be it print or web.
Layout Balance Element #1 – Grid
In days gone by, grids were the most important aspect of design, and I think we should all go back to that, because it works. A grid offers a handy way to establish the best position for different elements and to connect the position of the various elements aesthetically.
A better organized and interconnected design makes your site easier to read, as it is easier on the eyes. It helps them to access the important information more easily.
Layout Balance Element #2 – Thirds
The rule of thirds applies strongly to web design. Basically, this golden rule involves visually dividing the page into thirds – both horizontally and vertically. The dividing lines provide the natural focal point of your design. For best results, align key elements to those four focal point to achieve the most pleasing design.
Layout Balance Element #3 – Focal Point
In a day and age where our attention spans are becoming shorter by the day, a single focal point is the key to maintaining your visitors’ focus. You could either keep the site as minimalistic as possible, with the most important text in the middle, or you could use a strong visual, pull quote or headline in this section.
Layout Balance Element #4 – White Space
One of the first things we are taught in school, is to color inside the lines and to not leave any white space on the page. However, this doesn’t apply to modern website or print design. White space provides breathing space, especially on a well-designed layout with clear structure. Use it to your advantage to anchor your content.
Layout Balance Element #5 – Elements
Repeating design elements is a great way to connect your design while providing a visual reference for your visitor. This principle applies to motifs, logos, images and design treatments. Similarly, you can break the pattern that you have introduced by means of repetition in order to provide a new focal point in the design.
Layout Balance Element #6 – Scale
Scale is a great tool for creating balance for your layout. Using some smaller and larger elements can create a sense of hierarchy that makes it comfortable for the viewer, who will first look at the larger elements in your layout, before moving on to the smaller elements.
Layout Balance Element #7 – Contrast
Contrast works in the same way as scale. By applying harmony to some elements, and contrast to others, you can place the accent on the focal point.
Some of the premium Genesis child themes can easily be tweaked with a bit of code here and there to provide a perfectly balanced site that will be simple for your visitors to read. That’s one of the main reasons why I love the WordPress & Genesis combination so much.
How do you create balance in your pages? I’d love to hear from you in comments below.