Align every object with an edge of some other object
Design Beginners tend to put text and graphics on the page wherever there happens to be space, without regard for any other items on the page. This creates a messy look that is hard for the reader to scan. Luckily, it doesn't take much to clean up a page with weak alignments.

Every item should have a visual connection with something else on the page. Even when elements are physically separated from one another, if they are aligned there is an invisible line that connects them, both in your eye and in your mind.

Most beginners automatically choose a center alignment, because it seems safe and comfortable. However, this often gives a dull or amateurish look to the page. A strong flush-left or flush-right alignment gives a much more sophisticated look to the page and is easy for the reader's eye to follow down the page.

Business Plan for Acme Enterprises   by John Smitherson March 6th, 2001

Business Plan for Acme Enterprises   by John Smitherson March 6th, 2001

The biggest alignment problem that I saw in the seeUthere pages was a mixed alignment... centered headlines and subheads over left-aligned text or images, followed by a centered set of buttons at the bottom of the page. This makes the page look unpleasant, since our eyes like to see some sort of orderly alignment.

In the first example below, the headline and the button look like they're just hanging around. This effect was made even worse on the seeUthere pages, because the nav bar and the left margin of the page body were all left-aligned. Then suddenly, a centered title and centered buttons! They looked lost on the page.

The second example shows a clean left alignment, which is what most of the seeUthere pages were changed to.

Man Bites Dog A ferocious postal worker bit a large Rottweiler today over in Pleasanton. The incident occurred on a quiet street. A ferocious postal worker bit a large Rottweiler today over in Pleasanton. The incident occurred on a quiet street. A ferocious postal worker bit a large Rottweiler today over in Pleasanton. The incident occurred on a quiet street. A ferocious postal worker bit a large Rottweiler today over in Pleasanton. The incident occurred on a quiet street. A ferocious postal worker bit a large Rottweiler today over in Pleasanton. The incident occurred on a quiet street. A ferocious postal worker bit a large Rottweiler today over in Pleasanton. The incident occurred on a quiet street.

Man Bites Dog A ferocious postal worker bit a large Rottweiler today over in Pleasanton. The incident occurred on a quiet street. A ferocious postal worker bit a large Rottweiler today over in Pleasanton. The incident occurred on a quiet street. A ferocious postal worker bit a large Rottweiler today over in Pleasanton. The incident occurred on a quiet street. A ferocious postal worker bit a large Rottweiler today over in Pleasanton. The incident occurred on a quiet street. A ferocious postal worker bit a large Rottweiler today over in Pleasanton. The incident occurred on a quiet street. A ferocious postal worker bit a large Rottweiler today over in Pleasanton. The incident occurred on a quiet street.

It's not practical to align every single thing on the page to the same line, but as I mentioned above, you can make every element align with something else on the page. Below is a simple example.

Two elements have different alignments, but the edge of the descriptive text below aligns with the right edge of the title above, connecting the elements with an invisible line:

Compare this to a page where the two elements are not aligned to one another. It looks messy and disorganized. Can you begin to see how alignment is so subtly important?