Putting It All Together: a Case Design Project. Subpages

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.

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.

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.