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

Simple Projects

These simple projects are designed to be undertaken by a single person in a relatively short time, and do not require access to a server. While each project is an exercise in building a simple Web site, each also provides an opportunity to experiment with and learn about the use of colour in Web design. Although these are only very small projects you must still ensure that you adhere to Web standards and that every site you make achieves at least level-A conformance to WCAG 1.0. It is always valuable to get other people’s reactions to sites you create, so wherever possible show your sites to as many people as possible. Be aware, however, that if all your users come from the same place or background, or are all in the same situation with respect to accessibility, you are unlikely to get the full range of possible responses that you might find in users worldwide.

All of these projects stipulate the use of a certain range of colours throughout the site. By this, we mean that you should use the specified colours, and no others, for all the text, backgrounds and any icons. In some projects, we also ask you restrict all the images to the same set of colours. (You can use Photoshop to turn coloured images into greyscale, or alter a photograph to use a restricted set of colours.)

Greyscale

Construct a small Web site, with between 1 and 5 pages, entirely in greyscale, i.e. without the use of any colour at all. The site should provide some kind of information to the visitor. For example, construct one of the following: a site about the best or worst features of the place you live in, a site about your hobby (if you have one), a site about a person you admire (this could be someone famous, or someone unknown to the world), or a site about a current or recent event in the world. The intention is to ensure that all the information is presented as clearly as possible, and all the functional features are easy to identify and use, despite the lack of colour. If possible include images in your site. The purpose of this project is to develop a good sense of design for usability and accessibility without being distracted by colour.

Greyscale Plus One

Construct a simple Web site as above, but this time use just one colour of your choice in addition to the range of greys. Try to ensure that you use your one colour in such a way that it enhances both the usability and the aesthetic qualities of your site. If you are interested in graphic design you could also experiment with using just one colour in your images. Note that you are restricted to a single colour, not a full range of tones and tints of a colour. Show this site to your friends, family or colleagues, and note their reactions to the design.

Natural Colour

Look at photographs of the natural world (there are many photo galleries and photo-sharing sites on the Web) and choose a photo whose colours you like. Construct a simple Web site of 3 or 4 pages using only colours selected from that photograph. Make sure that your design includes at least 4 different colours and do not use pure black or pure white. The subject of the site should not relate to the photo; instead, take some information about any topic that interests you (other than nature) from a source of your choice (use Wikipedia if you have no better source), and re-present that information across a few simple pages on your own site. Make sure that you use headings to structure the content of the individual pages and include a simple navbar and also some links incorporated within the text. You could include images if appropriate, but if you do you will need to ensure that your colour scheme works well with your chosen images. (The colours within the images do not of course need to relate to your original photo source for colour. The colours chosen from that photo are for use in the design, not the content of the site.)

Full Colour

Construct a site of at least 6 pages in full colour. This time use any colours that you wish, including black and white, but with due regard to creating a good, usable and accessible design. This site should include a company logo as a graphic file, a navbar, a search box (though you don’t have to implement the search facility), a range of images and text and some means of contacting the site’s owners. It should also include two or more external links (that work!) within the text somewhere on the site, and two different levels of heading, used consistently to mark up sections. Use a layout with two or three columns consistently throughout the site. Make sure that your layout of all elements of the site is clear and usable, and adapts to different-sized windows and different font sizes. This site could be a brochure site advertising a small company (if you need ideas look at small companies’ sites in your local area) or an information site about a subject of your choice.