“Content Mapping”: How is your layout structured?

I’ve decided to call this technique “Content Mapping,” for want of a better term. What is Content Mapping? Here’s an example. The idea is that the colored blocks will help you visualize how your layout is structured. This has several applications. It’s useful for finding ways to improve your website, or for other things as well. Plus, it’s fun.

Here are some reasons to make content maps:

• It’s useful to know the structure of your website.
• You can compare a map of your site with that of a competitor’s, and one-up them by tweaking your design to excel in ways that theirs doesn’t.
• It’s fun to analyze websites you like (especially ones with cool designs).
• Do you have too many ads? Look at the ACN (Ad-Content-Navigation) ratio.

How do you make a content map? Keep reading to find out.

First you want to get a screenshot of the site you want to analyze (let’s use Ars Technica as an example). I recommend using a tool like the Screengrab! Firefox Extension to capture the entire page. Open the image in Photoshop.

Note: Since Ars Technica’s main page is very long, I’ll only be using the portion of the page “above the fold” for this example. For your own usage, I’d recommend using the entire page.

Now that you have a copy of your screenshot open in Photoshop, create a new layer above the screenshot and set it’s opacity to about 60%.

Now it’s time to start drawing boxes. Grab your Rectangular Marquee tool, and set the foreground color for the color of your choice (I’m going to use a blue color). Make sure the active level is the new one you just created, and select a portion of the screengrab that (on the real version of the website) contains content (not ads, navigation, or branding). Press “Shift+F5″ to bring up the “Fill…” dialog. Make sure that “Foreground Color” is the selected option in the dropdown and click OK. You should have something like the following image.

Now repeat the last step until you’ve put transparent squares over all of the content-bearing areas. You should have something the the below image.

So you’ve got the content portions taken care of? Now do the same thing for Advertisements, Navigation, and Branding (logos and such). Here’s an example of the finished content map:

That wasn’t so hard, was it? As you can tell my looking at the map, theres an an unusually large amount of navigation. On a lot of websites, navigation isn’t given enough attention, despite it’s huge importance. It’s nice to know that some sites are placing that much of a focus on navigation. How important are each of the things highlighted in the map? Here’s a list, in order of importance:

• Content
• Navigation
• Branding
• Advertisements

Content is obviously the most important part of a page, after all isn’t the content the reason people come to your website? Navigation is second, because you need to be able to easily find more of the content. Next you have branding, which tells the users where they are. Last, but not necessarily least (I run ads on my websites), you have ads. Ads are important because they help keep a site running (as do donations).

Content maps are both useful and fun. You should definitely consider making one of your website, and possibly comparing it to another site.