KCL • CCH • Minor programme • AV1000 • Electronic communications and publishing

AV1000
Fundamentals of the digital humanities
Design on the Web

1. Design imperative
2. Audience & purpose
3. The medium
4. Consequences
5. Graphics
6. Navigation

I. The design imperative

• When you make a Web page, you necessarily become the designer of it. Within the limits of the medium, everything becomes your responsibility.
• Although something mysterious called “talent” seems to be required to be a great designer, with care and intelligence anyone can be competent.
• Adequate resources exist to teach you the basics of good design, though opinions vary about the details; see the course Bibliography. The Course Web pages represent the lecturer's ideas about simple effective design.
• Until your instincts are trained, it's best not to copy designs that you admire, but you can learn immediately from bad designs. See Flanders in the Bibliography.

II. Audience and purpose

Before touching a keyboard, ask yourself these questions:

1. For whom is this page? Who is your audience (friends? family? fellow students? potential employers?), what do they know and need to discover, why should they care?
2. For what purpose or to what end? To represent you personally or professionally? Communicate your ideas and your work? Stay in touch with distant friends and relations?

Best is if you have the answers before you start, but at least have the questions firmly in mind as you are designing the pages.

III. Nature of the medium

The Web is not a freer or more liberating medium than print, rather its constraints are different, hence the possibilities these offer are different. (“Within the limits of my craft I have perfect freedom.”) You should begin Web design with a clear idea of what these constraints are.

• Unboundedness. Web pages are essentially unbound entities, in contrast to the pages of a printed book. They can therefore be accessed (e.g. via the dynamic index of a Web crawler) as totally independent entities, completely out of the intended context.
• Graphic fluidity. Although you have some control over the layout and other design features of a page, its final appearance is significantly dependent on browser settings and characteristics of the computer on which the page is viewed. Thus the size of the image, its proportion, the display font(s), precise colour and image resolution will all vary.
• Technical variation. Differences in the type and version of the browser used for display of your page may render certain effects other than expected or not at all; this is especially true of the more recently implemented effects.
• Reading/viewing dynamics. The small viewing area (a.k.a. “real estate”) and the mechanism of scrolling mean that the reader can have only a relatively small amount of long pages in view at any one time, has no immediate means of telling the extent of the page and must do significant mechanical work to familiarise him- or herself with the contents.
• Mutability. Assume that all pages are “under construction” or they are likely to be moribund. What your reader saw yesterday, or five minutes ago, may not be what he or she sees now, and such sudden changes can lead to disorientation.
• Twitchiness. The hypertextual medium invites or encourages the reader to move on, perhaps to a radically different page, in a manner and to a degree very different from the printed book. There is good reason to think that the flickering screen leads to a shortening of attention span.
• Unpredictable use. Text and images on Web pages can be captured exactly and reproduced anywhere for any purpose without your knowledge or permission. The information on Web pages is thus subject to a significantly higher level of unpredictable use, perhaps abuse, than the print medium. You have no control whatever of the company that your Web-pages keep.
• Personal authority. Ease of publication by individuals means that the contents of a page is far less likely than in print to give the impression of (objective) information; reliance tends to be much more on the personal authority of the author.

IV. Consequences for design

The above considerations have definite consequences for the design of pages, as follows:

• Unboundedness → explicit contextualisation and navigational devices.
• Graphic fluidity → simplicity, reliance on a medium level of technical sophistication.
• Technical variation → as above, also in critical situations, thorough testing on a variety of machines.
• Reading/viewing dynamics → logical segmentation of pages, navigational devices and explicit indicators of page-structure.
• Mutability → clear indication of revision date and, where appropriate, marking of new items.
• Twitchiness → judicious use of hypertextual links and close attention to audience and reading dynamics.
• Unpredictable use → care in what you put online; concealment of sensitive information; judgement on when and what to publish.
• Personal authority → conscious effort to establish your credibility, bona fides &c., based on good knowledge of audience.

V. Graphics of design

Graphics is in this context communication by visual means. Wherever you can adequately tell the reader what he or she needs to know without use of words the better—with one very important exception.

• Layout. This term refers to the arrangement of typographical and graphical objects on the page. There are two principal kinds:
  • Symmetrical → formality, e.g. a wedding invitation or advert for something expensive; its implicit stillness → quiet dignity at best, dulness at worst. Usually to be avoided but can be applied sparingly, as on this page, to attract attention by contrast.
  • Asymmetrical → informality. The prevalent style. The ideal here is asymmetric balance, suggesting movement from one object to the next. Imagine a suspended mobile, with various bits balancing each other. Layout, especially of images in relation to text, can be controlled best by use of the TABLE element.
• Typography. Here you have very little control except over relative size (see HTML headers and the font command) and the distinction between proportional and non-proportional type (e.g. by use of the TT element). Non-proportional type is very usefully applied to any computer output you include in a document as such, to suggest its origins.
• Headers and subheaders. These break up the page visually and so suggest its structure even before the reader has interpreted them.
• Links. Always avoid saying “click here”. Place the link behind the relevant words OR use some symbol, such as [X]. Consider distinguishing links graphically wherever possible to connote destinations:
  • Within the current page (note the use of round brackets above); these are most commonly and effectively used in a table of contents, as above.
  • To another page within your site (note the use of square brackets at the very top and bottom of this page);
  • To another page in another site.
• Images. Images relevant to the subject or simply decorative can be quite effective; too many of them can also defeat the communicative purpose. Placement of them provides a good means of achieving asymmetric balance.
• Rules. In typographic terms, a “rule” is a line across the page, as above and below, in HTML achieved by means of the HR (“horizontal rule”) element.
• Backgrounds. Mostly to be avoided on pages intended to be read. If you use a background image, make sure it does not distract attention. The same applies to background colours.
• Blinking and animations. Unless very subtle, avoid these at all costs.

VI. Navigation

• Navigation: what the reader does to understand the context of the given page and its internal structure.
• Navigational devices: everything you supply to help the reader orient him- or herself; these include links, tables of contents, elements of layout used to indicate structure. These contextualise the page and each logical element within it.
• Remember, if your reader feels “lost in hyperspace” when visiting your page, you will have lost his or her attention. The impression of getting lost can be almost immediate.

revised October 2007