Pamela Wilson

Check out my free workshops. Pick your topic and start watching now:

Unlock the Power of the Grid

how to design a good web page using gridsGrids 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.

Say, What?

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:

website design ideas start with a blank page

We divide the page into columns, using a “gutter,” or cushion of space between each column:

website design ideas continue by divide the page into columns

Then we divide the columns horizontally, leaving the same gutter between each rectangle:

website design ideas continue with dividing the page columns horizontally

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:

brand marketing on the web depends on respecting your grid

And here’s another:

brand marketing on your site is consistent when you follow your grid

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:

brand marketing on the web is better if you choose when to break your grid wisely

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.

Pamela Wilson

I want to help you take the next step. Pick your free workshop topic and let’s do this!

8 thoughts on “Unlock the Power of the Grid”

  1. That looks very interesting, i would love to see what I can do to improve my new blog. However, I will not be able to attend the webinar live. I hope to see the video or audio later. Thanks again. Wish you the best Pamela.

  2. Pamela,

    Thank you for the layout. I’m on my way to Photoshop to make a template. The page that the word “Grids” links to is also template worthy!

    Looking forward to the webinar,
    Theresa

  3. I actually did not know this. I’m a neat freak, so I think I intuit it, but understanding why some ‘things’ bother me is fascinating. I’ll bet this grid layout concept explains why I’m satisfied with my new blog template, very gridy. I think knowing this will help me better figure out what needs to be changed when we produce office print material. Thanks.

  4. I’m re-working some old InDesign layouts using grids. Wow, what a difference it makes. It’s also much easier to add the content this way. Instead of guessing where the photos or section titles should go, I just line things up to a guide. It also lets me visualize how big my photos are in my layout. I had a tendency to make them too big before, now I’ve got some guides to stick to!

    Thanks Pamela!

    • Thanks for this comment, Marlene. I’m glad they’re working for you! I think grids are kind of magical … but you don’t realize that until you start to use them. I’m glad you gave them a try.

  5. How do you use grids with the Thesis theme framework?

    I’ve worked extensively with 960.gs which is a popular HTML/CSS grid framework, but integrating it into Thesis seems quite impossible, since Thesis changes the total page width according to the body font size…

    So how do you use grids in Thesis?

    PS: That popup box that pops up on your site all of a sudden is a bad idea. Feels very spammy.

    Oliver

    • Hi Oliver,

      There’s information about using a 960 px grid with Thesis here: https://www.weye.org/2010/05/going-fixed-width-thesis/

      I agree: it’s not an intuitive or easy thing to do when you’re using a theme. I haven’t done it myself! I tend to use grids more when I’m doing a site design from scratch, or when I’m designing print material.

      As for the pop up, I’m thinking you might be a first-time visitor to this site. It’s set to appear the first time someone visits from a browser, and only after they’ve spent a few minutes on the site. It shouldn’t pop up for you again (if it does, please let me know).

      It converts very, very well for me, so even though it’s a little annoying, I won’t be changing it. 🙂

  6. Ah, okay I also myself only use a grid when coding a WP theme from scratch, which ain’t that hard, but I’m always looking into frameworks as I have a wish for a simpler/faster starting point.

Comments are closed.

Learn More

Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages

© Zurek Design LLC — Read our fascinating terms of service.

Click to watch free on-demand training about online business and visual marketing

Need a hand?

Watch a free workshop now. Pick your topic below.

Share
Tweet
Share
Pin
Buffer