Using Alignment in web page layout and design

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.

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.

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

• 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.