The hubze Blog

Posted: 16 Aug 2012 03:19 PM PDT

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

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

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

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

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

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

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

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, ads 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.

Affilate Marketer Timeline Cover Photo

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

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.

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 tiding 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!

Get this textbook!

The Non-Designers Design Book, by Robin Williams

If you want to get the most from the Hubze Hangout Design Courses, I highly suggest you purchase this book. This is the basis of where I derive my lesson plans, and it’s just an all out awesome book, written for exactly this type of audience.