Design 101 | Toe the Line: The Lazy Way to Design

brand strategy includes organizing a page like your would arrange a roomSome people can’t stand to see anything out of place. They straighten picture frames, friends’ collars and sofa cushions. If this describes you, that impulse can serve you well if you’re trying to organize a page. When people place text and graphics on a page with no alignment between the items, the overall effect is scattered and disorganized. Straightening things out and lining them up will bring order.

Creating an invisible grid to line up elements along is the lazy way to put together a screen or a page that just “looks right.” No more guessing about where to place elements: you’ll be able to snap things into place confidently and quickly.

Neat Freaks are Natural Designers

Neat freaks look for natural sight lines in a room, and line picture frames and cushions up along them. When a neat freak (or a designer) approaches a layout for a page or a screen, the first thing we consider is where the sight lines will sit on the page so that we can organize the information within them.

Not a Natural Neat Freak?

If you’re not one of those order-seeking types by nature, don’t despair. You can still set up a grid to make your page or your screen look more pulled together. When you put an invisible grid in place behind your graphics and text, you’ll always know where they should go.

brand marketing materials look more organized when you establish page borders

Here’s Where to Start

When you walk into a room, you don’t stand right next to the wall, do you? If you can imagine your page like a room, the first thing you should do is to put some space between your content and the “walls” of the room, which are represented by the page borders, or the edge of the screen. Bring your text and images in from the edge and give them some breathing room. This is the place to start building the “invisible grid” that will make putting together the rest of the page easy.

make your brand marketing materials look organized when you establish a grid

Assemble Your Grid

Working in from a generous border, draw guidelines using your word processing, page design or image design program. Start by drawing guides that represent the space from the edge to the page content.

From there, you’ll create “sight lines” that will help you to align the other elements on your page. The trick with grids is to split the columns your audience will see, and use this middle guideline to align things within the text.

[Your audience will perceive a two-column grid with a headline across the top. Only you and I will know that each column is split in two.]

With this second, invisible grid within the two wide columns, we create logical sight lines that we can use for photos and other graphic elements.

brand marketing materials look more organized when your content follows a grid

Now Add Your Content

When you add graphic elements like a photo or call out text (an excerpt from your text that you want to emphasize) you can use this invisible grid to help with placement. The photo looks great when positioned and sized to fit within the invisible column. The text call out is the width of the second column, and lines up along the top and bottom with the photo.

brand marketing materials look polished when you use a gridGrids Hold it All Together

Here’s our layout with the grid stripped away. Nice wide borders make the content look important. The text call out lines up beautifully with the photo, and the whole page looks ordered and readable.

The beauty of a well-planned grid is it makes design decisions easier, and creates consistency from page to page. Your readers won’t know why, but your pages will “look right.” Don’t worry: your invisible grid will be our little secret!

Design 101

This is the seventh in a series of ten lessons called “Design 101.”

The next lesson will be about creating hierarchy in your design so your main message doesn’t get lost. The main question to answer is, who’s in charge?

Get this series — plus my Marketing Toolkit and blog updates — delivered FREE to your inbox. Sign up below!

Comments

  1. says

    I’ve always said I’m the least aesthetically-minded person out there, and I would gladly defer to a stone for visual advice. You’ve taken a couple of steps here towards convincing me that I’m selling myself short:)

  2. says

    Josh, I’m convinced that everyone can learn the basic rules of design and put them into practice to make their marketing work better – it’s why I’m writing this blog! Thanks for stopping by (your blog is awesome, by the way).

  3. Kim says

    Pamela, I’m enjoying your blog – insightful, affirms and enlightens. I must say, though, I cringed a tiny bit at the mention of “word processor” in the ‘assemble your grid’ section. For basic in-house layouts a word processor is great, but unfortunately there are many that believe their word processor files are suitable for commercial printing.

    • says

      Kim, that’s the topic of a whole different blog post, isn’t it? Grids can be used for something as mundane as a photocopied flyer, or a resumé, and those are definitely put together in word processors.

      There’s a place for word processing in commercial printing, but it’s limited. I’ve seen it used for one-color jobs, and small posters. As long as your program can create a print-ready PDF (and many can) it can work.

  4. says

    Kim, not at all: you raised a good point, and – since I’m always scheming up new post ideas – I’ll put it on my list of topics to cover. I’m trying to empower folks to use what’s on their desktops when they can. Word processors can’t do everything, but they can do some things if you know how to use them. Thanks for commenting!

Trackbacks

  1. Design 101 | Toe the Line: The Lazy Way to Design…

    Some people can’t see anything out of place. They straighten picture frames, friends’ collars and sofa cushions. If this describes you, that impulse can serve you well if you’re trying to organize a page. When people place text and graphics on a page w…

  2. Design 101 | Toe the Line: The Lazy Way to Design…

    Some people can’t see anything out of place. They straighten picture frames, friends’ collars and sofa cushions. If this describes you, that impulse can serve you well if you’re trying to organize a page. When people place text and graphics on a page w…

  3. Design 101 | Toe the Line: The Lazy Way to Design…

    Some people can’t see anything out of place. They straighten picture frames, friends’ collars and sofa cushions. If this describes you, that impulse can serve you well if you’re trying to organize a page. When people place text and graphics on a page w…

  4. Design 101 | Toe the Line: The Lazy Way to Design…

    Some people can’t see anything out of place. They straighten picture frames, friends’ collars and sofa cushions. If this describes you, that impulse can serve you well if you’re trying to organize a page. When people place text and graphics on a page w…

  5. Design 101 | Toe the Line: The Lazy Way to Design…

    Some people can’t see anything out of place. They straighten picture frames, friends’ collars and sofa cushions. If this describes you, that impulse can serve you well if you’re trying to organize a page. When people place text and graphics on a page w…