Modular Web Design. The front page

fter the previous stage of the project, I not only had the page layout almost ready and the site-wide navigation system in place, but I also had decided on nearly every design feature (colors, textures, fonts, placement style) to be used on the rest of the pages.  Moreover, we saw that these features are naturally united into top-level associations that I call modules---making it impossible to use, say, a Fiesta heading painted black, a blue rectangle without blending it with white on one side, or a copy of the bookshelf image without a right-to-left transparency gradient.

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

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.

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.

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.