Introduction

Introduction

Many people have the impression of Web design as a purely technical task, somewhat akin to programming or designing a database. In their view, the "difficult part" of creating a Web site is coming up with the final HTML code that makes the page display.

This is absolutely not the case.

If only it were that easy...

In reality, web design covers an enormous range of skills, some of which are professions in their own right. To be a good web designer, you must truly be a "jack of all trades". It probably helps if you're a master in at least one or two of them.

But that doesn't mean the task is hopeless. It's possible to get by with just a few of the basics in each area. In fact, a large part of success can be achieved by simply understanding that certain areas need to be considered for your Web site, rather than ignoring them completely.

This course aims to help you reach that basic level of understanding, as a foundation for further practice and learning.

Roles

Web design, as a complete task, includes some aspects from each of the following traditional roles:

• Producer
• Usability designer
• Graphic designer
• Writer
• Editor
• Software engineer
• Software tester

In a company environment, there might sometimes be different people filling some of those roles. However, as amateur web designers you won't have that luxury.

Producer

A Web designer needs to decide what information will be provided in a Web site based on what the users are likely to want.

Usability designer

Web sites need to be extremely easy to navigate and understand. Users will not accept a "learning curve" or a detailed instruction manual (as they might with complex computer software, for example) just to browse a web site.

Graphic designer

Web sites need to be laid out in a way that pleases the eye, is easy to read, and emphasises the important parts of information.

Writer

Almost all Web sites contain text of some sort. In order to give a good impression, this text must be reasonably well-written and easily readable.

Editor

As well as writing text for a site, Web designers need to check the text to make sure that there are no errors or inconsistencies. Sometimes the amount of text may need to be reduced.

Software engineer

Even Web sites that don't involve any software still benefit from some basic software engineering practices, such as modularisation. (More interactive Web sites often need software to be specially written, but that's beyond the scope of this course.)

Software testers

It's not good enough to create a Web site. The site has to actually work. Not only that, but it must work at least on all common browsers. It must continue to work, even after small changes are made... The task is less difficult than general software testing, but can still be challenging.

Material covered

This course covers most important aspects involved in the creation of simple Web sites. Some more advanced techniques are not included.

The course includes only a small amount of technical information - students are expected to learn HTML on their own, or use a visual editor that reduces the need for it.

Design skills

The course covers:

• Content (selecting appropriate content for a site)
• Organisation (organising content into a logical structure)
• Navigation (providing controls and displays so users can find their way around the site)
• Text (writing for the Web)
• Graphic design (the basics; text layout, fonts, colour)
• Usability (making sure the site is easy to use)
• Evaluation (checking your site is up to scratch)

By the end of the course, students should hopefully have a basic understanding of all these topics, and the ability to intelligently criticise Web sites based on the topics.

During the course, I'll give references to further articles on those topics.

The most glaring omission is any discussion of dynamic (database-driven) Web sites; these are not covered because most people on the class will not have the facilities or skills required to create such sites. Of course, all the design skills above apply to dynamic sites as well as static ones.

Technical skills

This course does not cover the HTML language used in creating Web sites beyond a very brief overview.

Students may either learn HTML from tutorials on the Web or from books (it is not a programming language and is relatively easy to learn), or may skip it altogether and use a visual editor.

Nearly any visual editor will allow you to create basic, functional Web sites.

• Microsoft FrontPage (the 2000 version or later) is of acceptable quality if you are careful not to use gimmicky features like animated text
• Macromedia Dreamweaver, which is more expensive, is the industry standard tool for professionals who prefer visual editors
• If you want a free visual editor, Microsoft have one called 'FrontPage Express' and Netscape have 'Composer' which is integrated with their Netscape 6.0 browser. (The version of Composer with older Netscape browsers produced poor HTML and is best avoided if possible.) Neither of these are great, but they mostly do the job.

You could also use a text editor that requires you to enter HTML code, but includes convenience features such as built-in reference guides and source colouring so that your code is easier to read. The industry standard here is Homesite (which comes as part of Dreamweaver) and there is a free program called First Page 2000 which is extremely similar although somewhat flawed in certain areas. Of course, there's always Notepad.

If you want to achieve real excellence in Web design you will need to learn HTML (and probably the 'CSS' language for adding visual style to pages) - even if you intend to use a visual editor, it is necessary to learn HTML to understand its output, correct its flaws, and ensure you know what the page will look like on all systems. (The best Web professionals are split - most use a visual editor for some tasks and tweak the code as necessary, but some prefer to hand-code everything.) However, you can apply most of the principles in this course without understanding HTML, and still create good quality sites.

This Web site

This site is intended to be a useful resource both for students attending the class, and for other Web design beginners worldwide. It is not intended to be an example of the perfect Web site! There are plenty of flaws in most aspects of this site.

Contents

This Web site contains the full text of the course; it is the notes I will be using for reference when I present the material, and the headings from this text appear on the slides I'll use. While the class is running, the site will be updated on the Monday or Tuesday evenings before a class session.

Updates

After running for several years, the evening class has ended; I no longer give this class. There will probably be no more updates to this site, but it remains online for historical interest and because some find it useful.

Feedback

If you have any comments about the material included here, or you'd just like to let me know that you found it useful, you can get in touch by email. However, please don't send me questions about web design or HTML. There are plenty of public mailing lists and forums where you can ask these questions. Thanks.

Summary

This course teaches Web design.

It concentrates more on "design" than on "technical" aspects, because I believe that design skills are insufficiently covered in the tutorials and books that are commonly available.

Elements of good design (such as usability, graphic design, and appropriate writing) are far more important in the creation of a good site than HTML wizardry.