Modular Web Design. Page layout | WebReference

Modular Web Design. Page layout

  Page layout

After creating the logo, the next task was to develop a site-wide page layout and create design elements shared by all pages.  On this early stage, I indeed had to introduce new elements, choose colors and fonts, etc., simply because I didn't yet have anything on the page (except the logo) to borrow them from.  However, once appeared, the design particles tend to immediately cluster together to form modules, portable collections of related features, convenient for reusing.


  As for the layout proper, it was clear from the beginning that each page should have access to the same top level subject catalog of books and a number of links representing both topics and tools of this (rather large) site.  On most sites, this is achieved by introducing frames, but after some discussion we decided to give up the idea of using frames and employ a single tabular layout for the entire page, placing navigation links at the top of page and in the left sidebar.

One important reason for abandoning frames was accessibility: even if users with frames-incapable browsers could manage to get into the central frame with the main content, they would find it difficult to navigate the site without the access to the links in other frames.  Another reason was that the left (sidebar) frame's contents would have to be quite big and even varying in length, which would result in an ugly scrollbar crossing the page.


Fig. 4:  Layout elements common for all pages (navigation panels at the top and in the left sidebar)
Thus, the source of all pages on the site has a common preamble part to build the top and left navigation areas (Fig. 4).  This makes the HTML code sent from the server a bit bulky, but it has no consequences for maintainability because all pages on the site are generated by CGI scripts and changing that common part amounts to editing a single Perl file.  Reloading this HTML code over and over passes almost unnoticed by the user because all shared images are taken from the cache, while the HTML code swells by no more than a couple Kb per page.

The dark blue sidebar (created by a background image tiling only vertically) introduces the second main color of the entire design, the first being the orange in the logo (as always, I don't count black and white for "colors").  The two colors are violently contrasted, but since the blue is much less bright and saturated and, as a result, less prominent, the principle of balance requires it to be used more extensively and to occupy a much bigger space on the page than the orange.


  Also, to support the contrast of colors, the second main color is introduced along with the second main texture of the composition (the first being flat color)---the blue is accompanied by numerous gradients from blue to white (Fig. 5).  In the sidebar alone, gradients are used for the edge of the panel and for the white heading rectangles, and even in the logo, the color of the drop shadow behind the text was changed to blue.  Thus, we see how a particular color combined with a particular texture makes up a separate module, one of the building blocks of the design.  Decomposing this module by using, for example, a orange-to-white gradient would be a violation of the modular principle and should be avoided.

An integral part of the "orange module," on the other hand, is its predominant small size, used to pinpoint objects of a particular importance (such as the logo).  It is logical, then, to use the orange color for small pieces of text bearing a particular importance---that is, for links.  As I pointed out elsewhere, bright colors require darkening to be visible in small objects such as body text letters, that is why the BODY tag on all pages states links="#CD5200" while the original orange of the logo is #FF6600.  (By the way, bgcolor is set to a shade of gray, not white, so that both the black text of the page body and the white links over the blue sidebar could be seen with image loading turned off---an often overlooked accessibility consideration.)

Fig. 5:  Blue-to-white gradients, directed mostly right-to-left, are one of the main graphic themes of the site

Fig. 6:  The meeting of the logo's orange and the sidebar's blue becomes the most important joint in the composition
The logo which transcends the edge of the sidebar is a natural culmination of the whole page.  Here the blue and orange are in the closest contact and interaction, and the blue-white edge goes not only through the center of the orange disk but through the visual center of the entire logo image (Fig. 6).  To make this important joint more prominent, I cleared some free space around it---which indeed makes for a strong accentuation method in a layout so packed with information as this one.

On the top panel, I used a bookshelf photo, gradually diluted towards the left (not unlike that on the Quiotix site---yes, artists do have their favorite themes and touches).  This book-related illustration was chosen among many others, in part because of its regular pattern of book backs (disturbed only, as a kind of a nuance, by the two last books on the right), and in part because of its color spectrum dominated by a warm color similar to the logo's orange.  It may be argued if this image adds a texture of its own to the page, or it may be paralleled to the blue gradients; one way or another, its heavy right side makes a perfect contrasting balance for the blue sidebar on the left.


  For headings on the page, I used two different fonts (besides one default font for the body text)---a violation of my own recipe, which could be justified by the relative complexity of the design.  The Optima font of the logo is used very sparingly around the page, while most caps-only headings are set in Fiesta, a slanted sans serif font which is different enough from both other fonts to make a good match for them.  Quite naturally, different fonts belong to the different-colored design modules: Fiesta headings are always blue and often accompanied by blue gradients (Fig. 7), Optima is in grayscale, and the body text font only uses black, white (when on blue) and orange (for links).

Fig. 7:  A All-caps Fiesta headings are normally accompanied by blue gradients

  The menu-like links at the very top of the "bookshelf" represent the major sections of the site, and the one showing your current position is dimmed.  This is the only place where Fiesta labels are given a slight drop shadow (also blue), to make them more visible over the photo background as well as to support the drop shadow in the nearby logo.  Also, this element introduces another sub-module of the blue variety---the thick horizontal lines always neighboring a blue Fiesta heading (more on these lines in the next section).  

Fig. 8A sandwich of a banner
The last constently positioned site-wide element is the 468x60 ad banner positioned below the "bookshelf" and the logo.  In fact, its size was the single constant factor determining the entire page layout---from the first drafts, one of my goals was to integrate the banner into the page so that it would be prominent enough to generate click-throughs yet not clashing with the rest of the design (at least in the layout aspect, since of course I cannot control banners' colors and content).

It turned out, however, that it is not sufficient to align the top panel with the banner.  On the front page, where the newcomer is not yet accustomed to the site's look-and-feel, I found it necessary to support the navigation area by adding a similar, although thinner, "bookshelf" strip beneath the banner, carrying the title of the current major section. Being a continuation of the image at the top, it helps to reveal the alien nature of the banner and protect the site interface from the "ad intrusion" (Fig. 8).  On subpages, where you're supposed to be already accustomed to seeing a banner in the same position, this top bar extension is not used.


Created: Jan. 21, 1998
Revised: Jan. 22, 1998