Every layout begins with a blank page or empty space. When we add an element, its placement can be determine how successful the design will be. Effective design initiates communication and an interest from the viewer whether it’s in print or on the web.
In a typical web layout, a designer needs to place a logo, text, photographs or illustration. By making a conscious effort to work on the relationship between these elements to produce an eye catching design.
Balance in design is very much like balance in life. It tends to be a good thing. An often used example of real life balance is the see-saw (which I believe is also called the teeter-totter in distant lands). A see-saw is not much fun when only one person sits on it. Balance is achieved when two people of equal weight sit on each side. Balance can also be achieved when one heavier person sits on one side and two lighter people site on the other side. And balance can be achieved if a heavier person slides closer to the center of see saw, while a lighter person sits on the end of the other side.
As humans we’re balanced physically. We have an arm and a leg on each side of our spine and head that balances top center of that spine. We’re able to stand and move despite being different sizes and weights. In design we try to achieve a balance between elements because it is pleasing on the eye. But balance isn’t always achieved through symmetry. Take a look at the boxes below.
The white line in box 1 and 2 is symmetrically balanced while in boxes 3 and 4 the line is asymmetrically balanced.
Symmetry
Symmetrical balance is mirror image balance. If you draw a line through the centre of the page, the elements on one side of the line are mirrored on the other side. We can achieve it by placing elements fairly evenly in the design.
A typical example of this occurs on the web, where blocks of text mirror each other in buckets or columns. Symmetry can also be achieved using colors and typography.
Mobile Web Book – on this web site, the mobile phone image divides the page in two, with the blocks of text on either side balancing each other out
On the poster for the movie The Day I Became A Woman, the block of large white text in the top right corner is mirrored in the bottom left corner both in terms of colour and shape.
The very colorful Florida Flourish site could be almost be cut in half down the center. It has a very strong sense of symmetrical balance.
The Havoc poster below is balanced left and right using similar shapes (and body parts). The red text above and below the title is balanced in color and size above and below the title.
Asymmetry
Asymmetrically balanced layouts have elements that don’t mirror each other across a centerline. These layouts can be more difficult to design but can be appealing to viewers. We can create an asymmetrically balanced layout by placing several small items on one side, and one large item on the other side. If you have one dark item on one side, you may place several light colored items on the other side. An asymmetrical balanced design can create tension, drawing the viewer in.
MattWeb has a large graphic filling the left side of the homepage. A sense of asymmetrical balance is achieved here using matching colors and a sans-serif font which is in keeping with the spirals in the graphic.
Dann Whitaker’s site has several elements that don’t reflect each other symmetrically, but do balance each other in terms of color, texture and content.
Off-Balance
Ok, so it could be boring if ALL of your design work involved balance. If you know the rules, then you can break them of course, and lack of balance can convey action and motion. It can make people feel a little uneasy or even disturbed. An off-balance design can make people think. Just don’t let it happen by accident.
0 comments:
Post a Comment