My buddy sent me this article on the “Battleship Grid” analogy. It gives examples and also shows great techniques on how to prioritize the way you website is laid out.

Designing web pages is challenging. Unlike almost any other media, a web design’s integrity is compromised by the nature of a fluid medium. In other words, just because you want something to look a certain way doesn’t guarantee it will — differing browsers, resolutions, screen sizes, monitor calibrations and operating systems all distort the experience.

The one good habit I’ve picked up over the years: learn to compromise. Compromise, however, should be done intelligently and accountably.

One of the more contentious issues in web design presents itself when deciding where specific elements should go and how much space they should occupy. This is especially true in cases where politics (read: Who’s the most important person in the room?) rules. In print, such as in catalogs, they often look to cost and revenue per square inch. We’ll do something similar.

A popular technique we’ve developed over the years for removing politics from these important decisions is the Battleship Grid. The Battleship Grid is where you divide a page into a grid of horizontal and vertical lines of approximately equal size. (I’ll explain why it’s approximate shortly.) The main purpose for using this tool is to spark conversation. Click on the thumbnail image to see an example for a page from Dell.com.

You can read the rest of the “Revenge of the Pixels: The Battle of Screen Real Estate”

Here is one example of how the battleship grid is laid out on “Dells” website.

He is right web design is a very challenging task. Learning and actually using these type of techniques will help make your life much easier down the road.

Other Related Posts...

• No Related Post