White Lily: Principles and process for designing effective layouts

Jens Kristensen, Designer

www.csszengarden.com/036

DESPITE THE FREEDOM of no specific visual requirements for Zen Garden submissions, Jens Kristensen determined that there are four clear keywords that command attention: visual, CSS, Zen, and Garden. This provided him with an overall identity for his work, which he felt should be relaxing and calming with a strong botanical theme.

After establishing the theme, he went on to study the content and sketch layouts that would be appropriate to the goals he defined. In this methodical way, White Lily emerged as a practical, useful layout that has served as an inspiration for many sites around the globe.

Layout Principles for the Web

We often bandy about the word layout and simply mean the number of columns we want on a page. People learning CSS frequently approach layout that way, asking, "How do I create a three-column layout?" or "How do I create a layout with a header and a footer?" These are good questions, and important ones, but before even getting to the CSS, we should carefully study the principles behind why we might choose a given layout.

Note

Readers familiar with other forms of graphic arts, such as print and package design, will quickly see that there are unique challenges when creating onscreen layouts. Newcomers to the study of Web design rapidly learn that laying out a page, while sharing some common techniques with print, is decidedly different than print.

Techniques that assist with designing effective layouts are rooted in principles that have been around long before the Web. While certainly modified for the Web, these principles are a necessary foundation for creating layouts that not only look great, but also function well.

Layout in all forms of graphic art serves a primary purpose: to organize content in an effective way. How that pans out visually is going to differ, depending upon your medium, content, and audience. A secondary concern with layout for the Web arises from the fact that the layout must support function, too. Links, menu systems, and forms are all examples of functionality that must be integrated effectively into any successful layout. Finally, layout is a cornerstone of a Web site's consistency, which is essential for usability and human comprehension.

Look Before You Leap

One of the most beneficial processes that later aided Kristensen during his creation of White Lily was his attempt to first organize the content with which he would be working.

Organizing content serves several purposes. Most immediately, you get a clear overview of what must be dealt with, which naturally leads to prioritization of the material. This spurs further thinking about the layout and various approaches that might work to achieve the goals of form and function.

Kristensen first grouped the CSS Zen Garden content into three categories:

• General Zen Garden info, such as the templates, the validation links, and the garden overview

• Zen Garden links and navigation

• The main content

Using this specific information, he began to work on page composition. He now had two very specific goals: to meet his thematic ideas, and to present the content in three distinct sections. Several iterations were necessary to decide on a final style (FIGURE 1).

Figure 1. An alternate style for White Lily.

Finally, he settled on what he submitted as the completed White Lily. It's important that your layout choices are based on content and visual requirements, and not made at random or because a specific layout happens to be trendy.

Layout Solutions in White Lily

With a clear idea of how to proceed, Kristensen made his choices regarding management of theme and content.

Kristensen determined that the photo of the lily would set the stage for the botanical feel he wanted. From the photo, he drew inspiration for his color scheme. He also took additional care in choosing embellishments that extended the botanical concept (FIGURE 2).

Figure 2. Three metaphorical floral symbols used within White Lily to enforce the botanical theme.

Kristensen's work really shines when it comes to content. Because his goal was so clearly defined, it was easy to determine the content's priority and how to effectively address it via the layout.

By placing the general garden information in the header, he achieved two important goals: representing the "brand" (in this case, the flower and CSS Zen Garden page title) and clarifying the reason for the page. Also included in this section are the sample HTML and CSS files, along with the validation links (FIGURE 3).

Figure 3. Addressing one of the explicit needs: to group related content effectively.

This frees up the remaining layout to address two significant concerns: navigation and primary content. For navigation, Kristensen made use of the left-hand column, which works very well because it's an expected location for navigation. The right-hand column is used for the primary content. Both sections are styled lightly and remain crisp and clean. Altogether, the header and two-column layout suited the goals and needs well, resulting in an uncomplicated design that simply works.

Layout Inspiration and Guidelines

Once you have an idea of your overall goals, you can take advantage of helpful information to guide you while refining the layout. This section explores some of the primary concerns when working on layouts for the Web. Two main disciplines offer guidelines for designing great Web layoutsuser interface (UI) design and usability.

User Interface Design

Unlike print design, a Web page offers interaction, which means that it no longer contains just a passive message. User interface design is a relatively mature field due to the many aspects of computer technology that require interactive interfaces: Operating systems and software applications are both examples.

Some of the fundamental principles of user interface design:

• Know your users, as they're the ones you are designing for.

• Keep the user oriented within the page and the site.

• Use familiar metaphors. A great example of this would be the shopping cart symbol on an e-commerce site. Even newcomers to the Web understand what the symbol signifies (FIGURE 4).

  Figure 4. Metaphor is an important aspect of interface design. A shopping cart icon, like this one from amazon.com, is a universally recognized symbol, which has been adapted to use in online commerce.

  

  
  

• Make sure that features related to function are clearly visible. This comes across in White Lily in terms of the link lists, all of which are concise in their purpose (FIGURE 5).

  Figure 5. The navigation links in White Lily.

  

  
  

• Make sure that design elements are consistent. If White Lily were used as the blueprint for a full Web site, the navigation would need to remain consistent, as should the location of the photograph and title logo. Changing the location of branding and functional elements can cause a lot of confusion for users, so it's best to avoid radical changes from page to page.

• Understand focus. There will always be some object in a design that captures the eye more than other objects. In White Lily the flower itself holds that focus. By recognizing the impact of the image, the designer can then approach other page elements in such a way as to balance the design accordingly.

• Provide clarity as to what the content on the page is about. Humans have a very short attention span; typically they won't wait more than 9 seconds at most to figure out what's going onif they don't get it in that time, you may lose their attention completely. Kristensen captures the viewer's attention by isolating the primary message into its own section within the layout (FIGURE 6).

  Figure 6. Placing the page's mission statement in its own area within the layout helps make the purpose of the page easy to understand.

  

  
  

Interface designers are also very interested in aesthetics as they relate to function. Notice the arrows within the link headers in White Lily. Each of them is the same size, and each serves to provide both an aesthetically pleasing and helpful orientation to the visitor (FIGURE 7).

Figure 7. The arrows used with primary headers in the link lists are both aesthetically pleasing and functional, leading the viewer's eye toward the content below.

Usability

While conceptually related to user interface design (and having similar historical roots), usability has a different focus. User interface design is naturally concerned with usersthe primary study involves how developers and engineers work to address user needs.

Note

A great resouce for user interface design and interactivity design is Boxes and Arrows (www.boxesandarrows.com).

The study of usability, however, places its focus on the final user experience and how the user works with a developed user interface. Both studies are integrated in the sense that usability concerns work their way into UI design techniques and processes, and that user interfaces are presented to users for testing and, ultimately, improvements and modifications.

As with UI design, the study of usability, which also emerged from other areas within computer technology, has been around for a long time. Web usability is a subset of usability, and comes with its own set of suggestions and guidelines.

Some usability concerns related to layout design:

• Important information should go "above the fold." Of course, in Web design "above the fold" is a relative concept, but the point is clear: Make sure that any piece of information a user needs is immediately available as high on the page as possible. In White Lily this is accomplished by ensuring that the "brand" and page title are immediately visible (FIGURE 8).

  Figure 8. The header, with important information about the page, is at the topmost portion of the screen.

  

  
  

• Always use a description within the title element:

   <title>css Zen Garden: The Beauty in CSS Design</title> 

  
  

  This places a title in the browser bar, which assists with orientation (FIGURE 9).

  Figure 9. A title in the title bar, while not specifically a part of layout, does help the user remain oriented within a site.

  

  
  

• Ensure that links and navigation systems are placed consistently within a layout as much as possible. Also, be sure to include links to the home page. Links to a copyright page, privacy policy, and contact information are always encouraged. In the case of the CSS Zen Garden, all designs are protected under a Creative Commons license, which is clearly identified within the text (FIGURE 10).

  Figure 10. Identifying copyright or licensing is an important piece of content that should be managed effectively within the layout.

  

  
  

• For most medium to large sites, search is highly recommended. Obviously, the CSS Zen Garden is a demonstration of design approaches rather than individual sites, but in real-world practice, users appreciate and use search regularly. That is, if it's located within the layout in an intuitive place. Typically, search boxes should appear in some logical location: Near navigation is a good idea. If you were to pretend that White Lily had a search feature, it could appear immediately above the link lists (FIGURE 11).

  Figure 11. If search were to be made available in this layout, it could potentially appear above the links within the navigation portion of the layout.

  

  
  

• Break up column sections with indents and offsets. This can be extremely helpful in achieving an overall look and feel as well as improving user comprehension (FIGURE 12).

  Figure 12. Interestingly, indenting or offsetting text within any column can assist with the comprehension of the feature. In this case, the primary link list makes use of offsets, breaking up the column and giving the overall layout a more open feel.

  

  
  

Note

In many layouts, footers are used to manage copyright, privacy, licensing, and related information. This is a common convention and useful when designing sites where this type of information is critical to the function of the organization or company.

Of course, there's a lot more to usability, but incorporating these techniques while working with your layout will help flesh out important details relating to function and form, and, ultimately, to the user's experience of your design.

Follow a Process

White Lily demonstrates how following a distinct process can result in many of a layout's needs being addressed. Of course, design process is different for individual designers and design teams, and your process will likely vary in some significant ways.

No matter what your process, it's clear that in this case, by first determining theme and then analyzing content, Jens Kristensen was able to follow a very clear-cut path to reach the end result: an attractive layout that users enjoy and understand.