Designing a Designer's Site. A bouquet of greens | WebReference

Designing a Designer's Site. A bouquet of greens

 
  A bouquet of greens
 
 

The next task I faced was coloring the logo, fully realizing that any colors I choose will become the foundation of the entire site's color scheme.  Here, my priorities were finding strong vibrant colors that would arrest viewer's eye immediately, but at the same time would avoid the slightest air of clash, disharmony, or motleyness.

Those who have read my essay on colors would understand my choice of green tones, equally removed from both energizing reds and calming blues.  The most ubiquitous color in the nature, green is not about alert, or tranquility, or any other extrinsic concept; it is mostly about color as such.  Quoting my article, "Dark and saturated greens, maybe a bit on the yellow side, express the thrill of deep, intense, earnest color without the least sign of pallor or dimness."

  


                                                           
In the zone of highly saturated colors, far from the sensitive area of soft grayish tints where even slight deviations matter, I could select the colors in a relatively "rough," approximate fashion.  Therefore I tried to find the colors I needed among those of the safe palette (I would say that sticking to it is not the first priority in modern Web design, but if it can be done without compromising creative considerations, it should be done).  After much contemplation, I selected a pair of bright yellowish green (#99cc33) for "k" and a dark sober green (#003300) for "d."  

  These two colors are different in hue.  In dark colors, the hue component is relatively less obvious to the eye, and I therefore chose a more straightforwardly green tint (in HSV, the dark color has H=120, which is exactly in the middle of the green area of the color wheel).  Conversely, the bright color could use a less hackneyed hue, for which I selected a color in between green and yellow (H=80).  It is also interesting to note that the dark green has the highest level of saturation (S=255), while the bright green, although seemingly replete with its hue, is in fact only partly saturated (S=191).

                                                                                 

  One of the colors being so dark, it naturally required a dark background behind it to be adequately perceived; over a white plate, the dark green "d" would become simply black (you can easily see this in the previous section's figure).  It was natural to use the same dark green color for the entire page's background except for an area under the "d" where the bright green of the "k" could be used instead.  Such a layout would help the dark color to present itself strongly and persuasively and form a solid contrast to the more intense but occupying a lesser space bright green.

The idea was nice, but what about the conflict between the line separating the letters in the logo (this line is the base of the prominent "slant motive" in the graphic) and a border of the dark and bright background areas?  Naturally, that border would have to occupy the same space if we want both letters to be visible over correspondingly contrasting backgrounds. I found that a slanted gradient strip can beautifully complement the crisp parallel outlines of the letters' stems, yet without making the background color transition too prominent.  As almost any feature introduced at this early stage of the project, this gradient turned out to be important because I later reused the gradual transition theme on other pages.  (Those who have read my article on textures may remember that gradients represent a texture class of their own akin to that of photographic images.)

Thus, the splash page is limited to two colors overall (not counting the black of the company name), which is of course the absolute minimum for any page.  However, since the idea of using white was at that moment already abandoned, for other pages I had to expand my color repertoire.  A new color, if used as a page background for the rest of the site, was to be more neutral and less saturated than the first two colors.  It wasn't easy to find a color that, while still belonging to green-yellow part of the spectrum, would create an expressive contrast to both dark and bright green colors, which in their turn are engaged in a strong mutual contrast relationship.

  


                                                                         
Although I felt a temptation to search for a non-obvious grayish tint, I finally made my choice in favor of another safe palette entry.  The olive color (#666633), forming the background of all pages starting from main.html, represents a further shift into the yellow zone (H=60) and a further decrease in saturation (S=128).  In the role of a "third main color" besides olive and black, e.g. for the horizontal strip below the company name at the page top, the page uses a lighter and less saturated olive shade (#979774).  As for the logo's dark and bright greens, their function is limited on most pages; they usually serve as accents at some key points, such as its topmost banner, "signature" logo at the bottom, and linear navigation links at bottom right on portfolio pages such as this one.

                                                                         

  I must admit that the site's color scheme generated a range of quite different comments.  While the majority of respondents acclaimed the accord of green colors, some called it too dark and even drab.  Indeed I love subtle combinations of sombre colors, and in this case I may have gone too far in nearly monochromizing the entire site.  (Even the thumbnails on portfolio pages are green unless mouseover'ed.)  I do hope, however, that my exercise can be useful at least as an inspiring counterexample for the generally very motley and disbalanced Web design of nowadays.  

Created: Oct. 13, 1998
Revised: Oct. 14, 1998

URL: https://www.webreference.com/dlab/9810/colors.html