Learn about proper spacing

Part Four of Seven Easy Principles to Becoming a Master Designer.

Sorry for the long delay in releasing this latest installment of Seven Easy Principles to Becoming a Master Designer. We have been slammed here at Go Media and I literally haven’t been able to touch anything except paying projects for the past two months. Enough complaining. On with the show!

This lesson is all about layout and spacing. One mistake I see young designers make frequently is that they cram everything too close together. They try to put too much content in too small of a space. Space is your friend! Space does many things for you. It makes your copy easier to read. Space makes your over-all composition easier on the eyes of the audience. And space also makes your design look elegant. You’re telling the audience: “we’re so rich we can afford to use this entire poster to communicate this one little message.”

So, there is a basic strategy for the layout (spacing) of your design. And that strategy is: HAVE ONE. What I mean is – have a plan. Have a system. This is the first thing. Unless your GOAL is to make the entire layout look random, you’re going to need a plan. This is usually accomplished with a grid. The grid can be any style you want. But you need to have an underlying system to what you’re about to do. Here are a few examples of different grids, just so you can get a sense of how different or unique your grid can be.

Sample design grids

Now, here is some of the same content laid out three different ways: two with a grid and one without. As you’ll see, each grid still leaves you with a lot of layout options. Having no grid can result in chaos.

normal grid layout
normal grid layout

These first images show a fairly traditional grid. The lines are perfectly vertical and horizontal. They are dispersed at regular intervals.

diagonal grid layout
diagonal grid layout

This second grid is similar to the first one with one simple change – I have slanted the vertical lines to match up with the angle of the sides of the container that holds the logo at the top. You can see how a minor change can result in some really cool results.

no grid layout

This last example has no grid. Spacing is random. Now, I obviously really messed this up to make a point. This particular piece does not have much content, so – even messed up it really doesn’t look THAT bad. But the more content you have, the more important it becomes to be working with a system of organization!

I know you’re asking yourself: “Does he REALLY make a grid before he lays out every single design?” Well, no, I don’t. But understanding the method behind proper layout WITH A GRID will eventually allow you to design WITHOUT A GRID (The grid will just be in your mind. You’ll visualize it on the page, but won’t spend the time to set one up.)

So, what does this grid teach us?

1. Well, the most obvious answer is: LINE THINGS UP! Seems obvious right? Well, once again – this is one of those basics that the novice will often times forget to do. Not every single item in the design lines up in one single file line, but things that should look like a group should be placed on the same grid line – they should line up. *If you have never studied the Gestalt Principles of grouping, now would be a GREAT time to do a quick Google search and familiarize yourself with these concepts. They are critical to how you layout your design.

2. In addition to lining things up you want to space things at regular intervals. If you have three bullet points under a heading, you want to make sure the interval of space between each bullet point is the same.

3. Having ample space around your copy makes the copy easier to read. Here is an example of two designs – one is spaced nicely away from the edge of the flyer and the photos, the second on is close to the edges of the flyer and close to a photo.

well spaced copy
poorly spaced copy

Does one feel cramped and hard to read? Answer = yes. Even though the second example has bigger text, it feels cramped and is harder to read.

You also want to avoid what is known as the “kiss.” No, this does not involve lips. A “kiss” is when two objects just barely touch. If, for instance, you have copy and a photo and they just barely touch. This is bad. Either give them a sufficient gap OR, make them overlap in a very obvious way.

a kiss is bad
Here is a close up of the fight flier – here the web address just barely touches the horizontal background orange line.

having space is good
Here is the same design with the web address pulled back away from that line. This is much better.

overlapping is ok too
Or, if you need the room – they can overlap. But I am going to make sure they are overlapping by a significant amount. Also – just to insure that there is enough contrast between the web address and the background I have added a drop shadow. This way the web address really pops off the page.

And a quick aside – if anyone out there needs a great workout, nutrition plan or a fitness assessment please visit www.hyperstrike.com (Yes, they are one of our clients. And they truly have a GREAT service.)

Now – I know one problem many of you designers are having (because I’ve had this very problem myself): a client that wants you to cram 50 pages of content onto a single 8.5×11 inch flier. When you do your very best to layout all of this information in an organized way your client says: “Oh! There’s enough room to put some more info on it! Here is another 10 pages of content to cram on there!”
What do you do? What do you do when a client keeps giving you too much content for too small of a space? Well, this is a problem. And there is not necessarily an easy answer. My first piece of advice would be to try your very best to EDUCATE your customer about good design principles. Try to make them aware that their audience won’t even want to LOOK at an ad with this much content crammed into such a small space, let alone spend the time to try and read it. If the client won’t listen to reason you may be stuck producing a horrible design. I’ve had to do this. It sucks. If you have the time, you could also layout one version that is clean and ask him to take a survey of their friends and get more opinions. Unfortunately we frequently don’t have that much time available to us. So, we do our best hang our heads low as we send the design to the printer.

One last little thing to be aware of is optical illusions. Huh? How do optical illusions have anything to do with spacing? As crazy as this sounds – you need to be aware of optical illusions when you space your objects! Sometime, due to optical illusions – your proper spacing will LOOK like its off-center. A curving pattern in the background for instance can make an object look like it’s leaning, or is simply off-center.

So, how do we compensate for these optical illusions? Well – you use your eye; the same tool that is telling you it looks wrong, will be the tool you’ll use to correct for the optical illusion.

Making a correction for optical illusions is known as “best appearance.” It’s not necessarily correct, but it’s what LOOKS correct.

So, always take one last look at your composition and make sure everything looks right.

I guess those are my pearls of wisdom concerning spacing. Three more articles to go for this series! Thank you for your support.

Popularity: 12% [?]

Enter your email to get articles sent directly to your inbox:

Delivered by FeedBurner

Send this article to a friend: Email This Post/Page
Other articles you may enjoy:
Becoming a Master Designer Rule Two: Limit Your Colors
Rule Three: Contrast, Contrast, Contrast
Links