Modular Web Design. Page layout

fter 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.

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.

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.

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.)

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.

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.