Key principles of effective graphic design
Part 2: The power of lines
by Jamie Kiley

Back to design tips | Reprint info

The difference between a sloppy layout with a homemade appearance and a neat, professional layout is often found in one principle: alignment. Solid alignment can transform the appearance of a design from unfocused clutter to stunning order. Your use of alignment can make the difference between whether your information gets noticed or not.

So what is alignment? Alignment is the use of visible or invisible lines (usually straight) to line up everything on your page. Succinctly stated, the principle is this:

No element should be placed on a page arbitrarily. Everything in a design should be lined up with something else to acheive unity.

The principle of alignment focuses on visual connections. Even if two elements on your page are far apart and are not directly related to each other, they should still be unified through alignment. This ties the whole design together and gives your pages a cohesive feel.

Here's how to put the principle to use in your pages:

1. Create strong edges.
   
   Line up everything in your design so that you can trace invisible lines down the sides or across the top or bottom. On most well-designed web pages, you should be able to trace multiple different invisible (or sometimes visible) lines. Some will run horizontally across the page; others will run vertically. Often, you'll be able to picture a grid on which the entire design is based.
   
   Compare the following sites and notice the use of alignment in each:
   
   http://www.millstone.com/
   http://www.redhat.com/
   http://www.webex.com/
   
   These sites all use visible lines, which makes it easier to analyze the designers' use of alignment. When you look at these examples, it's easy to see the the very clear structure and organization in each design.
   
   Now take a look at two designs using mostly invisible lines.
   
   http://www.summitministries.org/
   http://www.max-effect.com/
   
   Summit Ministries might look like it doesn't use alignment, because some of the visible lines are not straight. But if you look closely, you'll see that the site is still based on a strong grid.
   
   Max Effect has two very strong invisible vertical lines. One starts at the left edge of the logo and runs down the entire page. The other starts at the left edge of the orange navigation bar and continues down. However, the designer didn't continue the theme on the right side. Although it is subtle deviation, the invisible line going down the right side of the page is jagged.
   
   Obviously, there are other design principles at use in each design that help determine their effectiveness, but you can see alignment contributes significantly.
   
   
2. As a general rule, don't center.
   
   Centering elements on a page--whether it's body copy, headings, pictures, or something else--weakens the impact. When you center a design (or parts of it), you lose the strong edges that left or right alignment create. This lessens the strength of your page organization. A hard alignment on one side or the other is cleaner and more dramatic.
   
   In addition, centering is often not obvious. Take headings over a block of copy, for example. It's frequently hard to tell whether a designer centered the heading, indented it, or simply placed it randomly, especially if the body copy has an indent. At any rate, the strong edges are lost and the page looks jumbled.
   
   This doesn't mean you should never center anything. However, don't resort to centering automatically. Use it consciously and sparingly.
   
   
3. Avoid mixing text alignments.
   
   Be very careful about using left-justified, right-justified, and centered alignments together. Mixing alignments confuses the lines.
   
   One exception is to use right justification and left justification back to back. If you can line up right-justified text right next to left-justified text, the hard edge between them is magnified. This can be a very effective tool.
   
   
4. Use strong alignments to make breakouts very obvious.
   
   Say, for example, that you have a strong left alignment running down your entire page. If you take a single element and break that line, it can be a powerful attention-getter. The important thing to remember here is that you must have a strong line to be able to break it effectively.

Armed with the principle of alignment, you'll be able to organize your pages more effectively and make use of strong lines for powerful visual impact.

Back to design tips | Reprint info