|
|
 |
| |
 uiotix' site is by no means large; very few of
its pages don't follow the simplest possible scheme of one heading
and several paragraphs of text. Thus, I only had to create a
generic heading design that would be suitable for all the headings
of this particular site (taking into account their parameters, such
as length and the use of capital/lowercase letters) and, at the same
time, would build on the front page's
layout. This was a slightly different task---creating not a
fixed design, but a design template applicable to many pages.
The first idea was inspired by the fact that all of the subpages
fall into one of the subsections corresponding to the buttons on the
front page's navigation panel. I attempted to graphically show this
correspondence by means of a flowchart-like callout, as shown on
Fig. 9.
|
|
| |
Fig. 9: A subpage's machinery as an add-on to the front page |
|
| |
However, this idea wasn't too practical because the fact
that the current page belongs to one of the six major subsections is
not always relevant on this site. In the "Products" section, there
are relatively big subtrees of documents describing various products
of the company such as QEWS (Quiotix Embedded WebServer), the family
of Appletalk products, etc. For these pages, it is more convenient
to show which particular product, not which of the major
subsections, they belong to. Also, the flowchart (although nice by
itself) looked pretty much alien to the existing elements, and the
logo/strip composition, being unchanged from the front page, was too
large for a subpage.
Thus, I decided to move the heading to the strip itself (the vacant
space of clouds, however attractive on the front page, may seem an
unacceptable waste of room on an information-cramped subpage) and
not link it to a navigation button. Instead, I decided to put up
two headings for each page, one specifying the section that
the page belongs to (similar to a running head in a book), and the
other one being specific to each page.
It was clear that the two headings should be formatted differently,
in part because of the different roles they played and in part
because I needed to maintain the existing asymmetry around the
panel's horizontal axis. I could place one of the headings over the
strip and the other one below it, but the navigation buttons were
getting in my way! After some tweaking, I moved the navigation
buttons off the bar (this change affected the front page as well)
and placed both headings over the strip as shown on Fig. 10.
|
|
| |
Fig. 10: A sandwich layout of a subpage's title elements |
|
| |
It required quite a number of measures to balance these two headings
and to find a proper level of contrast between them. Of the common
uniting traits, it was enough to set the two headings in the same
Optima font and make them share the same sky image as a background.
Contrasting features are more numerous: size, color, letter spacing,
use of lowercase and uppercase letters and drop shadows are all
directly opposite in the two headings. The top background section
melts into white bar, while the bottom section dilutes into the gray
background of the page. As I explained before, the wider
the range of contrasting features, the more stable (surprisingly!)
the resulting composition.
Let me point out a couple of minor details before we move on. If you
compare the company title in the logo on Fig. 10 and
Fig. 4, you might notice that in the
final design, letters are spaced out more sparsely. This is
necessary because otherwise, the title in so small a size as on
Fig. 10 would look all cramped up and hardly readable.
Another issue I'd like to call your attention to is the direction of
shadows. As a minimum, all drop shadows on your page, and ideally
even within a site or other design unit, should have one common
direction. This may seem obvious, but it is surprising how often
this simple rule is broken. One of the worst design samples I've
seen recently featured some text with a drop shadow placed over an
Earth image (which is already a badly abused cliche). Not only the
letters' shadow was absolutely flat and didn't cling to the
spherical shape of the globe, but the directions of the shadow and
the light presumably cast on the Earth's sphere were directly
opposite!
Speaking of shadows, it is also good when their direction is not
arbitrary but somehow justified by the layout. In our case, the
bright spotlight behind the logo is naturally regarded as a "light
source" on the page, so I used the south-eastward shadow direction
for all elements on the page. (Being truly realistic would mean
changing the shadow angle depending on the exact direction towards
the logo, but this would be too sophisticated and hardly necessary
for my case.)
Such was the state of the project when we finally decided to see our
design applied to the site's material. Naturally, there were still
more changes to be introduced at the implementation stage, and the
process of objectifying the drafts into browser-ready HTML wasn't
all that simple. The next two sections will tell you about some of
the difficulties encountered along the way.
|
|
  
|
|
