The Principle of Contrast in Web Design

It is quite common that every application in life has certain principles. Web designing as a discipline has too. Precisely related to this article is the principle of contrast in Web designing. This is pertinent to the science.  One of the important elements in this industry, however, is that web designing is so diverse that there are features, which work fine while there are those which do not blend. Experts speak about it scientifically as elements; some of them have a correlation whereas others are completely unrelated.

Precisely, here is where the principle of contrast becomes relevant to the science. It is not confined to one aspect of designing but several. They extend to contrast in color; contrast of size and contrast of alignment. These are the three major elements for which contrast can really be conflicting. Knowing how to skillfully adjust the conflict is the key to develop the expertise needed of a professional Web designer while applying the principle of contrasting.

Contrast in color

Experts who have researched the way colors interact with each other would often say that color must blend. However, blending could be contrasting as well. All web designs have a header, content area and footer. Subsequently, a color scheme is selected to display each section of the web page.

Just take a look at the two diagrams below. Examine the contrast between a light page background and heavy colored borders, which enclose both header and footer. This Church Media Group web site carries a mild contrast between dark and light blue.

Phil Renaud’s Portfolio is another classic example of color contrast. In this case, it is not limited to a border style, but extends towards the entire design. Note the gold writing in the center of the page and contrasting compatible left border. See how complete the contrast is with bold writing on the dark brown background. This is a powerful color interface that just blends in creating beauty.

Billy Tamplin gives another magnificent example of how significant color contrast can be in developing meaning to a web page. Here he depicts a dark black background highlighting it with yellow and shades of blued calligraphy.

Contrast in size

Of equal importance is the contrast of size to a web page layout. Items on a page can contrast in size to create a variety in style. Take a look at this ‘Taxis’ web design below. Some experts rely on contrast in size when they do not have the option of adding it with colors.

Examine how the Front Seat Diagram contrasts in size with Sponsor and Image of Today. Note again that size is not limited to graphic illustrations but can be extended to calligraphy. See how Taxi contrast in size with other inscriptions on the page. This same contrast principle is transferred throughout the other example cited here as well.

Contrast in Alignment

Alignment in web designing science is a huge undertaking. It sets the tone for  integrity of the web page. Three are three examples below of how this strategy is applied. Look at the way in which the calligraphy is aligned in the first example given by Legistyles.

Alternatively, Simon Collison and a List Apart give some more interesting ways in which this expertise can be applied. Take advantage of these examples. Use these guidelines when you are creating your next web site or web design. Best wishes!