Whitespace

The graphic design term whitespace (or negative space) literally refers to any area of a page that’s not covered by type or illustrations. While many novice web designers (and most clients) feel a need to fill every inch of a web page with photos, text, tables, and data, having empty space on a page is every bit as important as having content. Without carefully planned whitespace, a design will feel closed in, like a crowded room. Whitespace helps a design to “breathe” by guiding the user’s eye around a page, but also helps to create balance and unity—two important concepts that we’ll discuss in more detail later in this chapter.

At this point, we’ve had our initial meeting with Mr. Smith, our theoretical client, and it was very helpful. He explained very thoroughly what he does and what he wants the site to achieve. Even though we don’t have actual content yet, we can use the standard blocks of web page anatomy to start developing a layout. Although other site-specific blocks are worked into the designs of many web site layouts, the web page anatomy works to summarize the most common blocks. Now that we have this information, how can we use it to create a foundational layout for Smith’s Services? It’s time for some grid theory.

NOTE above the Fold

The fold, as some usability experts call it, is the end of the content users can see on a page before them Scroll down. This metaphor is derived from the concept of a fold in a newspaper. If you look at the cover of a folded newspaper, most of the headlines and important news will appear on the top half, so that you can see the most important news items at a glance when the newspaper is folded. The location of the fold on a web page depends on the browser dimensions and the user’s screen resolution. At a resolution of 800 × 600 pixels, accounting for browser chrome, the address bar, and a bottom status bar, the fold is usually just over 400 pixels from the top.