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?
