Screen Space : How a website divides up the screen.

Practically any web page layout can be categorized into four* distinct spaces:

Context (Logo, Navigation, Related Links, …)

Content (Article, Movie Trailer, Photo Gallery, …)

Advertisement (Animated banners, Sponsored Links, …)

White space (empty areas)

All four have their reason of existence. Context will let you know where you are and where you may go if you want to stick to this site. Advertisement supports the webmaster, but only works if the visitor is attracted by the actual content. And finally white space cleans the design, leaving you room to think, and it also separates the other three areas.

*Of course, there are nuances in-between these categories. (For example Google ads are usually highly relevant, coming closer to be actual content.) Context may also be highly functional and transcend into what could be called “application area” (like Google’s search box).

While most web pages feature all four parts in their real screen estate, some put heavier focus on a certain part than others.

Usually what we think of as uncluttered, focussed design would be along the lines of 70% content, 10% context, 10% advertisement, and 10% white space.
A cluttered page on the other hand would consist of say 60% ads, with 10% content and the rest context and white space. We might still find our way around easily (e.g. by scrolling and pretty much ignoring everything else but the main text), but the page still feels noisy and annoying.

I used the colors red, green, gray and white to visualize the different sections on three different types of web sites. Let’s start out with German news magazine Spiegel Online (high noise), then look at gadget Blog Gizmodo (average noise, not really affecting the user experience negatively), and finally Google (usually low noise, though the example search for “web design” is highly noisy for Google’s standards).