The principle of alignment is just as seemingly simple as some of the other ones, almost defying the need for definition. And yet, when reflecting on the basic principles one can learn from the simplest of ideas and be reminded of their importance. This process of relearning the basics really helps to refresh our minds and focus us on the basic underlying elements which create great design.

Alignment is quite simply the arrangement of elements in such a way so that the natural lines (borders) created by them match up as closely as possible. By doing so these elements become unified and form a greater whole. With out being aligned these elements tend to fall apart and lack the unification we so often seek out. A perfect example of this is having the tops of two columns line up, or the left edges of a series of stacked elements align with each other. When examined carefully, well aligned pages can present rather complex interactions among the elements of the page.

The primary reason to focus on alignment is for unification. Often times a page which somehow doesn't feel very sharp simply lacks alignment. Sometimes I get so focused on each section of a page, the header, content and footer, that I forget to look at how they interact in terms of alignment.

Those charged with the task of taking designs and turning them into code should be particularly aware of this principle. As a design is translated into reality it often becomes more tedious and difficult to replicate the alignments established in the original design. Not only is it tedious, but it is often easy to not even notice and perhaps forget about. As developers an awareness of design on this level can really help in the translation process.

Sample 1 - Progressive Design In Motion

The Progressive Design In Motion site is a fine example of alignment. This site is a perfect example of how an underlying grid can help create a unified approach. Imagine if this content heavy site didn't make liberal use of alignment. The result would be a chaotic hard to read page. The grid of the page not only serves to unify it visually, but to also increase the ease with which the page is consumed.

Another interesting point about this site is how the designer broke the grid. Take the logo for example. It would have been really tempting to find a way to make it fit into a single column. But would that have improved the design? Not really. Also, look how the main nav items overflow from one column, but don't fill the second. Again, forcing this to live in a single cell of the grid would have probably just made it harder to use. So in this way the site not only demonstrates the power of a grid system, but also the appropriateness of breaking it.

Sample 2 - Poccuo

The Poccuo site is yet another demonstration of the usefulness of basing a site design on a grid for alignment purposes. In this case the grid has been followed to an extreme. And yet, it doesn't feel forced. Perhaps that is the differentiator. Don't force the grid when it needs to be broken, but follow it when it should. How is that for ambiguous advice.

What I really love about this sample is how the content fits into the grid. At the top of the page the content is large and occupies the full width. As the page goes down the content grows in density and the subdivisions of the grid become smaller. Consider the principle of emphasis in this case. The order of hierarchy in the page follows the page from top to bottom. This couldn't possibly play into the natural order of things any better. Now if only I could get such a super clean approach to work for a content heavy site such as Design Meltdown.

Honestly the beauty of this site speaks for itself. And the power of the grid could not be more obvious.

Sample 3 - Rob Goodlatte

In this less extreme sample, the Rob Goodlatte site demonstrates the principle of alignment in a more typical situation. The home page of this site is designed such that the side bar ends at the same place as the main content column. This simple feat means that these two chunks form a whole. The grid is even extended to the footer, there by unifying it with the design. The end result is a design which doesn't feel pieced together, but rather built to be one solid unified chunk of content.

Next we will be looking at the principle of repetition, so be sure to tune back in tomorrow!