Bad design has a singular capability to distract, confuse, and unsettle anyone unfortunate enough to interact with it. Some breaches of design law are obvious and elicit visceral reactions, like white text on a yellow background — even those with no design knowledge or intuition know that those colors are incompatible in a text-background relationship.
Other design flaws stem from a deeper failure to understand successful design and disorient viewers in a way that they feel but can’t quite name. Imbalance in a designed thing evokes such a reaction. Someone engaging with the piece knows that something is wrong, but can’t express why.
Balance is critical to any work of design, and especially so to web pages. See for yourself in these unbalanced (and just generally ill-designed) pages:
Nothing is balanced about these pages. The shapes, colors, and text of these pages are so unevenly and thoughtlessly distributed, in fact, that they almost feel as if they were designed to keep people out.
Jennifer Kyrnin defines balance as “the distribution of elements across the design.” Given this definition how would we apply the principle of balance to the above pages?
In Web design, balance is an element of the layout, probably the most important element. Determining the position of all the components on the page will ultimately govern the way the site looks and feels to browsers.
The Grid
And student or practitioner of design will know about grids. In fact, given that so many designers understand the principle of grids, it is rather surprising that there are so many poorly designed websites, which naturally lend themselves to grid orientation.
A grid in design is exactly what it sounds like. It is a network of parallel and perpendicular lines that act as placement guides for all the elements of a design piece. If you drew a grid on top of one of the above pages, for example, you would find that nothing aligned in any grid.
Grids are effective because using them immediately gives your page structure, which viewers will understand, even though there is no visible grid. Because everything is organized this way, the piece achieves balance immediately.
Be Square
Web pages, by nature of the devices we use to view them, are inherently square. The grid system works especially well for web pages because grids work very well for rectangular compositions.
However, merely arranging elements on a grid is not enough to achieve balance, because elements are rarely the same size or weight as each other. The secret to achieving balance within a grid is symmetry.
Symmetry
An easy way to balance your composition is to make it symmetrical across an axis of the composition, whether vertical or horizontal. Most Web designs will be vertically symmetrical, meaning that if you drew a vertical line down the center of a page, the weight of the elements would be balance on both sides.
An easy way to balance your composition is simply to center an object in the center of the page. However, this is unexciting, and has no dynamism. The above example has evenly distributed weight and effectively makes use of the grid system. Here’s another great example:
Again, the elements are arranged so that the weight is balanced on either side of the vertical axis. Notice that just because the elements are balanced doesn’t mean that they are the same. Text primarily occupies the left half, while there is a balanced mixture of text, images, and banners in the right. This page is balanced at every level, which is what you need to aim for in your pages.
This is a post from Inspired Magazine. If you like it, you may want to subscribe to our RSS full feed to be updated on every article we’re publishing. Also, it’s highly recommended to follow us on Twitter!