Modular Web Design. On and on

aving completed the front page of the site, I entered a stage where "modular design" becomes a more conventional concept---just reusing the ready-made markup blocks for the content of other pages.  The modular structure of the design was almost stable, which means that I didn't need any more to try new combinations of existing features or, God forbid, introduce new ones.  (And, as is always the case, finalizing the project was not a good time for trying anything new because of the looming deadlines.)  However, there were a couple of places along the way which posed interesting challenges.

But first, I'd like to call your attention to how the blue HR-like gradient separator positioned below the banner and the heading just below that separator, with their quite different styles, look nice together---exactly when they're so close to each other (e.g. on this page).  This suggests that my decision to make them different length was not incorrect.

Thanks to its numerous gradients, the blue is the only color in this composition that allows deriving a light enough shade for this purpose.  But the background color in tables is not only brighter than the blue of the page's sidebar, it is also much less saturated.  Remember what I once wrote about bright colors favoring low saturation level?  Here, this fact can be explained from another point of view: As the light color is a blend of the original dark color and white, it has to be less saturated than the former because white has zero level of saturation.  (Refer to this article to better understand saturation and other color parameters.)

The small, 22x11 pixel "New" and "Bestsellers" (with moving stars) orange icons on the sidebar were also used in the book tables to mark newly arrived or best-selling books.  Using the same small size and orange color (remember, these are the two parts of a module, not to be used separately), I created similar markers for discounted books and buttons with arrows for browsing long, multi-page lists of books (such as this one).  Note that the icon with the stars is the only animated graphics on the entire site---you only can use something for accentuation when it is used very sparingly.

It was equally natural to use the color that I found for table rows in other places where parts of text require accentuation, but no heading or separator blocks are possible.  Most often, light blue screens are used in input forms (such as this subscription form), where they routinely mark text lines separating groups of controls, as well as the last line with the Submit button (which is always right-aligned).

. . . And on and on.  I hope that by now, you've got some idea of how the theory of consistency translates into the practice of modular web design.  If your modules are well designed to start with, your work is likely to become much easier towards the end---it's really a pleasure to see your mature, tested, polished design modules readily jumping in to satisfy every demand of your site's content.  On the other hand, badly chosen materials may quickly turn your work into a nighmare.

Now I see that, unlike the Quiotix article, this one shows more of the site's final state than of the way that led to it.  The reason is obvious: My goal was to show you the consistency principle at work, and most of the initial drafts were thrown away exactly because they offended that principle.  I hope that this account will help you get---"the easy way"---at least some of the experience that I have acquired "the hard way" from working on this project.