This report is also available as an Acrobat file.
Authoring and Design for the WWW
DESIGN INTO PRODUCTION
Web design for non-designers
What do designers do?
Design theory and design criticism are both huge subjects
beyond the scope of this handbook, but it is important to understand roughly
what designers do. We need to look at this in general terms, touching on the
fundamental principles of information design, and then how it might apply to
Are Web designers needed?
In the early days, the Web was conceived of as a simple
medium, dominated by text which was formatted automatically according to the
rules of HTML, and therefore had little need for designers. Indeed, there was
very little for them to do! Now however, there are far more possibilities, both in
terms of the look of a Web page, and its interactivity, and the skills of a
designer are more likely to be needed.
Design is not magic
Designers do not necessarily have any special gifts and
mainly work not by inspiration, but on the basis of their training and experience.
It is perhaps fair to say that many designers do not think what they are doing'
in the sense that they have a theory of design which tells them what to do.
Designers make many decisions intuitively based on their training and their
observation of the work of others. Nevertheless, there are some core principles
which inform what the designer does, even unconsciously.
Clarify, amplify, modify
A minimal role for the information designer is to clarify
what the author intends through the use of layout and typography choosing the
size and weight of fonts, as well as which fonts to use, and positioning the
elements within the available space.
By making headlines and subheads of different sizes,
the designer clarifies which items are most prominent, or identifies items as
equally important by giving them headlines of equal weight. By this means,
the hierarchies inherent in the text are represented graphically to the user.
Parts of a text are parenthetical to the main
argument, and so are moved into separate items' on the page. This is very
common in magazines, where it is assumed that readers will not want to read
hundreds of words of undifferentiated text, so certain items are boxed off
from the main body.
On a Web page, much of the visual presentation of
hierarchies is taken care of by the rules of HTML. If a paragraph is given the
status of being tagged <H1>, it will be the boldest thing on the page, whereas
<H2> will be less prominent and so on. In addition, paragraphs of equal
prominence can be given identifying bullet-points automatically, simply by
identifying them as items of an 'unordered list'.
Placing parenthetical texts in separate graphical
areas of the page, is exactly the sort of thing which HTML has traditionally
been poor at. It has not even supported columns, where one column might be
used for the main text and another for parenthetic text. Nor has it allowed the
placing of graphical boxes around text, or the use of identifying blocks of tint
or colour behind the text.
In addition to simply making clear to the user those things
which are evidently in the text, the designer may also choose to amplify the
messages in the original.
A recent fad in the advertising industry has been to
pick out key words in a paragraph of copy, and present those words in
different fonts, styles, sizes or colours. These words seem to jump off the
page, calling disproportionate attention to themselves from the reader.
While the designer cannot currently choose different
fonts in HTML, it is possible to alter the emphasis (and even the size of words
in most browsers). Of course, HTML also has a very prominent built-in
emphasis of its own, which it uses for an anchor, clickable hot-text which
leads to a hypertext link. Many designers would like to modify the stridency of
this highlight, and changes to HTML have allowed the author/designer to
dictate what colour and other indication is used for these anchors.
We have discussed clarifying and amplifying the messages
of the content. If designers are servants of the author, we may question whether
they have any business modifying the content, not by copy-editing it, but
changing its flavour' through design? In many ways designers do this all the
Designers can make a text look friendly or
intimidating, informal or academic, traditional or modern, by choosing
particular typefaces and styles of layout. It is not necessary for readers to
recognise a typeface to be influenced by it. It might be argued that
information should be pure', unaffected by typographical and layout
choices, but this is impossible to achieve. Even completely unformatted
typescript makes an unavoidable visual statement about itself before the user
begins to read.
Within HTML, no choice of typefaces has been
possible. For an internal Web service, an intranet, there is some possibility of
setting users' font 'preferences' for them in a settings file, but even this is not
proof against the user subsequently making their own choices. The desire to
have more control over all aspects of the appearance of the page is one of the
factors driving towards solutions like that of Adobe Acrobat (p104).
The designer may mould the author's thought by
providing some sort of template, however informal. So for example, if the author
writes a description of a course according to some pro-forma or style guide,
clearly the design will alter the sorts of things which can be said. The designer
may want to constrain the amount written to fit comfortably within a single
screen which does not require the user to scroll the window in order to see all
With an increasingly modular approach, and
perhaps also with a greater regard for the information needs of the
customer' than previously, it is likely that templates will be created for many
sorts of HEI information. In technical terms, this may provide huge
advantages: rather than writing Web pages explicitly, if all module
descriptions are stored in a database of identically structured module
descriptions, than any enquiry about courses can simply trawl the database
and present the relevant information to the user in a page made in answer to
their specific query.
Good designers will always subjugate their own ego to the
intentions of the author.
Designing with a purpose
Web documents serve many purposes, but this often
includes the provision of substantive information. If there is information on a
web page it must be there for a reason information must have a motive behind
it. The motive tells the designer to present it: what features of the information to
emphasise and what to omit. Information must have an active role for the user:
perhaps to make the user aware of something they never knew about, perhaps to
answer a question already in the user's mind.
The motive may be:
- to provoke the user to take a new course of action
Example: a page shows how many graduates from a
course get jobs in their chosen field, and the user chooses to take that course
rather than another
- to alter something the user would otherwise have done
Example: by offering a See also...' element in a
course module description, an applicant is drawn away from a course to
which they are not suited
- to give information so that users may re-use it themselves
Example: you provide pointers to other people's
electronic documents which students can use for their research
Many information graphics in particular have no clear
rationale. Selecting, editing and designing information with a particular effect
on the user in mind is an aspect of user-centred design
Design and pleasure
Perhaps all pleasures in HE should arise from intellectual
satisfaction alone. However, if we see it as in any way our remit to motivate
students, then one of the potential attractors available to us is the appearance of
the many texts, both academic and institutional, which they use. Some academic
textbooks seem to revel in a frosty, staid look, which is perhaps seen as
appropriately serious. But any designer should be able to produce designs which
combine gravitas with friendliness and accessibility (see for example the Death
Resource case study, p75)
It is not the role of good designers to make a poorly
written text attractive. Nor should designers feel they need to add spurious
material to the core content. Edward Tufte (1983, 1990) illustrates some notable
examples of crass information design where the superfluous contributions of the
designer significantly detract from the content. His books should be required
reading for all information designers.
If one of the roles of design is to please the user, then
whom should it please and how? This is often overlooked on an assumption that
there are absolute standards of attractiveness.
Visual presentation must be appropriate to
- the user
Example: a page that feels right to a first year
undergraduate may not do so to a postdoctoral researcher.
- the use
Example: information may be presented in large blocks of
text if it is for extended reading and the user is likely to print it out to read under
better circumstances. If instead the user has immediate information needs, then
strictly itemised information with plenty of space around it will probably be
preferable. For this sort of use, visual cues can help the reader to find the
particular text of interest. These might be for example distinctive symbols
and/or colour codes.
As always, the Web raises interesting new problems
as well as solutions. If symbols are used as helpful identifiers for information,
then they must be available to all users, and not made impractical by a lack
of suitable browser software or speed of network.
A more subtle issue is raised by hypertext structures.
Suppose that we choose to colour-code all the pages within a certain group
(using HTML's background colour feature). Within that group we make
reference to another page. The user sees it as being within the context of the
current sub-section and is disorientated on finding that it does not in fact
conform to the coding scheme. The developer knows that this is because the
page is also cross-referenced from another subgroup! An inexperienced
hypertext designer, accustomed only to the less interlinked structure of paper
documents, may find themselves unable to handle these new design problems.
Virtual Environments Visualisation