Ballade: Using the imagination to create visual flow and guide the eye

Charlotte Lambert, Designer

www.csszengarden.com/068

THE VERY NATURE OF THE CSS ZEN GARDEN lends itself to quiet contemplation, and for illustrator Charlotte Lambert, coming up with the visual design for Ballade began with just that. Lambert took a mental stroll through a garden. Her imagination flowing, different figurative items were discovered along the way: A stairway, a small bridge, a cat out for a jaunt.

Moving from her imagination to the pen, she created several sketches to help refine the design's ideas. From these sketches, Lambert hand-drew the images she found along her journey. Using Chinese ink and white paint along with paper and even a beer carton upon which to draw them, she turned to Photoshop to finally organize and produce the images for use on the Web.

Leading the Eye

Good design leads the eye through the content's important points in a logical sequence, in such a way that the viewer is unaware that his or her eye is being drawn to specific points within the page. This is one way designers communicate their message without being overbearing.

To lead the eye, there must be some means of visual flow, with the images and content working together to bring the eye from one important place to the next. In Ballade, we see a clear but graceful visual guidance.

Setting navigation, archive, and resource links off to the left separated the navigational content from the primary content (FIGURE 1). Most individuals viewing Web pages are accustomed to finding navigation links at the left or top of the page, and placing navigation links in those locations quickly frees the site visitor to focus on the primary content.

Figure 1. The primary content in Ballade is separated from the navigation and ancillary information. This is one way of placing the focus on the content and guiding a reader's eye to the page's message.

In Lambert's design, we are led from section to section as if we were literally walking through the garden. We begin at a portico (FIGURE 2) and work our way down a set of stairs (FIGURE 3) and beyond. Each space within the garden has a unique look and plenty of room for content. Headers give us context for the content within each section, thus integrating the content's meaning with the visual flow.

Figure 2. The portico image from Ballade. The illustration adds a great deal to the design's interest.

Figure 3. From doorway to stairway, we are led through the content in both metaphoric and technical ways.

Another important means of leading the eye is to provide occasional resting spots, usually achieved by including ample, appropriately placed white space (FIGURE 4). Color can be used to guide the reader to the key content within the page, and the placement of shapes and lines focus the reader's eye and provide even more direction.

Figure 4. Plenty of white space is used in each content block, allowing the eye to rest as well as improving the general readability of the page.

In the case of Ballade, the designer chose to keep the primary content in blocks of white, providing good contrast for reading as well as enough white space to pad the content and ease the eye through it. And while the color scheme is extremely simple, using a combination of brown, black, and white, it provides a subtle intrigue for us: Is this a garden in winter? In autumn? This question keeps us engaged, looking for more clues.

Finally, the leaves (FIGURE 5), water, bridges, and paw prints (FIGURE 6) help provide unusual shapes within the design, further leading our eye as well as pleasing us with little surprises of wit and whimsy.

Figure 5. The pathway leading out of the garden, strewn with leaves.

Figure 6. An illustrated cat graces the upper right corner of the design. Ballade is filled with enjoyable details, allowing the visitor's eye to always find something interesting and compelling to look at.

Thinking in CSS

An interesting phenomenon in recent years is the emergence of a crop of newschool designers who don't think in the conventional or old-school ways of HTML table-based layouts. Instead, the focus is on thinking in CSS as a means of rendering design. While all CSS Zen Garden designs expect this kind of thinking, there are still many old-school designers who are clinging to the rigid and often more complex mental approach of table-based design. In the case of Ballade, the designer was able to work directly in CSS in order to render the design's layout. But what if that hadn't been the case?

Old-School Woes

Looking at this design from an old-school perspective, it's easy to see that creating something of this nature in a table-based layout would be nightmarish. If you took even just two sections of the primary design and attempted to lay them out in Macromedia Fireworks, using the image-splicing tool, you'd end up with a number of spliced images placed into a table:

 <table bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="597">  <tr>    <td rowspan="3"><img name="ballade_r1_c1"    src="/books/3/82/1/html/2/images/ballade_r1_c1.gif" width="30" height="887"    border="0" alt=""></td>    <td><img name="ballade_r1_c2" src="/books/3/82/1/html/2/images/ballade_r1_c2.gif"    width="537" height="273" border="0" alt=""></td>    <td rowspan="3"><img name="ballade_r1_c3" src="/books/3/82/1/html/2/images/ballade_    r1_c3.gif" width="30" height="887" border="0" alt=""></td>    <td><img src="/books/3/82/1/html/2/images/spacer.gif" width="1" height="273"    border="0" alt=""></td>  </tr>  <tr>    <td><img name="ballade_r2_c2" src="/books/3/82/1/html/2/images/ballade_r2_c2.gif"    width="537" height="429" border="0" alt=""></td>    <td><img src="/books/3/82/1/html/2/images/spacer.gif" width="1" height="429"    border="0" alt=""></td>  </tr>  <tr>    <td><img name="ballade_r3_c2" src="/books/3/82/1/html/2/images/ballade_r3_c2.gif"    width="537" height="185" border="0" alt=""></td>    <td><img src="/books/3/82/1/html/2/images/spacer.gif" width="1" height="185"    border="0" alt=""></td>  </tr> </table> 

Examining this, you'll quickly see how complex the design would be in several significant ways:

• The table-based layout adds a significant amount of unnecessary markup.

• The use of spacer graphics as shims instead of CSS margins or padding adds unnecessary weight to the page.

• The majority of the images are placed by the markup itself, increasing the file weight with the additional markup, which in turn adds to the overall page load time.

• A table-based design of this nature must remain consistent from page to page within a site. Each page contains the table markup and all of the image markup, so the images and page components are redrawn on every page load. With CSS, layouts are cached, and in the case of the CSS Zen Garden designs, the code that manages the images only needs to be loaded a single time.

Of course, these are all common problems with tables. Most designers are well aware that overusing tables causes other concerns, including problems with accessibility, as many screen reading devices for the blind misinterpret table-based content. But if we look at the design significance of this workthe importance of leading the eyewe become aware of another concern: The awkwardness of an old-school approach would disrupt the flow, as complex table-based layouts generally load in a jerky, stilted way.

Note

While CSS layouts tend to render quicker and more gracefully than overly-complex table-based layouts, there is a phenomenon known as FOUC"Flash of Unstyled Content". FOUC occurs in IE browsers when the CSS is being imported rather than linked. If a link or script element appears in the head of the document, FOUC won't occur. CSS Zen Garden designs use the script element to prevent the problem, making the load process very smooth. For more on FOUC, please see http://www.bluerobot.com/web/css/fouc.asp.

New-School Flow

With CSS, however, it's far easier to imagine how to create a design that results in a smooth-loading, easy-on-the-eye experience. Instead of complex tables, irregularly sliced images, and spacer graphics, the designer can think in terms of styling elements individually.

This is not to say that CSS designs shouldn't use inline graphics. Of course it's perfectly reasonable to do so when the graphic is content-oriented, such as a photograph of a company's CEO on an "about" page, or a screen shot of a product on a software site. The point is to separate out those graphics and other page elements that are presentationalwhere their function is part of the design, not part of the content itself.

Note

Wrapping images in headers can be helpful when those images are, in fact, serving as headers. The CSS Zen Garden uses an image-replacement technique to manage this. Image replacement is discussed in Chapter 4.

Here you can see how the graphics for the main content section are placed in the background of header-level elements:

 #preamble h3 {     background: url(road.jpg) top left no-repeat;     height: 106px;     } #explanation h3 {     background: url(about.jpg) top left no-repeat;     height: 168px;     } #participation h3 {     background: url(particip.jpg) top left no-repeat;     height: 154px;     width: 565px;     } #benefits h3 {     background: url(benef.jpg) top left no-repeat;     height: 171px;     } #requirements h3 {     background: url(req.jpg) top left no-repeat;     height: 125px;     } 

Using the Web Developer extension for Mozilla and Mozilla Firefox, you can turn on block-level element outlines and show the element IDs and classes (FIGURE 7). As you can see, this creates a terrific means of finding out exactly where the various sections are within the design.

Figure 7. Ballade viewed using several helpful developer tools found in the Web Developer extension for Mozilla and Mozilla Firefox. Here, each block-level element is outlined, so you gain an idea of how the designer has crafted her layout, and implemented background graphics.

Note

Download the free Web Developer extension for Mozilla and Mozilla Firefox (http://chrispederick.com/work/firefox/webdeveloper).

By stacking the content within elements and relying on background graphics to create the design, the designer achieves a number of significant improvements:

• The page weight is reduced as a result of more streamlined markup.

• Placing the majority (or all!) of the presentation into the CSS means that pages within a site will load much more quickly as the CSS styles are cached, and browsers do not have to reinterpret the style information each time a page within that site is loaded.

• The site immediately becomes more accessible because no presentational elements appear in the document.

• The site becomes more manageable. Let's say, come the spring, we'd like to see Ballade freshened up with some green and gold instead of the more austere colors it has now. That task will be a lot less difficult to accomplish with CSS, which allows more flexibility in the design while keeping the overhead low.

Finding the Bridge

Designing a Web page effectively is no simple task. The designer must examine numerous issues. In Ballade we find a clear expression of how design can be used to lead the eye, how color conveys a certain feeling, and how thinking in CSS rather than tables can be incredibly empowering. It seems that first learning CSS frees designers new to the Web from the limitations and constraints of conventional techniques

For designers transitioning from the use of tables to CSS, the challenge is finding new ways of thinking creatively. That CSS enables us to think outside the proverbial box as we sketch, Photoshop, markup, and style our work is inarguable. It's finding the bridge that can be challenging. With its combination of imagination, artistry, and CSS, Charlotte Lambert's Ballade inspires us to see how we as designers can cross that bridge, opening our imaginations while relying on progressive techniques that move us from the constraints of conventional Web design toward the progressive new environment of designing with CSS.