Design Basics: Alignment To Add Order To Your Design

A couple of weeks ago I promised to expand on each of the four design basics. Today that expansion begins with an example of alignment.

Amateur Design

If you remember I promised to take a bad design and rework it using nothing more than the four basic design principles. Let’s take a look at out starting point. Click the image for a larger size view.

I’ll be reworking this image throughout the series and quite honestly have no idea how the final design will turn out. The goal is to create a design using only the four design principles of contrast, repetition, alignment, and proximity. C.R.A.P as they are sometimes ironically known.

You can see the design elements have been placed somewhat randomly. There is a header, footer, and two columns, but the elements within aren’t placed with a purpose. Text is centered. Elements fall where they will. Overall the design is very amateur.

Improved Alignment

Let’s improve things by aligning the different design elements

While it’s hardly a great design, look how much better it looks simply through alignment. It’s already looking like there’s some purpose to things. There’s now a plan where before there was randomness.

Here’s another look at the above image with some vertical and horizontal lines added to highlight the alignment

Not only is the main copy aligned with itself, but notice how its left edge aligns with the right edge of the logo and the left edge of the footer navigation. The left column is aligned not with the logo itself, but with a visual element within the logo graphic.

The top of each column is now aligned horizontally as are the different elements in the header, though I’ve now switched the contact info from being left aligned to a center alignment.

You certainly could have chosen a different alignment for any or all of the design elements. There is no absolute right or wrong here. The idea is to place things with a purpose. Connect your design elements to each other, though understand it’s ok to have something that breaks the alignment.

Logo Alignment

Let’s take a look at the logo itself and see how we’ve aligned things within this single design element.

Before

After

The original logo placed the text without much thought. The second aligns the company name and the tagline and attempts to create some kind of alignment with the lines in the graphic. The longer line of the text does help reinforce the horizontal lines in the graphic, though that’s an example of repetition, which we’ll get to next time.

Summary

Look over the images in this post and notice how much more professional the design looks simply by aligning design elements.

Again this is hardly a finished design, but the differences with and without alignment are significant. More than anything the principle of alignment brings a design from amateur to professional.

As you travel the web start noticing how the elements of different web pages are aligned. Also take note of when pages break alignment and ask yourself if that break was done purposely or by accident. Breaking alignment (or any design rule) with a purpose can be a great way to create a more interesting design.

Posts in this series

• Introduction
• Alignment
• Repetition
• Contrast
• Proximity

« Prev PostNext Post »

Download a free sample from my book, Design Fundamentals.