This is Lesson 7 of the Design 101 Series
Some 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.
This is a Design 101 lesson with a powerful pro tip!
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.
Design 101 — Here’s where to start with grids
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.
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.
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.
Related: The Complete Beginner’s Guide to Starting Your Website Content
Grids 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 — the whole series
This is the seventh in a series of ten lessons called “Design 101.”
Subscribe to my YouTube channel to catch all my new content so you can grow your online business!
The next lesson in the Design 101 series 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?
19 thoughts on “Design 101 | Toe the Line: The Lazy Way to Design”
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:)
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).
Page layout in plain English. How to do it, and why it works. That’s brilliant, Pamela.
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.
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.
Pamela, thanks – great message! Hope I didn’t sound critical.
That makes so much sense!
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!
Comments are closed.