The 'Home Page' of a Web Site

This is the opening page of a web site designed by one of the authors as it was several years ago. It contains many of the key elements of navigation in web design.

The reason for using light text on a dark background is that the deep grey is similar to the tone of unexposed film: it also suggests a 'darkness'. I had tried a red colour on an earlier version but it looked ugly and, since the majority of the photographs are monochromatic, almost-black was appropriate. (The next version of the design threw this logic out of the window ... but more on that in a moment.)

The top of the page sets the scene. The camera says Photography and we then see the site's name, Invisible Light, and the explanation that this is a site of my photos using infrared light. Ideally, that tells anyone dropping by exactly what happens here. The next paragraph is the Mission Statement which explains the site. This is also written for search engine spiders, in case the META TAG keywords in the page header are not enough.

This is then followed by information for any regular visitors; saying what has recently been updated. This is a mixed blessing because new visitors might feel I am not updating enough: and they would probably be right. Visitors also get the message that we have technical content because of the information about abstracts from the RPS.

Then comes the contents/navigation bar.

There is an icon for each of the six main parts of the site and a text label underneath both identifies the icon and gives pointers to anyone visiting with graphics turned off. (I know it's a photographic site but I do get 'graphic-disabled' visitors occasionally.) I also want to tell people where they are and doing this by saying You are Here in text uses less data than changing one of the icons every time. Incidentally, I used to say Bibliography instead of Book List but I discovered that some people came to the site looking for books and didn't know what a bibliography was - despite the icon of a stack of books. So I changed it.

These icons should be echoed at the head of the section they refer to but in this version of the site I didn't. I was more concerned with reducing download times in a pre-broadband era, so the camera icon is used on all the pages. There are options for reducing load times with section icons on a web site. One possibility is to use a shrunken version of the full size icon on the navigation bar and ask the browser to shrink it. Unfortunately browsers do this with varying quality.

The bottom of the page, walled off by a narrow rule, carries the copyright notice and has the links to the web master and the designer (both me in this case). I use Wormwood as a nom de web because I think it is less obtrusive. The name, besides being a plant and the English translation of the word Chernobyl, is the name CS Lewis gave to the second of the two demons in his Screwtape Letters and my ISP was named Demon: so it all seemed appropriate.

The next iteration of the design was to make the pages lighter, moving towards a paper look.The current version of the Invisible Light web site is at http://www.atsf.co.uk/ilight.

One interesting point concerns links and whether they should be underlined and whether they should always be certain colours. Underlining has a chequered history and was used in type-written text to simulate bold, since a typrewriter couldn't do bold. Many graphic designers, following the logic of this, prefer not to underline links: at the moment I tend to agree with this approach. I think it makes the text look cleaner on screen. However, my feelings change and in the design above you will see links underlined. I was also using 'non-standard' colours for the links and, if you do not underline links, you need some way of making it clear (you hope) to readers that the text is in fact a hyperlink. One way is to continue use of the standard colours adopted by browsers: blue for a fresh link and red for one that has already been followed. Note however, that readability guidelines may mitigate against such colours and neither blue nor red work against a dark background.