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

By 19 Comments

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 delivered to your email inbox so you don’t miss a lesson: enter your email below and the entire Design 101 course — plus blog updates — will be delivered automatically.

 

Design 101 | Make it Easy to Consume Your Information with White Space

By 23 Comments

brand marketing materials are hard to handle when filled to the brim with content

White space is any space on your web site or printed page that doesn’t have graphics or text. When people first try to create their own marketing materials, their first impulse is to not “waste” space, and they fill pages with information.

The best analogy I’ve read so far about why it’s important to incorporate white space in your materials, whether they’re in print or on the web, is from the book The Elements of Graphic Design, by Alex W. White.

“Imagine coffee being poured into a cup. If the cup is filled to the very top, it is difficult to avoid spilling it on yourself as you take the first sip. By having too much of a good thing, we have created a problem. This is exactly the same reaction readers have to being given too much information at once. It is perceived as a problem and their response is to avoid it.”

“Their response is to avoid it.” Oh boy, that’s not what we want. How can you communicate your marketing message if your audience avoids it?

Subtract to Add: Reverse Mathematics Makes it Accessible

The real reason to use white space is to make content scannable and easier to absorb. You want your readers to be able to take in your web site or printed piece in a glance, and understand its meaning quickly.

Surrounding your information with white space makes it look more accessible. Imagine the cup of coffee above if it was 3/4 full. It would look easier to handle, easier pick up, and easier to drink. Try to do the same with your information: surround it with white space so that your audience will want to interact with and consume your message.

Design 101

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

The next lesson will be about grids and their role in design. An invisible grid is the lazy way to build a page!
Get this series delivered to your email inbox so you don’t miss a lesson: enter your email below and the entire Design 101 course — plus blog updates — will be delivered automatically.