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.

An example of a web page with an amateur design

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

An example of a web page with design elements aligned

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

An example of a web page with alignment of its design elements highlighted

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
Unaligned logo

After
Aligned logo

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

Download a free sample from my book, Design Fundamentals.

11 comments

  1. Visual Lines help the eye not strain so much as well. It will also keep a readers interest, and with a little creativeness draw a readers attention to different areas you want them to read.

    What a wonderful article. Ill be using this in my work from now on. thanks again for being there.

  2. Dear Steven Bradley,

    I like the way you explain things and you are very good in it!

    May I use this C.R.A.P, example for a lesson? Of course I will put this link and I will put your name!

    Kind regards
    Angelika

    • Thanks got the link. Looks like the only way to get the magazine is through the site, which is probably why I wasn’t familiar with it.

      I see they have some free samples though so I’ll check it out.

  3. Very useful articles for beginners. May I translate these articles of C.A.R.P into Chinese with full length? It will be more convenient for readers in China. Of course I will keep original links.

Leave a Reply

Your email address will not be published.

css.php