Putting It All Together: a Case Design Project. Implementation | WebReference

Putting It All Together: a Case Design Project. Implementation


Agood designer must be as artistically talented as any "pure artist" who's never compromised his talent by working on something practical.  But in addition to that, a designer should possess a rather unusual combination of skills: effective project management, customer relations, proficiency in editing and proofreading, plus at least some understanding of the customer's business are all critical for success.  Nothing is more discouraging than a fashionable design hooked up to a text that was obviously never re-read by its author.  And yes, if your customer doesn't seem to care about the consistency or the language quality of the material, you should offer your help in this area too.

Getting back to the Quiotix project, my first task in the stage of implementation was creating a list of first and second headings (see Fig. 10) for all pages of the site.  Since this site was redesigned rather than created from scratch, I didn't need to work with the structure and distribution of information among pages; however, I still needed to adopt the two-heading design of Fig. 10 to the one-heading-per-page scheme of the original site.

Admittedly, it was only at this stage that I realized the contradiction between the functional role of the headings on Fig. 10 and their formatting.  When I made that draft, I just perceived the first heading as "major," "more important," and the second one, as "minor" or "explanatory."  Only when I compiled the complete list of headings for all pages could I see that many pages shared first headings, which thus served as a sort of "running heads" for collections of pages rather than "major headings" for separate pages.

In light of this, the first heading definitely looked visually overemphasized---it had to be made less prominent.  I reduced its size and moved it to the upper right corner of the strip (Fig. 11).  Also, by Brian's suggestion, I moved the navigation panel to the bottom bar, to allow for more "elbow space" for the second heading at the top.


Figure 11

  Fig. 11:  Making Form Follow Function  


One might claim that this is not enough because the first heading is still significantly larger than the second one---but the prominence isn't always a matter of size.  The position of the first heading being pushed against the top edge (rather than centered on the space allocated for it) already implies its subordinate role of a "running head"; this is further stressed by its being a less contrasting color and in lowercase, as compared to the all-caps second heading colored black.  An additional advantage is that the first title in its new position balances the logo title on the left which is pushed to the opposite (bottom) edge.

One more inconsistency that turned up at this stage was the name of one of the company's products, QEWS, which is an abbreviation and thus is always spelled with capital letters.  At the same time, QEWS had to be in the first heading (always lowercase) for a number of pages.  After some discussion, we decided to sacrifice, quoting Brian, "consistency in design for consistency in product image."  I made the "QEWS" title, although in uppercase, appear as similar as possible to the lowercase headings on other pages; as you can see on Fig. 12 (and on this sample page), the "W" and "S" are still lowercase, while "Q" and "E" are uppercase but reduced in size (and somehow thickened).


Figure 12

  Fig. 12:  QEWS and news, or On the relativity of upper/lower case  


The rest of the story is mundane.  I spent a couple more days mincing the top and bottom graphics into a number of separate GIFs, in the eternal struggle for a balance between graphic quality and download size (I was aiming for less than 15 Kb of graphic files per subpage, and I hit this mark with surprising exactness).  After the first HTML/GIF samples were approved, all I had to do is cut-and-paste headings from the list I had compiled into my drawing program (I use CorelXARA, by the way) and invent a method for naming resulting files (with two GIF headings on each page, I risked confusing things up without a consistent naming scheme).  When all was ready, I sent the entire package to Brian who uploaded it all to www.quiotix.com.


Created: Oct. 23, 1997
Revised: Oct. 23, 1997

URL: http://www.webreference.com/dlab/9710/implementation.html