Alignment: Another Basic Principle of Design

Alignment is another basic element of good design. Everything in design needs to line up with something, and I mean everything. When even one element is not, it sticks out awkwardly and hurts the design. It’s a pretty simple concept to utilize though. An end line of text can line up with another end line, a strand of hair, or the edge of a blob. Let’s start off with a simple example.

Pretend that the following pictures are 2 ideas for a basic billboard advertisement for a fictional trains.com, the number one resource for everything you’d ever like to know about trains. The point of this simple ad is to point a consumer’s eyes to the all important url “trains.com.” It’s dumb I know, but bear with me. Here are the ads:

                                 1)

                                 2)

Which design leads you to the most important information on the design, the url, most effectively? Why did the other one not?

There’s a small slice of my personality called “OCD” that screams at me to fix the out-of-line car in the first example. I could write an ode to that audacious, irreverent, and socially awkward little car. It stopped my eyes in their tracks. I barely found time to notice the url, and if I was in a car, I would have flown by it without a second though. When the car falls in line with the others, however, my eyes move smoothly to “trains.com” without a second though. The power of alignment is in its organizational abilities. We love to look at things that are organized and look clean. (Ever notice how you like the look of a clean and tidy room over a dirty and messy one?) Aligning your design objects organizes them into a logical pattern.

Now, you may have the following concern about this advice: that there is beauty is in random placement of objects. To that, I agree with you. Artists do it because it makes viewers think and interpret. But in most cases, random placement is trying to make you think outside the box, look beyond what you see. My guess is that most of your work will be to push a certain message (read this book, visit my website, etc). When you design to convey a message, you need alignment. A lack of it pricks at the back of a consumer’s mind. That prick leaves him or her with an unsettled feeling, pushing them away as opposed to drawing them in.

There is a simple fix for this train design. The designer can either 1) put that car back in place, or 2) take advantage of that break in the line, and start the url name at the edge of the out-of-place car. The consumer’s eyes will now follow the break in the line to the all important url and ignore the rest of the cars. In this way the advertiser reaches their goal, and has to do little editing to change the actual picture. Check out an example of this below.

Here’s an example of alignment used in one of our recent flyers.

All informational text is aligned left (if you look closely, you’ll notice that the last letter of every line of text aligns to an invisible vertical line. Punctuation falls just to the right of this line. This helps keeps the visual feel of an invisible vertical line). TM Publishing’s name also aligns to that invisible line on the right. Its baseline aligns with the baseline of the KBeckbooks logo to the left. The left edge of the “K” in KBeckbooks aligns with the left edge of “The” in “The Blot. Look deeper in this design to see how alignment has been used. Also, pick up a magazine, newspaper, or access a website. Look for ways in which alignment was used well, and where alignment was used poorly. Find your favorite styles and start using them in your own designs. 

Alignment, like most of the other basic elements of design, is not as difficult as you might think it should be, providing its importance. Don’t be afraid to make it a priority in your design. Furthermore, DO NOT hesitate to rearrange or change your design if you find it out of alignment. It’s worth it, trust me.

As always, I appreciate any comments, questions, or feedback you can leave me on this matter.