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 achieve 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 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.
 |  | |
Related Articles
- You've Got The Power, So Why Aren't You Promoting It?Like all things, theft is theft, misery loves company, negative people are everywhere, business is sometimes bad, things go up and others go down. If those are all true then knowledge is power right? Wrong, knowledge is only power if applied...
- The Power Of LinesThe 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 wheth...
- Finding The Errors On Your SiteWhen you are building your site, and try to test it in a browser, do you sometimes (or perhaps more often) get an error message telling you that your site contains a script error, and would you like to continue running scripts on the page - yes or no? If so, look at that screen before discounting...
- E-mail form using HTML and PHPSometimes its a nice touch to include an e-mail feedback form on your contact page or elsewhere on your web site. Lets create an e-mail form using html and a simple php script to send it along.
- Form Mail via CDONTSASP gives you the power to send mail using the CDONTS mail object. This script will send an email from a user to whichever email address you choose...
- Reading a DatabaseDisplaying data from a database is one of the most common uses of ASP.
Heres some sample code:... - Breathtaking Color Power!Colors convey character, emotion and intention. You are what colors you choose. Thus, your choice of colors should reflect the message or feeling you to hope to convey to the viewer...
- Use Feng Shui Techniques To Design A Harmonic Website For Your BusinessBy following feng shui guidelines and techniques, you can build and design a business website that is not only visually attractive but also attractive to wealth and prosperity...
- Are You Being Scammed By Your Web Design Company?This is a growing concern among many business owners. Does your web design company own you? This may be possible if youve allowed them to host your web site for you and also register your domain name for your company...
- Choosing the Best Domain NameWhat is in a name? A rose by any other word would smell as sweet. It is obvious that William Shakespeare knew nothing about the world of Web hosting, by those lines found in Romeo and Juliet. In the Web hosting world a domain name is very important to your company, image, or presence Online. Oft.....