Grid of Equals

Nike front page

What

Arrange content items in a grid or matrix. Each item should follow a common template, and each item’s visual weight should be similar. Link to jump pages as necessary.

Use when

The page contains many content items that have similar style and importance, such as news articles, blog posts, products, or subject areas. You want to present the viewer with rich opportunities to preview and select these items.

Compare to: Center Stage

Why

A grid that gives each item equal space announces that they have equal importance. The common template for items within the grid tells the user that the items are similar to each other. Together, these techniques establish a powerful visual hierarchy that should match the semantics of your content.

Grids look neat, ordered, and calming. That may suit the style of your site or app.

How

Figure out how to lay out each item in the grid. Do they have thumbnail images or graphics? Headlines, subheads, summary text? Links to jump pages (e.g., a page with the full story)? Render them with more than just blocks of body text: make headlines of different colors, be creative with whitespace, and use images if you can do so evenly across all items. Experiment with ways to fit all the right information into a relatively small space— tall, wide, or square—and apply that template to the items you need to display.

Now arrange the items in a grid. You could use a single row, or a matrix that’s two, three, or more items wide. Consider page width as you do this design work—what will your design look like in a narrow window? Will most of your users have large browser windows? What happens on tiny mobile devices?

You may choose to highlight grid items, either statically (to emphasize one item over others) or dynamically, as a user hovers over those grid items. Use color and other stylistic changes, but don’t change the positions, sizes, or other structural elements of the grid items—you don’t want content jumping around as the user hovers over different items!

A related pattern is Thumbnail Grid, in Chapter 5. This is a way of rendering a list in a 2D matrix of small pictures, perhaps with a small amount of text with each one. See also the Thumbnail-and-Text List pattern for mobile design (Chapter 10). It’s about a single column, not a grid, but the idea is the same: use a consistent, richly styled template for all the items in a list.

Examples

Hulu (below), CNN (below), and Nike (above) use a rigid template for each item. The overall effect is rhythmic and calming. Note how each site uses a different balance of text and imagery.

Hulu

CNN

The examples from MapQuest and IBM show how to do this with only a single row of items. (Technically it’s still a “grid.”) The consistent visual treatment marks these items as peers of each other. Each item ends with one or more links—and that’s true of the Hulu and CNN examples, too. Most of the examples I’ve seen of this pattern use it to showcase linked content.

Mapquest mid-page features

IBM mid-page features

In other libraries

For some wonderful examples, see 15 Tips for Designing Terrific Tables, by Joshua Johnson.