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