Webpage Design

Course code : DESI1046
Course co-ordinator : David Watson

Introduction

This course covers the design and implementation of web pages and small websites. It is concerned with the client-side technologies, XHTML and CSS and includes an introduction to JavaScript. It also aims to develop an understanding of webpage aesthetics and looks at the use of colour, images, typography and general graphic design principles. It also covers the web design process, from client brief through to deployment and promotion. As such, it can be considered a general introduction to web design which is why this is the first course taught on the Web Design & Content Planning programme.

With a group of students from diverse backgrounds, a programme such as Web Design & Content Planning requires some common currency among those taking part. This course acts as a foundation for further study and discussion. As such, we will cover some basic aspects of web design. This is not to undervalue what you already may know but to ensure that everyone has the same basic understanding of the issues.

This course is about the technical and aesthetic aspects of web design in equal measure. The course is not about learning how to use any particular piece of software. It is about gaining a fundamental understanding of how the web works and how to create webpages to a high standard. Web design is very much the same as other design disciplines and many of the topics covered are equally relevant to areas such as graphic design and so, some of the references may not necessarily be specific to web design but are relevant nonetheless.

Course Diary

The course diary gives an overview of the timetable, weekly topics and submission dates for this course. There may be occasional changes, so check back frequently.

2009-10 Session
DateRoomTitle
30th September 2009Tower Lab CWhat is web design?
7th October 2009Tower Lab CThe structural layer
14th October 2009Tower Lab CThe presentation layer
21st October 2009Tower Lab CGraphic elements and colour
28th October 2009Tower Lab CLayout and typography *
4th November 2009Tower Lab CStandard methods and good practice
11th November 2009Tower Lab CThe behavioural layer †
18th November 2009Tower Lab CPutting it all together †† **

* Brief for Small Business Website project brief issued
† Small Business Website project crit
†† Small Business Website project submission
** Website Makeover project brief issued (see Website Planning for crit and submission dates)
Website Makeover project submission and crit on 9th December

All face-to-face sessions are 3 hours long and take place on Wednesday afternoons; beginning at 2.00pm. Sessions will be taught in Tower Lab C unless otherwise indicated.

Aims and Outcomes

Format

The course runs during Term 1 and consists of five main elements - workshops, online dialogue, coursework and projects.

The workshops are mainly discussions based on that week's topic and are based in Tower Lab C (see the course diary for details). Coursework will be reviewed each week. From time-to-time, project "crits" will be arranged and seminars given.

Workshops

The workshops will focus on "webpage design" in the widest sense of the words. We will cover both technical and aesthetic aspects during the workshops and lively dialogue is encouraged. The various topics are given on the timetable although this is only meant to be indicative and may change to suit specific requirements. Detailed tutorials etc. may be given at the workshop sessions or made available on-line. It must be stressed that complete coverage of the topics under consideration cannot be dealt with during the workshops and you will need to allocate time to follow up each workshop with further study.

Online Dialogue

Online teaching and support is available from a number of resources. Firstly, you may contact the course tutor by email. However, for general comment and discussion, students should engage with the course tutor, other tutors and other students on the programme at the online forum. This is a public forum, specifically set up for this programme but it also has a number of private areas where course and programme specific topics can be discussed. It is well used and a popular method of communication among the other students. Your questions will be answered either by the course tutor or by other members of the forum. Use of the forum is an integral part of the learning process and you are expected to become active members. The forum already contains a large amount of information and is a valuable resource tool as well as an excellent "forum" for debate.

See Assessed Elements for details of coursework and projects.

Key Texts

We are very fortunate that there are now many excellent books on the topic of web design and to some extent, selecting a list of "key texts" is a matter of personal preference. However, the books above have been chosen specifically to match the structure and content of this course and to appeal to students at an introductory level. Students who want to broaden and deepen their knowledge may want to progress to those texts listed in the Further Reading section.

Essential Text Books

Essential Reference Books

See the reading page for more information on these titles.

Periodicals

Since web design is a fast evolving discipline, it's a good idea to keep up with current trends by reading online magazines (see below) and blogs. However, it's still nice to receive your news, reviews and articles in paper format. As far as printed magazines are concerned, there is only one worth mentioning and that is .net magazine. It's an excellent publication, covering all the areas of concern for students on this programme and I recommend that you subscribe to it.

Essential Magazines

See the reading page for more information on these titles.

Further Reading

See the reading page for more information on these titles.

Online Resources

There are literally hundreds of good web design sites on the web but a few are outstanding with excellent content added on a regular basis. I recommend that you read both A LIST Apart and Digital Web Magazine regularly.

Course Documents

These documents contain all the information about the course, projects, weekly coursework and references. All documents are provided in PDF format. Some documents are also provided in appropriate alternative formats. In order to view the PDF files, you will need the Adobe Reader. The PowerPoint Show files can be viewed using the Microsoft PowerPoint 2007 Viewer if you don't already have PowerPoint installed.

There are currently 27 files in this section

File Listing
  Filename Size (KB) Date Modified
DESI1046 Course Brief 09-10.pdf 55.3 29th Sep 2009
Project 1 - Small Business Website.pdf 111.4 28th Oct 2009
Project 2 - Website Makeover.pdf 98.2 17th Nov 2009
Week 1 - Coursework.pdf 18.7 30th Sep 2009
Week 1 - What is Web Design.pdf 5,014.4 30th Sep 2009
Week 1 - What is Web Design.ppsx 5,766.8 30th Sep 2009
Week 2 - Coursework.pdf 16.4 7th Oct 2009
Week 2 - The Structural Layer.pdf 468.2 6th Oct 2009
Week 2 - The Structural Layer.ppsx 531.5 6th Oct 2009
Week 3 - Coursework.pdf 17.1 13th Oct 2009
Week 3 - The Presentation Layer.pdf 367.0 13th Oct 2009
Week 3 - The Presentation Layer.ppsx 446.6 13th Oct 2009
Week 4 - Coursework.pdf 19.5 21st Oct 2009
Week 4 - Graphical Elements and Colour.pdf 2,031.3 21st Oct 2009
Week 4 - Graphical Elements and Colour.ppsx 2,180.4 21st Oct 2009
Week 5 - Coursework.pdf 20.8 27th Oct 2009
Week 5 - Layout and Typography.pdf 3,441.2 28th Oct 2009
Week 5 - Layout and Typography.ppsx 4,417.0 28th Oct 2009
Week 6 - Coursework.pdf 20.3 4th Nov 2009
Week 6 - Standard Methods and Good Practice.pdf 2,533.9 4th Nov 2009
Week 6 - Standard Methods and Good Practice.ppsx 1,286.1 4th Nov 2009
Week 7 - Coursework.pdf 20.4 10th Nov 2009
Week 7 - The Behavioural Layer.pdf 487.1 10th Nov 2009
Week 7 - The Behavioural Layer.ppsx 364.8 10th Nov 2009
Week 8 - Coursework.pdf 20.0 18th Nov 2009
Week 8 - Putting it all together.pdf 631.5 18th Nov 2009
Week 8 - Putting it all together.ppsx 1,108.5 18th Nov 2009

Assessed Elements

This course includes 4 assessed elements; coursework, online activity and two projects. Details of these elements are given below. Each of the elements has a slightly different weighting and this is indicative of the degree of difficulty and/or the amount of work required. The weighting is as follows:

Coursework

Each week you will be given one or more tasks and some recommended reading to be completed for the following week when feedback will be given. Some tasks will build on work completed the previous week so it's important not to fall behind. Coursework will be assessed at the end of the course. You will be provided with web hosting facilities so that you can put your coursework online. This enables tutors and students to look at coursework outside of normal teaching times and allows you the flexibility to work whenever convenient.

Online activity

You are expected to contribute to online discussions on our forum. We see the forum as being a way of documenting current trends and news and a place for discussion. In addition, it's a place you can come for help or to help others. Online activity is not restricted to the forum; you may, for example, want to keep a blog as a record of your studies.

Small Business Website

You will design and produce a basic website for a small business concern. This project will give you the opportunity to implement some of the techniques and design ideas you have developed during the first part of the course. This project will be used to help demonstrate some of the issues involved with the development of small websites including: the design process, colour and typography, site structure and navigation. You will be given a detailed brief when the project is introduced.

Website Makeover

Some websites are built from scratch, but increasingly, web designers have to learn how to redesign existing sites. For this project, you will take an existing website and redesign it using the same content. This will give you the opportunity to critically assess the current site and to make improvements where you think they are required. You should undertake an analysis of the inherent problems with the existing design and provide an explanation of how these have been resolved in your new design.

Scenario

A website owner has approached you to redesign their site. They are convinced that with an improved design, their site will do better. They have asked for advice on colour, page layout, branding etc.

You may choose any one of the following cook/recipie related websites.

  1. cookadvice.com
  2. yumyum.com
  3. thatsmyhome.com
  4. backofthebox.com
  5. anniesrecipes.com

Breif

You must produce a working mock-up of a redesigned homepage (i.e. a coded page using xhtml and css plus any images or other media needed). You may create other internal pages if you need to illustrate your ideas for the site redesign and navigation. The redesign should address the issues of visual design and findability (SEO). You should include a report of the current site traffic, PageRank and any other metrics you can find and then consider how your redesign will improve traffic and profile.

Assessment

The project will be judged on your analysis of the existing design, your reasoning for the design changes, the visual design (look and feel) of the new homepage and the consideration of coding standards and findability.

A Web Design Toolkit

Although most web designers will prefer to work with applications like Dreamweaver and Photoshop for maximum flexibility and functionality, it isn't really necessary. A perfectly adequate toolkit can be had for free. The applications listed below are all you need to create brilliant web pages.

Aptana StudioWrite your XHTML and CSS code in Notepad++, create and edit your images in Paint.NET, preview the results in Firefox and then upload to your web server using FileZilla.

If you prefer working in an integrated development environment, take a look at Aptana Studio. In a nutshell, it's Dreamweaver without the WYSIWYG editor and because it's open source, there is a free version.

Student Websites

All student websites can be seen at www.watest.co.uk. Access to coursework and project work is password protected. Access credentials can be found in the private area of the forum.

Reference Documents

These documents are useful references. They are mostly extracts and sample chapters from some of the books on the reading list. You will find references to some of these documents in the weekly reading recommendations.

There are currently 14 files in this section

File Listing
  Filename Size (KB) Date Modified
Build Your Own Website The Right Way.pdf 9,102.3 7th Oct 2009
CSS Anthology 2nd Ed sample chapters.pdf 5,409.4 28th Mar 2009
CSS Anthology sample chapters.pdf 2,201.0 28th Mar 2009
Designing Without Tables sample chapters.pdf 2,802.4 28th Mar 2009
JavaScript Anthology sample chapters.pdf 1,913.6 28th Mar 2009
Modern Web Design sample chapters.pdf 1,120.5 28th Mar 2009
Simply JavaScript sample chapters.pdf 1,828.5 28th Mar 2009
The Art and Science of CSS sample chapters.pdf 3,863.0 28th Mar 2009
The Glass Wall.pdf 8,073.0 28th Mar 2009
The Photoshop Anthology chapter 1.pdf 4,509.6 28th Mar 2009
The Photoshop Anthology chapter 2.pdf 3,542.9 28th Mar 2009
The Photoshop Anthology chapter 3.pdf 4,117.5 28th Mar 2009
The Ultimate HTML Reference sample chapter.pdf 1,531.2 28th Mar 2009
Web Standards Creativity sample chapters.pdf 1,981.2 28th Mar 2009

Worked Examples

Documents in this section are designed to illustrate some of the ideas discussed during the workshops. New examples will be added as and when appropriate.

There are currently 19 files in this section

File Listing
  Filename Size (KB) Date Modified
nav_back_highlight.gif 0.7 28th Mar 2009
nav_back_normal.gif 0.7 28th Mar 2009
week_3_index.html 0.4 28th Mar 2009
week_3_main.css 0.4 28th Mar 2009
week_5_typography.html 3.6 28th Mar 2009
week_6_border_trick.html 2.7 28th Mar 2009
week_6_page_design_styled.html 6.6 28th Mar 2009
week_6_page_design_styled_image.html 6.8 28th Mar 2009
week_6_page_design_unstyled.html 5.3 28th Mar 2009
week_6_page_layout.html 3.0 28th Mar 2009
week_7_change_colour.html 2.0 28th Mar 2009
week_7_change_multiple.html 2.6 28th Mar 2009
week_7_change_page_background.html 2.4 28th Mar 2009
week_7_change_text.html 2.0 28th Mar 2009
week_7_hide.html 2.0 28th Mar 2009
week_7_jquery_slidetoggle.html 2.7 10th Nov 2009
week_7_jquery_toggle.html 2.7 10th Nov 2009
week_7_new_window.html 1.8 28th Mar 2009
window.html 0.9 28th Mar 2009

Week 1 Links ~ What is web design?

Week 2 Links ~ The structural layer

Week 3 Links ~ The presentation layer

Week 4 Links ~ Graphic elements and colour

Interactive Colour Pickers

Images and CSS

Week 5 Links ~ Layout and typography

Grid-based page design

Typography

Week 6 Links ~ Standard methods and good practice

CSS Page Layout

Lists for Navigation

Week 7 Links ~ The behavioral layer

JavaScript

The DOM (document object model)

jQuery (a JavaScript framework)

Ajax

Week 8 Links ~ Putting it all together

Filters: hacks and conditional comments

Copyright David Watson 2005–2010
XHTML, CSS