Modular Web Design. On consistency

part of the principle of consistency, doubtlessly known to every web designer, is reusing graphics, a great method for bandwidth conservation.  Thus, you may think about the consistency principle as an analog of reusing, applicable not only to particular common graphics but to the entire style, graphic themes, colors, fonts, and other aspects of your design.  Although not always resulting in file size savings, consistency is one of the first things to take care of if you want to improve the quality of your work.

You may find it difficult to believe that by restricting yourself, by simply repeating what you already have, you can achieve better results than by running wild and "being creative."  But that's how it is.  99% of any project's time is spent not inventing something new, but punctiliously polishing, balancing, and positioning what has been found in the first 1% of the time.

Beginners tend to think of design as of the art of decorating things.  They take their content and start to chew upon it, figuring out different ways to spice up navigation buttons, headings, images, text blocks, etc.  What I would like to stress here is that when you introduce a new element into your composition, your job as a designer is not that of decorating it, i.e. making it more complex, but on the opposite, that of making it simpler, cutting out everything which is not essential, coordinating, aligning or even merging it with what is already present on the page.

I'm not denying the fact that some professional compositions are extremely complex and variegated.  But you can only move on to complexity when you're able to perceive---and create---the beauty of simplicity and similarity.  Even if you're not artistically minded at all, you can produce surprisingly neat pages just by pedantically, methodically applying the consistency principle and minimizing the diversity of all design features.  This may come against your aesthetic notions or even your "common sense," but unless you're absolutely sure about your taste, just let consistency be your guide.

The good news is that you can't make your page worse by enforcing consistency (although you can make it less fancy and less involving---provided that it was involving in the first place).  It's important to note, however, that while consistency encourages repeating elements or their properties, it's not a good idea to use almost the same elements differing only slightly---minor (but visible) differences tend to annoy the viewer.  Once you break exact equality between elements, you have to go the rest of the way and make them contrasting or, at least, obviously dissimilar.

Let's briefly discuss, with references to other Design Lab articles, how consistency works with all major design aspects.

• Shapes.  Unless you're sure about what you're doing, do not use complex forms or many different forms.  Stick with a simple form (best of all, rectangles that you won't be able to avoid anyway) and try to inscribe all your pieces into it.  Do not use "almost the same" shapes: If, for example, one of your rectangles has rounded corners, you'd better use exactly the same shape for all other rectangles on the page (or site).

• Proportions.  As I wrote elsewhere, simple size relations such as "exactly the same size" or "twice as big" are the best.  Actually, once two elements are sufficiently different in size, their exact proportion becomes less important; but avoid pairs of elements that are close in size yet not equal.

• Layout.  Here, consistency means alignment, i.e. sharing (and therefore reducing the number of) the horizontal or vertical lines that your elements snap to.  Don't be afraid to "over-align."  Never be approximate in alignment: Human eye is very apt at applying an "imaginary ruler," and minor misalignments are very annoying.

• Fonts.  The best recipe is 2 fonts per page, usually one used for headings and one for body text.  As these two fonts are not the same, they should be different enough, or ideally, contrasting---which means that a serif (e.g. Times) and a sans serif (e.g. Helvetica) are a good match.

• Colors.  Not counting black and white (which are special in many ways), restrict yourself to one color for simple pages or two colors for more complex designs.  In the latter case, use either two distinctly different shades of the same hue (varying brightness and/or saturation) or two colors with contrasting hues.

• Textures.  Do not use more than one texture besides the flat color.  One of the best combinations is flat color accompanied by a photographic texture.