Alignment: Design Principles Part 3

Design Principle 3: Alignment
This article was originally written by me for Hubze, a former Social media news and tutorial source.

Welcome back to part 3 in the Principles of Design series on Alignment!

Like Proximity, Alignment is another very simple concept to understand, yet when used correctly, can result in very dramatic improvements to your designs. To that end, let’s begin with a quote from the great designer and teacher, Robin Williams (and no, not the Mrs. Doubtfire Robin Williams).

“Lack of alignment is probably the biggest cause of unpleasant looking documents. Our eyes like to see order; it creates a calm, secure feeling. Plus it helps communicate the information.” – Robin Williams, The Non-Designers Design Book

Now that we know why it’s important, let’s understand what it means.

The Alignment principle states that every element on the page should have a visual connection with something else on the page. Nothing should be arbitrarily thrown on the page simply because there was space to put it there.

The best way to see alignment is through an example…

Bad business card alignment

Bad business card alignment
Bad business card alignment

Here’s an example of a potential Hubze business card. Take a look at all the information on the page and see where your eye moves as you read it. Is your eye still moving around looking for a place to land? Well, that’s mostly due to it’s poor alignment (and proximity).

Bad alignment dissected

No items on page align with each other
No items on page align with each other

As you can see above, none of the elements on the page line up with each other. There is no clear line for your eye to follow, and the result is just plain sloppy.

Better Business Card Alignment

Good alignment
Good alignment

By moving everything flush right, there is an invisible line that forms along the right edge, making it cleaner and easier to digest the information. Take note of how I rearranged the info to improve the proximity as well.

Move from the Center!

No, this isn’t a political cry asking you to be more opinionated, it’s a design mantra that I want you to repeat 11 times before you sleep each night. Most new designers (or those of us forced into doing the design work) tend to center align everything. It’s a safe way to do things, and most of the time it’s uninspired, dull and boring — three adjectives that should never be used to describe your design. While center aligning things isn’t always a bad idea, most of the time a cleaner, more dramatic effect can be accomplished using left or right alignment.

Let’s see some more examples…

Ted’s Fine Dining

Boring center aligned piece
Boring center aligned piece

Above is a sample Facebook post for a fine dining restaurant. Everything is center aligned and pretty forgetful. While there’s nothing really wrong with it, it can be done much more effectively.

Align right or left for better effect

Aligning right more exciting than plain center
Aligning right more exciting than plain center

Look what happens when we move everything flush right and add a simple vertical stripe along the right side. While none of the content changed, there’s a better overall feel of the piece, don’t you agree?

If you must center, make it look like you mean it

Make center-align obvious
Make center-align obvious

Center aligning things isn’t always a bad thing, but when you must, make it look like it was a specific design decision, not a crutch. As you see above, by making everything more narrow, and calling attention to the center by encasing everything in a colored box, it looks like I put everything there for a reason, not because center align was my software’s default setting.

Be in the center, not the middle

Move center-aligned pieces from the middle of the page for different effect
Move center-aligned pieces from the middle of the page for different effect

Another way to add excitement to a center-aligned element is to move it off-center. Yes, the text shares a central line within itself, but the entire entity is moved off center of the page. This, again, adds a little excitement to the piece, which is always better than boring.

Alignment in a social example

Alignment and proximity are definitely the most basic and fundamental principles of design. Because of this, we can find examples of them in almost anything we see. Let’s take a look at a real-world design and examine it for alignment.

Affiliate Marketer Timeline Cover Photo

Alignment needs help
Alignment needs help

The above design is obviously very plain, but that’s not really the issue. Aside from some questionable copy and lack of imagery, the initial communication problem can be found in its alignment and proximity.

Alignment fixes all

Moving to left-aligned makes for better layout
Moving to left-aligned makes for better layout

By simply aligning elements with each other to the left, the design becomes much stronger and more attractive.

And lastly, on any open canvas, there’s always more than one way to solve a problem.

Right align works as well
Right align works as well

Look what happens when I align the text right and tie it all together with a simple rectangle.

Either of the above examples is a much better result from the start, and it was all achieved by simply tidying up the alignment.

What you need to remember about alignment

  • Alignment unifies and organizes a page
  • Be conscious about where you place elements
  • Find something else to align it to, even if it’s far away
  • Avoid using more than one type of alignment on a page
  • Try not to center everything!

And that’s about it. Try to be cognizant of this, and all the design principles as you work, and your pages will be cleaner, clearer and more effective than you could ever imagine.

Until next time, Cheers!

Read part 2 of the series, Learning Proximity in Design

Read part 4 of the series, Learning Contrast in Design

Read part 5 of the series, Learning Repetition in Design

1 thought on “Alignment: Design Principles Part 3”

Comments are closed.