Using Alignment in web page layout and design

Alignment is another way of creating associations between visual elements, which help users quickly understand the relationships of objects on a page.

Alignment works by visually associating a number of elements. When you see a number of aligned elements, you instinctively believe that those elements are peers of each other, or share some other common property.

This is a really useful tool for quickly letting a user know what they're looking at by instantly spotting relationships between different elements.

How Alignment Works in Graphic Design

Alignment works on any screen elements: paragraphs of text, images, buttons, pictures, links, even combinations of all of them.

Although aligned elements are often grouped spatially, they don't have to be. Alignment works across the entire screen, even when the axis is broken by another element. However, arranging elements in a line or grid is stronger because it also benefits from grouping.

Top-edge and left-edge alignment are stronger than right- or bottom-edge alignment, because of the natural flow of the cascade. Groups that are aligned by their left or top edges seem to be more important than they would be if right- or bottom-aligned.

Alignment axes that start near the origin (top-left of the screen) are superior to those that sit further right or further down. This is a useful way of indicating a visual hierarchy, particularly when you have too many elements to arrange into a neat cascade. See the first example screenshot below. Spot the top-level navigation links that are only associated by their alignment axis. The second-level links sit along an axis that starts further out from the origin. This makes them inferior to the first-level links - even if they were above some of the first-level links.

Example of alignment trumping cascade hierarchy In this example, the 2nd-level links (Warranties, Car preparation...) are still inferior to all the top-level links (HOME, ABOUT, CARS FOR SALE).

Although the L2 links are superior to the CARS FOR SALE link, it is associated with the higher first-level links by its alignment axis. Because that axis goes nearer the origin than the L2 link axis, all the elements that sit on it are superior to the members of the L2 axis.

Alignment on Web Pages Using Grids

Grids are a really useful tool for page design, and for forms especially. Once you find a design that seems to work because it uses strong and complimentary alignment axes, you can take the grid made by those axes and re-use them on other pages. Re-using layouts based on common (invisible) grids can strengthen a site's consistency.

Homepage of gpin.co.uk, needs a grid layout

This is design company gpin.co.uk's homepage (75% scale). I find the excellent top image instantly appealing, but the page is really hard to work out, due to chaotic layout.

I think that one way to make this design far more useful would be to apply a simple grid-based layout.

Alignment: Simple Example

In this example, there are four alignment axes at work:

There are three top-level navigation links (Home, Cars for Sale, About)
"About" also contains a group of six other links. While they could arguably be viewed as either first- or second-level links, they are clearly distinguished by the fact that they attach to a separate invisible axis.
The text in the main body is all left-aligned, which clearly unifies the paragraphs.
The footer links are unified by top-aligning to the same horizontal axis.

The same image, with alignment axes marked

A more complex alignment example

There are at least 10 alignment axes in effect on this page.
Note the 3 product ad panels towards the bottom. They have no common alignment, which suggests a weaker link than the 'Marketplace Areas', for example. In the absence of grouping by alignment or containment, they are associated by repeating a style.

Example of web layout with insufficient alignment

Screenshot (from ioxied) which lacks alignment

The main content boxes are not aligned, either by their left edges or top edges.
It's impossible to guess which of the boxes will contain the main content, which might contain secondary information, or which you would look at first.