CO22030 Web Technologies
Tutorial 5 – Web Design
(CO22030 Web Technologies)
1.
Objectives
The objective of this week's tutorial is for you to design the site of your coursework.
2.
Instructions
Minimal, gothic, Victorian, eerie, industrial, personal, natural, corporate, modern, retro, postneo-vegetarian, etc. So many styles that you may choose for your site, so many style you may
want to stay away from and try to create an original one. In the lecture, we saw a few
examples of corporate sites and examined their choice of colour schemes. You should extend
this approach to:
2.1

Other sites

Other elements of design (use of space, typography).
Task 1 – critical analysis
Select three of your favourite web sites (with regards to design) and analyse their design in
terms of:
1. Use of space
2. Colour scheme
3. Typography
In addition, determine what other aspects of the design that may not fit in one of the above
categories, contributes to the quality of the sites.
2.2
Task 2 – more on web styles
To further develop your knowledge of web styles, read the following page:
http://www.webdesignfromscratch.com/current-style.cfm
You will have noted that this page is about “current” popular styles, which suggests that this is
a strong element of fashion in this overview. Two years from now, this list may look very
different.
Copyright © 2006 Napier University
Page 1
CO22030 Web Technologies
Task 3 – design your own site
2.3
You must now consider the design of your own site. Here’s the suggested (simplistic1)
workflow to achieve this:
1. List all the features of your website and organise them hierarchically.
2. Map the features/information to pages/page areas => site map + page layout
3. Refine your layout for each page and consider the other design parameters (use of
space, colours and typography)
4. Package all your design artefacts in a clear, professionally presented document that
will communicate your design unambiguously to a developer (or your tutor). This
document will contain:
a. Storyboards
b. Site map
c. Style specification document that clearly summarises all information required
by a developer: fonts, colour codes, sizes, margin sizes, border widths, etc.
3.
Using Dreamweaver
As mentioned in the lecture, you are welcome to use Macromedia Dreamweaver as a
prototyping tool for the coursework. It is obviously more than just a prototyping tool, but the
emphasis of this module is on understanding the technology that allows you to create web
pages.
Feel free to use Dreamweaver to create your storyboards. Dreamweaver makes it very easy to
create page layouts, using tables. There is a tutorial available on this topic (from the
Dreamweaver Help menu).
Dreamwever tutorials refer to resources. In the school, there are available at:
G:\compstd\Macromedia\DreamweaverMX\Dreamweaver MX\Samples
For those interested in creating a tableless layout using Dreamweaver, a tutorial is available at:
http://www.adobe.com/devnet/dreamweaver/articles/tableless_layout_dw8.html
You should be able to do the same thing without Dreamweaver!
4.
Checklists
Is your design appropriate? Here is a number of checklist sites that will help you sanity check
your design:

Netmechanic design checklist:
1
For less simplistic sites, more elaborate strategies must be used, but this is outwith the scope of this module. A
useful reference on this topic is: http://www.webstyleguide.com/
Copyright © 2006 Napier University
Page 2
CO22030 Web Technologies
http://www.netmechanic.com/news/vol7/design_no4.htm

Does my web site suck? Two checklists:
http://www.webpagesthatsuck.com/does-my-web-site-suck/does-my-web-site-suckchecklist-part-one.html
http://www.webpagesthatsuck.com/does-my-web-site-suck/does-my-web-site-suckchecklist-part-two.html
5.
References
Excellent web design site:
http://www.webdesignfromscratch.com/
And in particular, the following page:
http://www.webdesignfromscratch.com/current-style.cfm
Creating tableless layouts in Dreamweaver:
http://www.adobe.com/devnet/dreamweaver/articles/tableless_layout_dw8.html
Other useful references:
http://www.webmonkey.com
Copyright © 2006 Napier University
Page 3