runway index

The Web Tutorials

Page Design :: Site Design :: Testing :: Resources

Chapter Index

Introduction
History
Getting Connected
Browsers
Copyright
Search Engines
Hyperlinks
HTML
Linking documents
Images
Newsgroups
Tables
Forms
Frames
Photoshop
Design
Publishing
Javascript
Free Stuff
Styles
DHTML
On-line Shopping
Internationalism
Advertising
Forums and Chat

 


Design

So far we have looked at how to construct pages, with some small asides about the philosophy behind some of the routines, and some excursions into ideas which are peculiar to the web. However, we have not touched upon the all-important question of design.

Nowadays (Jan 1998) the whole process of web page creation has split into two distinct disciplines: the design element which is handled by graphic artists; and the coding element which is handled by programmers proficient in HTML, JavaScript, and Java, with some knowledge of Active X thrown in, and in all probability some knowledge of Unix and Perl.

To cope with all these disciplines is well nigh impossible. The best the average person acting as a one-man-band web-page-designer can hope for, is a smattering of all the above, just enough to produce a creditable site.

In a later chapter we will look at the whistles and bells of site creation, but in this section we will be concentrating solely upon design.

Page Design

There are several ways to approach this. The easiest is to look at some good quality sites and see what makes them tick. The other is to think electronic publishing (and throw out any preconceived ideas about paper based publishing) and look at the new techniques.

You have to take in one important dimension which is simply not available to the paper-based publisher, and that is the dimension of time. Online publications do not have to be static, they can move, and the viewer can interact with the content. It is therefore, to some degree, fluid, and the precise content can be determined by the viewer.

Let us look at a few sites which can help us get to grips with what makes for good design.

The acknowledged expert in this field is David Siegal. He has his own site at www.killersites.com, And he also runs another site which seeks to put the best design work on show. This site is called High Five, and can be found at www.highfive.com. At any one time the best five sites of the week/month will be featured. Tune in and learn how it's done.

Other sites which can help in this respect are:

You also need to check out some more sophisticated page design programs such as:

All of the above are excellent. FrontPage is good for site management, HotMetalPro is good for HTML coding, Cyberstudio and Dreamweaver are good as an all-round solution, including dropping in JavaScript and Java applets, and movies and sound. Dreamweaver can also produce animations using a variation of their Flash technology. Freeway is in a different league, giving you instant page design without the need to code anything at all, it is the QuarkXPress of the web, and like QuarkXPress, you need a Mac to run it.

You can also get free, evaluation, or shareware software. The most useful sites are:

And check out the word "warez" in your favourite search engine, and just see what comes up.

Meanwhile, look at these two pages (one | two) and see if you can see what's wrong with them.

Site Design

Site design is important. You can move in any direction from all but the first page, and so it can become easy to get lost on even a moderately sized site.

When creating your site you should always mimic the structure on the online site. In other words, think how your site is going to be structured, how are visitors going to be able to get from section to section and from page to page. If you do indeed have separate sections within your site you should have the pages in each section placed into a section directory. You will also need a separate directory for your pictures.

If you set up this basic directory structure on your hard drive, all within a Web folder, you will be able to upload your whole site very easily by simply choosing everything from the Web folder and loading it in one go. You will also find that if all your links work on your hard disk, they will also work online because each page retains the same position vis-a-vis the others when uploaded.

Always remember to put a link on every page back to the front page of your site, and back to the front of the particular section.

If you are considering putting in frames do remember that there are problems with search engines and frames. Try not to start your site with a page containing frames. Not all viewers can see frames, and you don't want to prejudice your position with regard to the search engines by making it difficult for them to get in and see your various sections. If you do use frames, use them in a section within the site.

Online tips for good design:

CNET
Design for designers

Testing your Site

Once you've built it, test it. Test it on the main browsers, and use at least versions four and three as well as the current high-tech wiz versions.

You can also use specialist test services:

Resources

Yale Style Manual
The Builder
Web Monkey
Web Developer's Virtual Library
The Web Design Resource
Web Review

Education Home Page

Runway Index

Back to the Top

© John Clare. runway 1999