Web Design Small Cover

Buy the PDF of
Web Design:
A Complete Introduction

See the book at amazon.co.uk or amazon.com

Related Site

Web Security Topics

Related Books

Secure Communication Cover

Securing A Server Cover

Teaching Notes for Chapter 10

Download the end-of-chapter questions. (Zipped plain text files, UTF-8 encoded.)

If your students already know some HTML and CSS from previous courses or if they learn the details of these languages separately, possibly through reading assignments or Web-based tuition, it would be possible to go to this chapter directly after the introduction, and present the course in a top-down way, starting from the big issues of design, instead of presenting it bottom-up, as we have done in the book. It would also be possible to use this chapter in parallel with Chapter 4, to motivate the use of CSS.

Design Students

Students who have done some graphic design work should be comfortable with the main concerns of this chapter, and may already be familiar with the ideas of gestalt and semiotics. The potential source of difficulty for this group of students is the way in which the Web does not give the designer total control over layout and appearance. The idea of using flexible layouts may be a novelty, but good designers should be able to see the point of allowing the page to adapt itself to the type size and window dimensions. Relinquishing control over the precise typefaces to be used may be more difficult. Even students who do not yet have much experience with print-based design, but nevertheless have a graphic designer's eye and disposition, will tend to want to control the page's appearance as precisely as possible. Design students should be encouraged to see the constraints imposed by the Web as a positive design challenge, not as a barrier to the implementation of good design ideas.

Make sure that students test their pages using different screen sizes. (You can get bookmarklets to resize the window to common screen sizes in most browsers from XHTMLed's bookmarklets page, among other places.) It is also essential that they test the effect of increasing and decreasing the font size in the browser. Ideally, a font manager should be used to disable any particular fonts that have been specified, so that the effect of font substitution can be judged. This testing should not be seen as a ritual that is required to get full credit for assignments, though; the students should appreciate the diversity of ways in which their pages will be seen and the necessity to design layouts that work at a range of sizes and formats.

Computing Students

For most computing students, the bulk of this chapter's material will be unknown territory. Not only will terms such as semiotics and gestalt be new to them, but the concerns of visual designers will probably be quite alien. A computing education teaches students how to think symbolically, not visually. Hence, even if they absorb the theory, it is likely that their judgement on visual matters will be poor, at least to begin with.

Do not be tempted to leave this chapter out, on the grounds that most Web design agencies implement a division of labour, with coders and visual designers working separately. Since good visual design is essential to usability, it is important that coders don't consider visual design as superficial icing on the cake. Coders must be able to understand the concerns of visual designers, otherwise poor communication and misunderstanding will interfere with efficient cooperation and may lead to resentment. Since, where division of labour is in effect, it is the coders who actually produce the working pages, it is most likely that the designers' concerns will be the victim of such misunderstandings, with a negative effect on usability. We strongly recommend that, especially for computing students, the chapter is read from the beginning, and that they don't skip to the CSS techniques.

You may find that students who have no experience in working with visual material find it very difficult to see the distinctions among colours and tones that we discuss in this chapter, and therefore they may fail to understand the points being made. We have included some practical tasks specifically to help with this, but if students are still unable to see what is going on, there is no point in pushing them. In this case, you should try to ensure that they learn the basic necessity for high contrast, at least. You should also be aware that some of your students may be colour blind.

The only way of developing a sense of visual design is by encouraging students to look at as many Web pages as possible. The practical tasks for this chapter are intended to help them start thinking about visual design, instead of just consuming it.