Alignment

Alignment is a very important principle that is often overlooked, perhaps because alignment of elements to a grid is generally taken care of for us by design and word processing software. Alignment refers to the positioning of elements along unseen or implied lines in a composition – it's something we see explicitly in print layout, but it can also appear in any kind of visual composition.

When elements line up to each other, it forces a relationship and unity between them, helps our eyes flow through this now-related content, and creates order and structure in what would otherwise be an unordered collection of forms. Alignment is critical to content flow and structure, and the principle makes clear that no element should be positioned within a composition arbitrarily. Its placement should be purposeful and in relation to some or all other elements in the composition. Below are examples of strict alignment, and near-complete misalignment:

Here's a trick for a good illustration of how important alignment is for every day day design. With a desktop web browser such as Chrome, navigate to a website that you view nearly every day. Sadly, one of mine is Facebook... but you can also use this site, Schwittek.com. Pretty much any site will do.

The browser (in this case Chrome) thinks that Facebook looks the way it does because the Facebook site includes with it a whole collection of style rules, in this case in the form of .css files. These style rules tell the browser what color things certain elements are, the size and scale of text elements, and which elements go where, in addition to many other things. In short, the .css files organizes and aligns the content so we can digest it easily.

Tell the browser to ignore these .css files and, well...you get just raw information without any alignment or positioning:

Try it yourself:

In Chrome (Mac OS), bring up the developer console by pressing either ctrl-shift-j or go to Menu->View->Developer->Developer Tools.
Within the developer Tools pane that pops up, browse to the Elements tab.
This window will show you the source of the HTML document. Look for the <head> tag and click the little triangle next to it to expand its contents.
Anywhere you see a , delete it!
Slowly but surely you will begin to see all the meticulous alignment that made the page beautiful and easy to read is now missing.

But look a little closer: the content is still exactly the same. If you scroll down, you can still read it (eventually). Only the formal qualities have deteriorated. It’s not just alignment that have suffered: visual hierarchy in general has greatly suffered and, as a result, reading becomes and awful, mind-numbing experience.

Creating alignment guides and grid lines prior to implementing a design in content creation applications such as PhotoShop and Illustrator set alignment rules in place well ahead of time and help you remain conscious of how elements are aligned with other elements.

In the examples below, I created a basic (and largely arbitrary) grid structure in Adobe Illustrator by enabling rulers (command+R) and then pulling guides out to where I wanted them. Then I added some rectangular place-holders and some text. Finally, I just hid the guides to demonstrate the resulting alignment.