Balance seems like a word directed at print designers and tightrope walkers. But the world of balanced web design is influenced just as much by print and circus folk! A sense of balance is achieved through repetition much like a pendulum swing – you add a little bit then take some away. You push content to one side then add a little more to the other side. This requires an eye for good composition which can be developed through practice(no balancing pole required).
In this post I’d like to cover a few techniques for balancing a website’s composition. The design phase is a lengthy process beginning with wireframing and moving forward into specific areas of focus like icons and typography. By gauging the overall composition you’ll get a better feel for the website and how it will be presented to users.
Goal Orientation
When talking about composition I’m speaking about the bigger picture. This is a good frame of reference to hold while designing a new website because you want to imagine yourself as a new visitor. What would this person expect to do on the site? Where would they expect to find such functionality? What are the most important “goals” for the user to achieve?
Static websites for companies have simpler needs – often to present information on products or services. Dynamic websites need more interaction like signup forms, CTA buttons, or search fields. Direct focus can be achieved in the same stereotypical way that muscular frat guys attract women – loud noise, flashy colors, and sharp contrast wrapped in washboard abs. Elements that require more attention need to stand out from the crowd.
The trick is to create page elements that draw attention which also stay balanced within the composition. Finding a truthful composition is done with one big iteration because conspicuous elements also require more subtle elements for contrast. If every part of the site is loud and colorful then users would be overwhelmed.
Arrange a simple list of the website’s primary goals and stick to them. It will be surprisingly helpful when you find yourself lost in the creative process yearning for direction.
Whitespace Stability
This term does seem overused but space is a big part of any composition whether we’re talking about websites, paintings, or even compositions of music. Remember that it’s the notes you don’t play that really count.
Minimalist websites have an easier time building whitespace because there isn’t as much demand for content. But no matter how much content is being used there’s always a need for balanced space – unless the page is completely blank in which case I wouldn’t expect much traffic from Google.
Space between content says a lot about the content above and below. Much like the space in a piece of music can say a lot about the song progression moving onto a solo or chorus or whatever.
Think about the spacing used between page headers, image slideshows, even small bits of text like blockquotes or captions. Everything on the page needs space or else it would be real tight and difficult to read. As the designer it’s your job to regulate how much space is needed based on the relationship of surrounding content.
Follow Helpful Patterns
The most common interface patterns are known as Z-Layouts and F-Layouts. These are like generic stencils for crafting usable interfaces. When sketching or wireframing a design you place a large Z or F on top of the layout. The endpoints of those letters represent noteworthy locations on the page which have been known to quickly capture attention.
Although you don’t need to follow these patterns exactly they will help you structure a clean website design. These patterns cover the big picture stuff and composition is all about the big picture relationship between page elements. If you find alternative patterns which work for you then by all means use them. Stick to any methods that help you craft sleek interfaces.
Recently I found an older post covering the 3 common design layouts. Aside from Z and F structures we also have the Gutenberg Diagram which explicates a very similar pattern. Users typically scan a website from top-left horizontally then move down. Since most Latin/Roman alphabet languages read from left-to-right a lingering focus is maintained on the left-hand side.
Each of the patterns and principles relate to ideas in user experience & psychology. Although unlike the subjective arts of music and comedy, design can be surprisingly more scientific. There is an art to great composition but there’s also a science behind patterns, structure, symmetry, and balance.
Focus on Value
This is an old technique used by artists to check color choices before painting. The 3 core properties of color are hue, saturation and value. Hue is the choice of color(red, blue green) while saturation is the intensity of a color relative to white. Although these are some interesting topics they are not as important as value.
Explained simply, value is the measurement of color on a sliding scale from darkest to lightest. If you took a scale with pure white on one end, pure black on the other, the middle would only be shades of grey. Value is so important because it can be measured relative to other values on the page. If you make a photograph black & white you’ll only have values – but it still reads perfectly without color. Why? Because the values are still correct.
When planning a website’s color scheme check back to the values frequently. Sometimes we can’t really tell if a color is too dark/light, contrasts well enough with the text, or matches up with other colors on the page. Quickly switching over to a B&W mockup removes color from the equation and forces you to look at the overall composition.
Closing
One of the best exercises for building your eye for composition is to study other great websites. It may help to write down a list of your favorite interface features or practice sketching wireframes of your favorite websites. The activity of analyzing and copying will help you recognize the patterns of great composition.
I certainly hope these tips can help designers keep an eye on the big picture. While the minutiae of carefully-planned layouts can be quite impactful, the little details mean very little if they’re squeezed into a poorly-structured website. Keep practicing and studying examples of well-formed layouts to develop your eye for solid compositional techniques on the web.
Thanks for the share, I am so obsessed with balancing layout in print and web design. This was very helpful and inspiring to keep up with it as you mention how important it is.