Not sure where to start? Take the assessment

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

Design 101 _ Toe the Line_ The Lazy Way to Design

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.

brand marketing materials look more organized when you establish page borders

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.

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.

design 101 working with grids

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

Design 101 the page without the grid lines

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?

Pamela Wilson

Pamela Wilson coaches people in mid-career to build profitable online businesses. Apply to work with Pamela in her Offer Accelerator, learn more about her books, and read reviews of the tools used to run this site and business.
Pamela Wilson coaches people in midlife to build profitable online businesses
I’m Pamela Wilson

In 2010, at the age of 45, I started this site and grew it into a business that offers freedom, flexibility — and consistent revenue.

Get smarter weekly

If you’re in mid-career, I want to help you grow a profitable online business.

Sign up to master (and laugh at) the online business life with me:

Start here

Read my Ultimate Guide for How to Build Your Business Online. You’ll get my complete, step-by-step approach to building a revenue-generating online business you love to own and run.

19 thoughts on “Design 101 | Toe the Line: The Lazy Way to Design”

  1. 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. 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. Pingback: pligg.com
  4. 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.

  5. Pingback: yentit.com
  6. Pingback: Spoter.com
  7. Pingback: dropjack.com
  8. Pingback: listmint.com
  9. 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.

Pamela Wilson coaches people in midlife to build profitable online businesses
Get smarter every week

Learn about running a financially successful online business in mid-career with my weekly emails.

    Share
    Pin
    Tweet
    Share
    Email