Fig. 9:  A pile of books as a balance for the bookshelf

Now let's see how these modules are put to work in the design of the site's front page---more precisely, the front page's main content area beneath the banner and to the right of the blue sidebar.  The first element we encounter in that area is a small photo of a book pile placed over a (of course!) blue-to-white gradient (Fig. 9).  This photo is positioned like a drop capital in the beginning of a paragraph, thus setting a "beginning mood" for the site's first page. In fact, I considered using a drop capital letter in this position, but found that an image works better.  One of the reasons is that it matches and therefore balances the bookshelf image at the top (which is "extended" on the first page, as we discussed earlier, and thus needs a coping-stone at the bottom).  Besides, note that the first paragraph of text (it briefly tells what sort of a site is this, and how to navigate it) is indented in both margins to accentuate it---here again, empty space is a powerful tool in a crowded layout.  (Although, these margins can't be so wide as to clearly indicate centered position, because centering is a no-no in this asymmetric design.)

Below the search form and the list of latest news, there starts a two-column newspaper-style list of sections featuring "Book of the Day," "Free Stuff," "Subscription," "Surveys," etc.  Each section needs a heading, so it was time to create a consistent, site-wide heading design for use over the white background and in columns of different width (subpages do not use two-column layout, so headings there need to span the whole white area).

In accordance with the modular principle, I only reused elements that are already present on the page.  It was natural to use the Fiesta font, blue color, flushed to the right (as are headings on the blue sidebar).  To balance the right side of the heading line and to make the heading more prominent on the page, I took a horizontal blue-to-white gradient and placed a small copy of the logo visual on it (Fig. 10). This is in line with the accentuating function characteristic for the orange color in this composition.  See how the orange disk feels at home over a blue-to-white boundary---despite its opposite direction, as compared to the analogous boundary beneath the top logo.  The boundary itself looks like a good mark at which the left side of the text block below the heading can be aligned.

Fig. 10:  The design for headings on a page is rather complex, with its parts united by their own balance and contrast relations

To span the left and right parts of a heading, I used a blue horizontal line---a theme introduced in the navigation panel at the top (where such lines, too, are used as over- or under-lining for labels set in Fiesta).  To save bandwidth, the left part of all headings (both the narrow two-column ones and the wide ones spanning the entire page, as used on subpages) is reused from the same GIF file, so the changing part is restricted to the text itself and the horizontal rule of the necessary length. You may wonder why the right end of the horizontal rule in headings is not aligned at the page's right edge (although not marked in any way, this edge is unambiguously set by the clear-cut right side of the banner and the top navigation bar). This is especially true for wide one-column headings such as the one on this subpage.  To explain this, I need to show you how I implemented another frequently used site-wide element---a neutral separator for page sections, the element for which HTML offers the HR tag. I have already complained about the nasty "bevelled" default HRs as implemented by visual browsers.  I'm very much embarrassed by the (surprisingly numerous!) sites where an eye-pleasing, professional imagery at the very top of page gradually droops into ugly HRs, big font sizes, and other amateurish artefacts at the page bottom (www.cdf.org is a typical example). To avoid this common pitfall, I was planning from the very beginning to create a graphic replacement for an HR which, due to the complexity of the content, was in high demand on the books.ru pages.  (By the way, another reason to prefer an image separator over an HR is accessibility: An IMG can be given its own alt text, while an HR cannot.)  Consistency dictates that for this role, I take something already used on the page---the most logical choice being a blue horizontal rule of the sort used in the headings and the top navigation bar. On the other hand, an important part of the "blue rule" design module is its neighboring with text (more precisely, with a blue Fiesta heading).  If I use such a rule on its own, surrounded by relatively big vertical skips necessary for an HR surrogate, it would appear broken, lost, out of its place.

Fig. 11:  My graphic version of the HR element

After some attempts, I found a much better solution for the HR problem.  The slanted blue gradient strip, looking like a shadow of a book page lifted a bit, is used on each page of the site in at least two places: to separate the top banner from the rest of the page, and to set off the bottom signature block.  Also, on the front page it is inserted in place of the ad banner if no banner is available (the two "bookshelves" cannot be merged together because their books do not match).  The shape of this element seems to well balance the heavy left sidebar and to additionally emphasize the vertical right edge of the page. Getting back to heading design, if I align the headings at the same vertical edge on the right, they begin to interact with the graphic HRs in a too violent manner.  Like the equal-sized white and black squares in my study of contrast, they, if aligned, would have too many features in common, resulting in a harsh contrast.  I had, therefore, to retract the heading a bit to the left, to make obvious its different nature.  This doesn't lead to a consistency breach, because these two elements still have some features in common (blue color, gradient).  Also, as the left end of the headings doesn't stretch to the very left (the small logo sitting there prevents this), I obviously cannot align the right edge as well, for fear of a serious clash---unlike the graphic HR, the heading is balanced and therefore doesn't permit any obvious asymmetry.