Better Graphics That Connect Using a Grid

We’ve all seen graphics that just don’t quite work. Something is off, and we just can’t put our finger on what it is. Often, it’s something playing in our subconscious that confuses our eyes, making them bounce around like a three-year-old on a sugar high. The answer is almost always the grid.

WHAT IS A GRID?

A grid is just a way to make spacing consistent between design elements. It doesn’t have to be complicated. Basically, it helps you create order – one of the best design ingredients.

Why? Anytime your eyes look at something, it processes the information trying to make sense of it. When everything is unevenly spaced, you get confusion because your eyes can’t organize what they see. That lack of order makes our brains turn up its nose at what it sees.

This is a universal principle.

Quick test: look at the following graphic. Which column looks better?

graphic grid

The left one is probably a little cleaner looking. In the right column, it looks like the horizontal alignement is off (and it is). In reality, the grid is off on the right, which makes it visually confusing. Look at it again with the grid made visible.

graphic grid
Graphic with visible grid

Do you see how the grid makes this easier? This is just a very basic example, though. What happens when you add some text to the grid?

graphic grid
Graphics on a grid with text

The left column is easier to read because it’s visually organized. The right column is less defined in space making it less clear.

This has all been subtle, so far. You’ve only seen a simple graphic with two colors and basic text. Imagine what this is like, though, when you see a page full of these design elements. Your web page sets your viewers up for either engagement or bounce.

Keep in mind, all of this happens within a microsecond of viewing.

USING A GRID

Honestly, this can be a loosey-goosey or as geeky as you want (yeah, I just wrote loosey-goosey). Some great designers I know never use the grid system. They just have a great eye. I, unfortunately, am not one of those people.

I usually create all the elements of my design without a grid. Then I go back and make adjustments. You wouldn’t believe the difference in adjusting your design using a grid.

This is my first shot at my title graphic.

graphic grid pinterest
My graphic before the grid

It’s ok. Nothing major pops out. Now look at it cleaned up.

graphic grid
My before and after graphic comparison

Now, I’m not a mind reader, but I can hear a lot of your thoughts. You’re probably thinking those don’t look that different. And you’re right, they don’t. One of them is definitely easier to process. Can you guess which one?

Did you notice that the top element of the graphic on the right is smaller and leaves some space between the tile on the background? If you didn’t consciously see it, trust me, your subconscious definitely did. How about the bottom logo? Did you notice the change in it? Same as the top element, I nudged it up so that the bottom of the tile in the background didn’t confuse the bottom of the logo.

Other small changes: decreased the height of the graphic line, adjusted the space between each line of text and the colored line below them, and changed the line height between each piece of text.

You probably didn’t consciously catch all those adjustments, but some part of your brain did.

Here is the real issue.

GRAPHICS AND SCALE

Every graphic you publish has to scale for multiple screens. It has to have the right spacing for a laptop, desktop, tablet, and smartphone. Each of these has multiple resolutions making it incredibly complicated.

Using a grid of 8 points (pixels) will scale the best on every screen. Put your math thinking cap on for a second. If you design on a 10 point grid, how many of the following screen resolutions will render correctly?

  • 1366×768
  • 1920×1080
  • 1280×1024
  • 1440×900
  • 1280×800
  • 1024×768
  • 1360×768

On a 10 point grid, you get 3 resolutions that connect naturally (using only vertical spacing). Using an 8 point grid, you get 6 out of 8 if you only count height.

CONCLUSION

You might have just read this article and thought that’s a lot of work for just a graphic. I promise you, it’s not that much more work.

But here is a question to ask yourself, “How much does it cost you to confuse my audience?”

With today’s average attention span of less than 15 seconds for page loads, and with the micro-level decision making of your audience, are you willing to send traffic away because you didn’t take an extra minute or two adjust your grid?

I’m not.

I hope this post helps you connect with your target audience. If you liked this, please check out my free eBook Making Graphics That Make Money. You can also join my Facebook group and post some of your graphics (or other content) to get some feedback on them.

JOIN MY RESOURCE LIST!

Conrad.me

Can I send you more great ways to make awesome content? I promise to only send you quality content that will help you grow your business.

Author: Conrad