Grids are a designer’s best friend, and anyone can use them to put together pages that look organized and cohesive.
The way to work with a grid is to break your page into small units. You combine these units together — while respecting the underlying grid — to create interesting pages that have variety, but look unified.
If that doesn’t make sense, it’s because talking about grids doesn’t communicate their power. It will make more sense to you if we look at some examples.
Grids in Action
Here’s a blank page with nice, wide borders in place:
We divide the page into columns, using a “gutter,” or cushion of space between each column:
Then we divide the columns horizontally, leaving the same gutter between each rectangle:
Does it look boring to you? Don’t worry — here’s where the exciting part starts.
Combine and Align
Now that we have our grid set up, placing photos, headlines and columns of text is easy. As long as we respect the underlying grid, all our pages will look related. Let’s see it in action.
Here’s one way you can place content on this page:
And here’s another:
And here’s a third. Notice on this example the photo on the top right and the headline on the left “break the grid.” You can do this occasionally to add interest or draw attention to something:
What Information Has the Starring Role?
Every well-designed page has a “star.” It’s the image or text that is most prominent, either because of its size or color. When you’re placing images on your grid, make sure your “star” has the spotlight by making it larger or more colorful — or both.
Use Grids to Organize Your Information
Grids help you organize text and images on a page. They make it easy to snap information into place and help you create a consistent, predictable user experience from the homepage of your website to every other page.
Have you ever used grids? Do you plan to try them now? Tell me about it in the comments.