Students will gain an understanding about how paying attention to the alignment and distribution of the elements can help their designs achieve balance.
- [Instructor] The next principle of design we'll explore is balance. In design, balance can happen in several ways including paying special attention to the alignment, distribution, and placement of various shaped, colored, and sized objects in your layouts. In fact, we can say that balance occurs in a design when the elements as a whole have a feeling of equality of weight, attention, or attraction. To illustrate this idea, let me tell you a personal story. I once had a student who showed me a very simple web design mock up she had been working on that had several objects oddly and not pleasingly scattered willy-nilly in the center of the page somewhat like this.
While the elements in the rest of her layout looked mostly balanced, the objects at the center seemed really unresolved. When I asked her if she had deliberately placed these center objects as they were, or if she had used some kind of logic in considering their placement, she replied, "No, I just put them there," and then she said, "Why, does it matter?" Yes, absolutely it matters I told her. It matters very much. To achieve balance in a design, one must consider the placement and alignment of every single element in ones layout including text, photos, illustrations, patterns, backgrounds, and other decorative elements.
Often people think of balance as having two same-sized elements placed equidistantly from each other within a defined space. Contrary to popular belief however, balance does not mean the same thing as symmetry. Rather, symmetry may be a component of balance, but balance can also be asymmetrical, with objects in dissimilar size, shape, and color. In fact, what you're trying to achieve with balance is an overall sense of formal harmony.
Conceptually, it may help you to think of balance in terms of physics. For instance, a small shape close to the edge can balance a large shape closer to the center of a composition, or think of the seesaw analogy. Two equally sized people on either side of the teeter-totter. That's one kind of balance, but you may also have balance with one large person on one side, and two smaller people on the other, and you can have balance with one large and one small person on either side, as long as the larger person is closer to the middle.
In terms of web design, the grid system makes it really easy for you to create a balanced layout regardless of the actual number of columns there are in any one row. This is because the gutter space between each column is going to be exactly the same width. That doesn't matter whether you have one 12-column cell or four three-column cells, or some other configuration like one 460 pixel column, and two 220 pixel columns. Now, this isn't to say that you must strictly follow the grid system to achieve balance in your web layouts.
There are many ways for you to create a balanced layout, especially if you're creative and willing to step out of the box a little bit. For example, you can use a photo along the bottom, and place your text along the top, or left or right edge, or you could use a large photo in the background like this, and place your text and other content on top of it. What about your web navigation? Should your navigation link text be evenly spaced, or approximately spaced? Should the words be center aligned, left aligned, or right aligned on the page? Remember too that balance also involves even or deliberate measurements and distribution of shapes within your layout.
Think of symmetry and asymmetry. Symmetry helps keep good balance, but it's not necessarily the best solution for all designs. Remember also that dark can be balanced with light, and asymmetrical balance creates an interesting tension that draws the viewer into your design. You can place several small shapes on one side, balanced by one larger shape on another, or even place a dark shape next to several light objects. Remember, darker shapes tend to appear heavier than lighter shapes, so that fact alone will affect the placement of your objects as you strive for balance in your design.
Paying attention to the alignment and distribution of elements can really help your designs achieve balance. Don't feel compelled to fill all the spaces with information. Leave some breathing room. Squint and see if the composition looks balanced. If not, keep moving things around or resizing your design's elements until you feel your layout is balanced.
- Understanding aesthetics
- Picking harmonious colors
- Structuring your layout
- Using space to organize your design
- Communicating with the right fonts
- Aligning objects to achieve balance
- Adding movement with scrolling and animation
- Achieving proportion by scaling objects and text
- Creating CSS for different devices