7/31/2019 Desinging for the Screen
1/18
Digital Creativity2000, Vol. 11, No. 1, pp. 1733
1462-6268/00/1101-0017$15.00 Swets & Zeitlinger
The integration of theory andpractice in teaching designing
for the screenMary C Dyson and Chomoi Picho-Owiny
The University of Reading, UK
Abstract
Future typographic and graphic designers will need
to be able to design for a range of media, both tosecure their role and to provide the necessary de-sign expertise in technological environments. Thispaper proposes an approach to teaching which in-troduces theoretical issues within a practical designproject to encourage the development of generalconcepts that can be transferred to different tech-nologies. A specific project on designing for thescreen is described, which is taught as part of a BAdegree in Typography & Graphic Communication.In the context of this project, reasons for introduc-ing theory are proposed, examples of the nature of
the theory are given, and the methods used to in-troduce material are illustrated. A detailed accountof one students implementation of this project isused to demonstrate how theoretical issues canprovide direction in a design task. However, carefulconsideration needs to be given to how theory andpractice are integrated to encourage students to lookbeyond the short-term benefits of specific trainingto the development of more general knowledge.
Keywords: analytical method, interfaces, naviga-tion, screen design, teaching approach, theoreti-cal knowledge, typography
1. Introduction
1.1 Context
With the rapid increase in web sites over thepast few years, there has become an urgent
demand for typographic and graphic designers
who can work on screen. There is no shortage of
people who develop web sites, but the lack of
design input to these sites is apparent.
The response to this situation is neatly
summed up by Darrell Sano, user-interface
designer with Netscape. He draws a comparison
with the introduction of desktop publishing and
the proliferation of quick-start books.
The advertisements forgot to mention that
various skills are required to design thosebeautiful pages.
(Sano 1996 7)
Students of typographic and graphic
design are acquiring knowledge and learning
skills that enable them to produce not only
beautiful but also functional designs. Tradition-
ally the focus has been on designing for print.
Some of this teaching material will be applicable
to designing for screen, such as general princi-
ples (e.g. legibility, consistency of design) and
working methods (e.g. project management, the
need for familiarity with production con-
straints). However, other more specific knowl-edge will need to be acquired to meet the
demands of a qualitatively different medium.
A designer who has successfully moved
from book design to web design suggests that
this transition requires an adaptation of skills
(Niederst 1996 xi). Practising designers work in
this way, gradually acquiring appropriate skills
which can be finely tuned to meet the specific
demands of the moment.
7/31/2019 Desinging for the Screen
2/18
DigitalCreativity,Vol.11,No.1
Dyson & Picho-Owiny
1 8
If this approach could be adopted by
student designers, they may acquire skills that
satisfy the demands of many future employers.
Job advertisements for graphic designers or
related posts typically specify certain skills. Web
design could be taught by introducing HTML
or direct manipulation authoring tools, along-
side Quark,Illustratorand Photoshop to equip
students with the appropriate tools for the job.
However, from a pedagogical standpoint,
which assumes an academic rather than voca-
tional approach to education, this is unsatisfac-
tory. In practical terms, student designers are less
familiar with designing for print than experi-
enced designers. Hence, it will be more difficult
for them to adapt their skills. More fundamen-
tally, it is important to introduce students to
knowledge that relates specifically to the new
medium. Such theoretical knowledge should not
be tied to a particular technology, but should
instead provide a basis for a more general
understanding. Students are in the fortunate
position of having time to learn about theoreti-
cal concepts and put these into practice.
1.2 Plan of the paperThe next section describes a project on Design-
ing for the screen. This was offered as one of
four specialisations for third- and fourth-year
students as part of the practical unit of the BA
degree course in Typography & Graphic
Communication at the University of Reading.
Sections 3 to 5 introduce the project by describ-
ing three areas of theoretical knowledge that
were incorporated into the project. Each section
starts with reasons why the theory is relevant.This is followed by a brief outline of some of the
theoretical areas, to give examples of the nature
of the theory that was introduced. Finally, the
specific methods used to apply the theory within
the project are described. Sections 6 to 9 follow
with a detailed description of one implementa-
tion of the project. The last section, 10, com-
ments on this particular interpretation of the
project and describes possible modifications in
the light of student feedback. The objectives of
combining theory and practice are compared
with the different outcomes, depending on
students familiarity with HTML. Finally, the
manner in which we impart general knowledge
when educating future designers for new
challenges is discussed.
2 Outline of the project
2.1 Aims of the projectThe project was devised to explore issues that
need to be addressed when designing for the
screen. It was not intended as training in, for
example, How to design a web page, as such
specific knowledge is soon outdated. A major
aim of the project was to develop an under-
standing of general principles, enabling students
to design for a range of platforms.
2.2 TaskThe task was presented in an outline form, as
students were encouraged to write their own
specific brief. The general requirement was to
write or re-write an educational or informative
document for reading from screen, to consideralternative structures and presentations and
finally to implement the best solution or
solutions.
2.3 Plan of the teaching
The teaching that was specific to the project was
carried out through presentations (given by both
staff and students), group discussions, work-
shops and individual tutorials. However, some
of the theory that was of relevance to the project
was part of a lecture course in Electronic
Publishing. This link between lectures andprojects is typical of the course curriculum.
The project was split into two parts,
spanning two terms, to avoid too great a
concentration of a specialist activity in a single
term. The first four-week period1 focused on
theoretical approaches and planning and the
second either introduced students to HTML or
further developed their knowledge of it. Practi-
cal hands-on experience was deliberately delayed
to encourage a more considered design strategy.
7/31/2019 Desinging for the Screen
3/18
1 9
The integration of theory and practice
3 Description and analysis
3.1 Lack of existing categorisationOne of the problems in designing electronic
documents2 is the lack of a clear means of
describing and classifying the range of possibili-
ties. To date, the only genre that appears to have
been empirically identified is personal home
pages (Dillon and Gushrowski3). One means of
categorising web sites has been proposed by
Shneiderman (1997), using the originator,
number of pages, goals and success asdescriptors. This method does provide a means
of imposing some order on the abundance of
sites, but design features are not considered. In a
practical design project, such features are
critical.
By introducing methods of analysing
existing electronic documents, students are
provided with a means of organising their init ial
research. Identifying characteristics of the
documents can help in locating examples of
similar items which can then be used to generate
ideas or suggest models.
3.2 Analytic evaluation3.2.1 Metaphors
One approach to categorisation that is related to
global design features is to use the type of
metaphor as the common feature. The use of
metaphors is frequently encouraged in the
design of electronic documents, using familiarity
to aid interaction with unfamiliar objects.
However, there are difficulties with this
approach. Electronic documents do not neces-
sarily make use of a metaphor. Alternatively, a
number of metaphors may be simultaneously
employed, one for the general concept (e.g.
book) and a different one for interface objects
(e.g. video controls). Also, the metaphor may
not be identifiable.
3.2.2 Frameworks
Metaphors identify global aspects of electronic
documents, but do not specify details. A
framework can provide a focus and form the
basis for a detailed analysis. Developed in a
different context, one such framework identifies
and defines characteristics of multimedia, such
as the title, content, function, format, output
channels and visual and auditory modes (Dyson,
Andrews and Leontopoulou 1995).
Typographic and graphic features can be
added to this, such as: the choice of typeface,
type size; the use of space (globally, around
headings, interlinear, inter-word and inter-
character); the choice of colours and consistency
and appropriateness of use; the choice of
illustrations and the relationship between text
and illustrations; the use of symbols or icons,
where they are positioned and their function.
This list could be extended to include dynamic
media such as animation, video and sound.
This type of analysis is similar to analytic
evaluations within the discipline of human
computer interaction (HCI). The method can
therefore also be used to familiarise students
with aspects of usability testing.
3.3 Employing analytical methods
Surfing the web was proposed as a possiblemeans of identifying metaphors in use. A
general impression can be gained of the type of
documents that exist, examples of good and
poor designs, and source code can be found.
However, this technique almost encourages
unfocused viewing.
As a group, we examined a number of
CD-ROMs and web pages and discussed them
in fairly general terms. This initial step was
intended to facilitate subsequent individual
analyses. A number of issues were raised such as
differences between CD-ROMs and web pages,user friendliness, navigation and structure,
screen design, the use of audio and video,
consistency of design and user interactions.
Having identified which features may be
relevant to an analysis, students then needed to
decide how they could be described. For
example, descriptions could be quantitative or
qualitative, objective or subjective. Also,
students were alerted to the need to consider the
representativeness of the sample.
7/31/2019 Desinging for the Screen
4/18
DigitalCreativity,Vol.11,No.1
Dyson & Picho-Owiny
2 0
4 Navigation structures and devices
4.1 Identifying alternativesElectronic documents afford a flexibility in the
way in which the content can be organised. For
example, alternative organisations are possible
within the same document. Content can be
accessed by an alphabetic listing, through
analogy or metaphor, from general to specific, or
from most to least important (adapted from
Pfaffenberger 1997).
As these students were relatively inexpe-rienced in designing electronic documents, it
was felt to be important to identify alternative
structures, devices and their features at the
outset. Knowledge of the range of options, and
factors that may affect the choice of options,
should encourage an informed design decision
with an underlying rationale.
4.2 Characteristics of organisational structures
4.2.1 Navigation structures
Various structures for electronic documents can
be defined: linear, hierarchical, network/web. Inall these cases, the way in which the content is
divided into units, chunks or nodes needs to be
carefully considered. This will involve the type,
size and interrelationship of chunks (Begoray
1990; Barker 1993). It may be necessary to edit
text for display on screen, or even write specifi-
cally for the medium.
A purely linear structure resembles
printed documents (e.g. novels) and restricts
navigation to a single route through the mate-
rial. Such a structure fails to exploit the poten-
tial of hypertext, although this may be appropri-
ate in certain circumstances.
A hierarchical structure provides alterna-
tive navigation routes and Sano (1996) suggests
that this is a natural organisation as humans
tend to think in terms of hierarchy. In this
structure, information needs to be located at
appropriate levels.
A network structure allows for cross-
referencing and imposes less constraint on users
navigation. However, the amount of links that
are provided should be carefully considered, as
confusion and disorientation may otherwise
develop.
4.2.2 Factors affecting navigation structure
A well designed navigation structure reflects
the semantic structure, so that users can build
a coherent mental model of the system. In
addition to the specific content, other factors
that may influence the navigation structure are
the:
nature of material represented (e.g. cata-
logue, guided tour);
context of use (e.g. private/individual vs.
public);
type of user (e.g. age, experience);
function of the system (e.g. education,
entertainment).
4.2.3 Navigation devices
Given the organisational structure, naviga-
tional devices need to be employed which can
be functional (e.g. return to home page) orlink to content (Pfaffenberger 1997). Whilst
many browsers provide functional aids, there
is an argument for combining content and
function within the document. This will then
serve to reinforce the close relationship
between the semantic and navigational
structure.
4.3 Illustrating structureA short handout summarised the above issues
in the form of a checklist of what to consider
when designing an electronic document. It
was emphasised that they should be consid-
ered as a set of proposals. The material
included some explanation of the issues, brief
guidelines and examples, presented as pointers
towards considered design.
This was followed up by a demonstra-
tion of selected work of previous students,
which aimed to show examples of different
structures and uses of navigational devices.
Once again, it was felt important to have a
7/31/2019 Desinging for the Screen
5/18
2 1
The integration of theory and practice
direction in looking at this work. This was
established by the handout and discussion. The
examples focused on the size of information
units, the breadth and depth of the hierarchical
structures, in relation to their semantic content,
and navigation devices. One document was
chosen as an example of good design with a
simple hierarchical structure, small chunks of
information and various navigational devices.
Other examples showed (i) a rather confusing
network of interconnections,(ii) a better use of
interconnections with a clear path, (iii) advan-
tages of providing an overview.
5 Interface design
5.1 Identifying relevant sourcesA rich body of knowledge has been accumulated
on designing printed documents, from experi-
ence and research, but this does not yet exist for
electronic documents within the typographic
field. Nevertheless, some general principles may
be transferable from paper to screen. In addi-
tion, details of the characteristics of screen-basedmedia may be acquired through exploring the
theory and practice of user interface design.
Students designing in a new medium
need to make judgements as to what knowledge
they can transfer from the familiar print
medium, and when and where they must look
for different sources. Introductions to relevant
theories, practical guidelines, and research
findings from various disciplines can provide a
basis for such judgements.
5.2 Psychology, HCI and typography5.2.1 Gestalt psychology
A set of laws of perceptual organisation were
developed by Gestalt psychologists. Two that are
frequently applied to the arrangement of graphic
material are the laws of proximity and similarity.
These state that elements that are either located
near to each other or are similar in nature are
likely to be perceived as a group, i.e. related in
some way. Instances where such laws have been
disregarded can be used to illustrate poor layout
(Lansdale and Ormerod 1994).
5.2.2 HCI general guidelines
Some general principles can be identified, drawn
from both theory and practice. These draw
attention to the importance of:
identifying the knowledge and experience of
users;
consistency of design;
providing the user with flexibility; introducing redundancy and reinforcement;
avoiding interfering messages;
legibility.
5.2.3 Screen compared with print
At the level of graphic elements, paper design
guidelines are not entirely transferable to screen
(Hartley 1994). Small screen size, colour, the
prevalence of landscape format, and limited
resolution are some of the factors that may
influence legibility. Space or colour may be used
to communicate structure on screen, wheretypographic variants (e.g. italic or bold) may be
less perceptually salient.
Legibility research has tended to focus on
comparisons of reading from screen and paper,
and less is known about the effect of typo-
graphic variables on screen. However, research is
developing in this area and there are findings on
some of the conditions for optimal legibility on
screen (e.g. Dyson and Kipping 1998).
5.3 Considering design elements
The pragmatic approach used with navigationalstructures was adopted to identify design
elements that need to be considered in designing
screens. The checklist identified typographic
features and possible treatments, such as:
layout of the text (relationship between type
size, line length and interlinear space);
setting style (justified, unjustified);
paragraphs (indented, space after);
type choice (serif/sanserif, character set,
7/31/2019 Desinging for the Screen
6/18
7/31/2019 Desinging for the Screen
7/18
2 3
The integration of theory and practice
site sections. It could be argued that when there
are links at both the top and side, the top more
logically refers to the site sections and the left to
each sections pages. A place could be found for
the department links by having them as part of
the home page section. This rearrangement is
simpler because it removes the need for the third
level of navigation that presently exists.
In looking at the style of different sites, it
was apparent that features are treated differently
according to the nature of the content. With
Larabies informal content come striking colours(Figure 3), whereas restrained colours are used
to reflect Typographys more formal content.
The text on the page differs between, at one
extreme, many headings and no body text for
Larabie, to the other extreme of few headings
and a fair amount of body text for Typography.
In terms of visual metaphors, one might be
compared to a computer game menu and the
other, the page of a book.
Typographic detailing differs little from
the default settings. Adobe and Typography are
similar in that neither alters interlinear spacing
in the body text. However, Adobe and Larabie
alter interlinear spacing in headings. Typeface
specification is more varied. Two of the sites,
Adobe and Typography, retain the broad
distinction between sanserif and serif. In
contrast, Adobe specifies a particular sanserif
and Larabie specifies two or more distinctive
display faces. Type size is wide-ranging with
Adobe and Larabie, but limited with Typogra-
phy. With all of the sites, there is seldom
enough range between colours, sizes or typefaces
on a page to make a striking impression.
6.2 Applying the resultsSome of the points arising from this analysis
were fed into the design of the projects sites. In
terms of semantic groupings of items, a consist-
ent grammar of space is used, whereby smaller
amounts of space combine items in a group and
larger amounts distinguish one group from
another. The placing of items is worked outprimarily according to their hierarchical status.
Colour schemes are deployed to describe item
hierarchy and semantic groupings. Lastly
graphic devices such as rules are used to rein-
force groupings and hierarchy.
In terms of stylistic features, colours are
put together to make a strong impression on
users. The two extremes of page style
Larabies game menu and Typographys book
page are both explored. Typographic
detailing, such as interlinear space, typeface and
size are also varied.
7 Development of the project brief
7.1 User considerationsThe activities of a nationwide youth organisa-
tion were chosen as the content of the web site.
The main user group is young people between
the ages of nine and eighteen, all participants of
the projects and events of the youth organisa-
Figure 1.
One page of
Adobe Systems
Incorporated
website
selected for
analysis.
7/31/2019 Desinging for the Screen
8/18
DigitalCreativity,Vol.11,No.1
Dyson & Picho-Owiny
2 4
tion. Stylistically the genre needs to be strongly
youth oriented, so users will not get bored or
switch off.
It is estimated that about sixty percent ofusers would be the main participants in the
events, about thirty percent would be parents
and the leaders involved in planning events, and
the last ten percent would be newcomers. The
site contains information on the activities and
events of the organisation and has to cater for
casual use or detailed reference. The material
ranges from educational and anecdotal informa-
tion about the childrens camp for nine-year
olds, to dates of forthcoming events as reference
for youth leaders planning their diaries.
7.2 Content developmentThe original plan was to develop the text from
existing word-processed documents about the
organisations events and re-purpose them for
electronic delivery and public consumption.
Upon closer inspection, these electronic
documents were found to be wholly lacking in
substance. The text was re-written to great
benefit: choice and length of words and struc-
ture were reconsidered for reading on screen.
While retaining a strong message, shorter more
descriptive words were chosen with the aim of
producing shorter paragraphs (by about sixty
percent in some cases).
This reduction in the length of texts is
based on three considerations. Firstly it is
considered important that users spend their paid
Internet connection time profitably. Secondly,
shorter texts are more likely to be contained
within one screen at 640 x 480 pixels. Thirdly,
what looks the right length on paper seems too
long to read on screen.
The only existing images are photo-
graphs taken at an annual event. It was decided
that these should form little more than a people
gallery of those who attended.
8 Navigation structure
8.1 Description of structureAlthough the original material was substantially
modified and developed, the original documents
did suggest a particular structure which reflects
the nature of the activities in the organisation.
There are three main sections and topics within
these sections. This seems the most logical way
Figure 3.
One page of
Ray Larabies
website
selected for
analysis.
Figure 2. One page of the
Department of Typography &
Graphic Communications
website selected for analysis.
7/31/2019 Desinging for the Screen
9/18
2 5
The integration of theory and practice
of structuring the material from the point ofview of the user who knows how these three
events relate to one another.
Before coding anything, the structure
was worked out on paper with a conceptual site
map (Figure 4). This consists of a front page
(home), with general topic pages (about, soon,
projects, help) and three section pages (youth
group, camp, conferences). Each sections topic
pages are reached only from their respective
section page, e.g. the music topic page can only
be reached from the camp section page. How-
ever, all section pages and the front page areaccessible from anywhere in the site.
Within a page, classes of text for differ-
ent functions were developed. These make a
hierarchy of page title, page introduction,
headings, main body text, subsidiary note text,
which are all to be read in full. Menu lists, text
lists and captions to links are all to be scanned,
rather than read through. Stylistically the text
varies between factual, reportage, story-like and
quiz-like.
8.2 Navigation devicesWeb sites give the user control over their
navigation through the content. This control is
facilitated partly through the web sites interface,
and partly through the browser interface. The
web site interface may be totally new to the user
and different from the browser. The operating
system of the machine which hosts the browser
may also introduce even more differences in
interface design.
One approach to simplifying the users
task may therefore be to adopt some of the
visual conventions of operating systems. Anargument has been made by Lynch that familiar-
ity with the Macintosh or Windows GUI means
that
you can cope with very complex interactive
environments as long as your software stays
within basic interface guidelines of the operating
system.
(Lynch 1994)
Figure 4.
Map of the
projects web
site Sourozh
youth. White
pages can only
be reached
from the
page above,
but black
pages can be
reached from
anywhere i n
the site.
7/31/2019 Desinging for the Screen
10/18
DigitalCreativity,Vol.11,No.1
Dyson & Picho-Owiny
2 6
9 Interface designs
Two interface approaches were conceived as
alternative methods for navigating around a web
site: a verbal and a graphic interface. The verbal
approach explores the nature of linearity and
continuity with long paragraphs requiring
scrolling. These sites rely solely on HTML and
do not require an up-to-date browser. The
graphic interface aims to minimise verbal
elements and explores graphic elements such as
windows and icons, exploiting JavaScript andCascading Style Sheets.
The verbal interface uses:
sequence;
linking to other content within the same page;
scrolling;
words instead of icons;
text-heavy pages.
The linear nature of continuous text is
maintained by using a single web page for one
topic, minimising the need to split the content
across pages.In contrast, the graphic approach to the
interface incorporates visual elements of GUIs.
This is based on the premise that users are
generally familiar with Mac and Windows
GUIs. The interface includes:
icons and images;
floating windows;
objects and 3D modelling;
pull down menus.Figure 5. First verbal interface site.
Figure 6.
Second
verbal
interface
site.
7/31/2019 Desinging for the Screen
11/18
2 7
The integration of theory and practice
A distinction is made between the
interface (graphic) and the content (mainly
verbal). The text is divided into discrete units to
avoid scrolling and separate pages are linked.
Having set up two approaches to the
interface, it was difficult to keep strictly within
either one or the other. Although each web site
design pushes the interface in a certain direc-tion, the designs sometimes borrow an element
from the alternative interface approach. Both
approaches were interpreted in parallel, and they
eventually feed into each other to create a third
approach, combining both graphic and verbal
elements freely as required.
9.1 Verbal interface web sites
The first verbal interface site (Figure 5) employs
vertical space as the major visual element for
distinguishing groups of items on the page.
Type size, weight and some colour define the
hierarchical order of text blocks. Space is
proportioned into two columns, with navigation
aids in the first column and content in the
second. The text in paragraphs is deliberately
written in full sentences to emphasise the
flowing nature of the text. This site is given
minimal treatment so that it can serve as a
baseline from which other sites are developed.
The second verbal interface site (Figure
6) keeps the same vertical space, but horizontal
space is introduced to further distinguish classes
of text. This reinforces the hierarchy and defines
semantic groups (e.g. heading with text). In
effect, this produces a more complex four-
column grid where even the link list has a level
of hierarchy with section links indented. The
bars at the top of the screen aim to emphasise
both the site and page titles. Paragraphs are
shorter, bullet points are used, and the text is
further edited to give quick access to the
information.
The third verbal interface site (Figure 7)uses vertical and horizontal space in a simple
three-column grid. Developing from the
previous design, the chunks of different text
classes are formalised with rules further dividing
the page into sections. A coloured background
diffuses the clinical looking white of the last site,
while the title bar is also different (as it was
considered too graphic). Even though the rules
and typographic symbols are generated in
HTML, they may also be considered graphic. In
general, the rigidity of the page layout (horizon-
tal and vertical spatial relationships) is reminis-cent of design for print, such as timetables and
newspaper grids.
9.2 Graphic interface web sitesThe first graphic interface site (Figure 8) is again
regarded as a baseline for this approach. Graphic
items appear as 3D objects above a background.
The overall style of the page is similar to
Larabies computer game menu, with striking
colour (blue and orange) filling the screen. The
Figure 7.
Third verbal
interface
site.
7/31/2019 Desinging for the Screen
12/18
DigitalCreativity,Vol.11,No.1
Dyson & Picho-Owiny
2 8
only text that is part of the interface is the site
and page title and the topic heading. Links to
site sections on the navigation bar have conven-
tional footnote symbols in place of words.
(These symbols were arbitrarily chosen as it was
difficult to devise symbols to represent the
content.) For this site design, each sections
floating items use a different colour, whereas the
white element at the top of the page is constant
and provides the site-wide navigation. The
buttons enable deeper navigation of the section,
with plus signs to indicate that there is more
about a topic at the end of the link. They are,
however, supported by a short verbal description
in the browser window status bar, activated
when the user moves the mouse over the item.
The second graphic interface site (Figure
9) keeps the graphic symbols to enable naviga-
tion, here in the form of grey toolbar buttons
(found in Word for Windows). When the site
button is clicked, a sub menu of buttons is
revealed. These are different in nature to the
main site section buttons as they provide further
information on content. Again the symbols aresupported by a short verbal description in the
browser window status bar. The content is
always displayed in a frame to the right of the
window and the text is edited to fit this rela-
tively small space. The user may have to repeat-
edly follow links to get to some of the content,
which is buried at the bottom of the hierarchy.
Bands of background colour define semantic
groupings and hierarchy, with a separation
between content and navigation.
The third graphic interface site (Figure
10) has two windows: one in the backgroundand one in the foreground. The image in the
background window changes to reflect the
nature of each section. The content and naviga-
tion facilities are in the foreground window.
There are no headings as these are provided by
the navigation tools, which are in the form of
pull down menus, one for the site and one for
the section. A further menu is added in the
topic window if the topic needs a further level
of hierarchy. As with the last site, the text is
edited or re-written to fit the window.
9.3 Verbal and graphic interface web sites
Elements from both interfaces are combined tocreate a third approach. In both of the com-
bined interface approach sites, it was considered
important to keep a lot of text on the page,
whilst splitting up the classes of text.
The first combined interface site (Figure
11) explores the landscape format of the screen.
Scrolling is accepted in a horizontal direction.
Navigation facilities are provided by an image
on the left, but this does not include access to
the sections. The user finds section topics by
scrolling. This resembles the method of access-
ing topics in the first verbal interface site (Figure
5), except scrolling is now horizontal rather than
vertical. Additional links on the left of the page,
Figure 8.
First graphic
interface
site.
Figure 9.
Second
graphic
interface
site.
7/31/2019 Desinging for the Screen
13/18
2 9
The integration of theory and practice
Figure 10.
Third graphic
interface
site.
Figure 11.
First combined
interface site.
7/31/2019 Desinging for the Screen
14/18
DigitalCreativity,Vol.11,No.1
Dyson & Picho-Owiny
3 0
below the image map, change from page to page
and offer less structured access.
The second combined interface (Figure
12) takes the idea of floating windows, but
makes an attempt to integrate the two windows.
A space is left in the background window so that
nothing is obscured by the floating window. As
with many graphic interface sites, the title is
converted to an image to retain the appropriate
typeface. The site links are on a vertical button
bar with some unstructured links below. The
introductory paragraph of the section is the only
text content in the background window. This is
followed by word links which call up the topic
content in the floating window.
10 Discussion
10.1 Implementation of the project
10.1.1 Specific example
The outcome of the project described above is a
particularly interesting interpretation of the brief
as the project explores the limitations and
possibilities of different interface features. Inadopting two contrasting approaches (verbal vs.
graphic) a structure is created for this explora-
tion.
The analysis of web sites identifies both
specific issues (e.g. use of space to group items)
and more general characteristics (e.g. alternative
genres: computer game menu vs. book). The
web site designs then address the specific issues
and determine the appropriateness of the style
by considering the known user group. Knowl-
edge of the user group and familiarity with the
material also contribute to the development of alogical structure for the content.
10.1.2 Uses of analytical evaluations
Given the outcome of the analysis, a less formal
approach may have sufficed. However, a detailed
classification of specific features is a useful
research tool, providing systematic description,
that can be recognised as such. Another student
in the group included in her project the specific
aim of devising a schema for analysing electronic
documents. The characteristics of screen-based
information were evaluated to establish which
design features should be included in construct-
ing an electronic newspaper. In this particular
case, the student chose to emphasise the
analytical work in the development of the web
site7.
In the above example, the focus on the
development of analytical techniques was
appropriate and well executed. However, such
an emphasis may be inappropriate if student
designers merely wish to gather background
information for a project. Nevertheless, a
method seems to be necessary when exploring
electronic documents, which are likely to be less
familiar than printed artefacts, and multidimen-
sional. The process of systematically analysing
the documents may be more important than the
outcome, the detailed descriptions.
10.2 General feedback on the projectThe small group of students who carried out
this project were asked for their feedback at theend of the project. There was a general consen-
sus that they would have liked to have had
hands-on experience earlier in the project. We
discussed the reasoning behind delaying this
activity, which is to encourage detailed planning
and consideration of alternative solutions. It was
generally acknowledged that once students were
seated at a computer they would be distracted
by their attempts to get to grips with HTML
code. Our proposed solution for future projects
was therefore to introduce the basics of HTML,
with examples, near the beginning of the projectbut to keep the implementation of their own
sites until the second stage.
A similar dilemma is described by
Crystal Waters when teaching web publishing
classes at the San Francisco Digital Media
Center8. The students are asked to spend time
planning, looking at sites, storyboarding and
critiquing ideas before they produce code.
However, some students wish to learn code
7/31/2019 Desinging for the Screen
15/18
3 1
The integration of theory and practice
immediately and Waters suggests that such
people may be driven by advertisements for
$60,000-a-year web masters.
10.3 Theory and practice
10.3.1 Objectives
There is usually some discrepancy between
students perceptions of how they would like to
be taught and how teachers feel they shouldlearn. This is particularly noticeable in relation
to learning how to use specific software or
writing code, as future job prospects may appear
to demand such skills. We do seem to be
moving in a vocational, rather than academic,
direction in many spheres. When this is coupled
with the use of computers in virtually all
professional graphic design work, the demand
from students for software training is under-
standable.
Nevertheless, educators are in a position
to consider the needs of students in a broader
context. The theoretical basis to this practical
project was intended to encourage students to
understand the context within which they were
designing, to view the task from many different
angles (e.g. differences between print and
screen, metaphors, navigation structures) and to
promote a range of alternative solutions. Theory
can suggest methods to explore problems,
provide what information we have based on
current research and experience, and point to
other relevant sources. This can compensate for
our relative lack of knowledge of designing for
screen, compared with print.
However, the nature of the relationship
between theory and practice is critical. Theoreti-
cal issues may be seen as irrelevant if they do not
relate specifically to the task at hand. Integrating
theory into project discussions and workshops,
as well as formal lectures, may alleviate this
problem. In addition, timing is also important.
10.3.2 Outcomes
Those students who were unfamiliar with web
pages and HTML at the beginning of this
project had more difficulty in relating theory to
practice. This caused problems with, for
example, conceptualising their navigation
structure. When they started to develop pages
this was resolved but these students did not
produce such a wide range of alternative
solutions as others. Although this may have been
due to time wasted trying to grasp the concepts,
it is more likely a result of their HTML skillsbeing less developed. The proposed int roductory
session on HTML should help in this respect.
About half the group showed some
indication of theoretical issues guiding their
design. This was most evident in the presenta-
tion and discussion of their design solutions.
The project described in detail in this paper is
an extreme example of the range of solutions
explored and the thinking behind such experi-
Figure 12.
Second
combined
interface
site.
7/31/2019 Desinging for the Screen
16/18
7/31/2019 Desinging for the Screen
17/18
3 3
The integration of theory and practice
an electronic document to promote general issues
involved in designing for screen, rather than the
specifics of a particular medium (e.g. CD-ROM,
web page) or content (e.g. academic writing,publicity).
3 Dillon, A. and Gushrowski, B. Genres and the
Web: is the personal home page the first uniquely
digital genre? Draft paper for discussion at: http:/ /
www.slis.indiana.edu/adillon/genre.html Accessed
on 11 May 1999.4 Adobe Systems Incorporated, http://
www.adobe.com. Accessed on 25 June 1997.5 Department of Typography & Graphic Communi-
cation, The University of Reading. http://
www.rdg.ac.uk/Typography. Accessed on 6 March
1998.6 Ray Larabie. http://www.globalserve.net/~rlarabie/
freefont.htm. Accessed on 25 June 1997.7 This student, Enola Wright, graduated in July 1998
and is now a Web Site Manager for an electronic
software distribution company.8 Crystal Waters, Web concept & design. ht tp:/ /
www.typo.com/wcd/wcdintro.html. Accessed on 15December 1997.
Mary Dyson is a lecturer in the Department of
Typography & Graphic Communication at the
University of Reading where she teaches
Electronic Publishing. Due to a background in
psychology, her teaching emphasises the user,
rather than the technology. She has pursued her
research interests in pedagogical and human
factors aspects of electronic publishing by
writing on the relationship between designing
and software. She has also conducted empirical
research evaluating multimedia and specifically
legibility on screen.
Chomoi Picho-Owiny obtained a first class BA
(Hons) in Typography & Graphic Communica-
tion from The University of Reading in July
1999. Within his course he focused on the way
web sites should function visually, efficiencies in
digital text editing, and software automation for
the typographer. Since then he has been with
Moon, a small branding and communications
consultancy based in London and New York.
7/31/2019 Desinging for the Screen
18/18
Copyright of Digital Creativity is the property of Routledge and its content may not be copied or emailed to
multiple sites or posted to a listserv without the copyright holder's express written permission. However, users
may print, download, or email articles for individual use.
Top Related