For most sites, even if you have several hundred pages in all, you will only need to design a handful. Like the pages in most good publications, most will differ in content but not in design. A typical web site will need a front page, a front page for each section and a contents page. Most of your contents pages will be concerned with showing pictures, and you may like to have separate designs for picture pages and for text pages (perhaps your resume and links pages) although you can use the same. After all you can even use a picture above your resume or links and let the text scroll down below this.

My advice is to keep your designs simple. If you've read my previous article you will know I prefer plain, light-coloured (preferably white) backgrounds. Other people like dark or mid-tone backgrounds, finding the pictures stand out better - I think they look unnatural, like looking at stained glass windows rather than pictures. If you do use a dark background, remember that many people find light text on a dark background much harder to read, so for anything other than large captions it is a good idea to put in white areas for text. There isn't any good way to use text on a mid-tone background - avoid it at all costs. Occasionally you can achieve good effects with background images - though again it is often best if these are mainly white.

Here are some rough examples I've sketched out for a typical photo site - I'll include some code for similar designs later in this feature.

A simple front page with all elements centred. In place of the graphic you would use one of your best pictures. The border represents the edge of the 750x550 pixel screen window.

This is simpler than it looks - partly because I've had to exaggerate some things so you can see them at this scale. Note the extended text (it should be much smaller) is confined to a column to enhance readability. The links are on the left so as to be more accessible on smaller screens .

Note again the use of the left hand column for navigation - the arrows would link to next and previous picture. The coloured rectangles show how the page will fit both portrait and landscape format pictures, though I would normally adjust the column width so the text under the picture is the same width as the image.

It is helpful to design thinking in terms of a rectangular grid on the page. Most elements - such as photographs - will be rectangular, and your text will normally be placed in rectangular blocks or columns, although the outlines of these will often not show. Essentially all web pages are based on a rectangular grid of pixels (it's how computer screens are), and at a higher level all elements on them are also rectangular, although they may be made to appear otherwise. You can for example create graphics of irregular shape within an otherwise transparent rectangle, or set out text with spacing that loses the rectangular effect. Simple text can be left justified, right justified or centred on the page or rectangle which contains it; to produce fully justified text is more difficult, but it can be done using styles.

Think carefully about how you use colour on your pages. Pick one or two colours for text and graphic elements and stick to them. Often two or three grays (keep them fairly dark for text) and/or shades of one colour are plenty, though if your site has distinct sections you might consider colour-coding them.

Fonts also need careful thought. In general the only real choice on the web is between Times (or an equivalent serif font) and Verdana (or a similar sans-serif face). Courier - like an old typewriter is also available, though largely only suited to special purposes, like displaying computer code. Perhaps you might use it if you are a photojournalist to give the idea of typed dispatches from around the world. Your machine may be packed with fonts, but normal html display relies on finding fonts on the machine displaying your site. The chances of a viewer having exactly the same Gill Sans Ultrabold that has taken your fancy are slim (if, like me, you have it installed you should notice it.)

There are ways to deliver fonts with your pages, but there are currently too many browser and system peculiarities to bother. For logos and titles, simply make your text in special fonts into gif format graphics. Don't do this for longer pieces of text - it is far too slow to download and makes editing your site difficult. In the example above, the photographer's name - Joan Smith - is a (bad) graphic, as is the word 'photographer' on the front page. (There are even some sites that use complete graphic fonts, downloaded letter by letter, to make up pages of text. Crazy but true - and often frustratingly slow to load.) If you want to display these text graphics on a background other than white you can make the background of the graphic image transparent. Photoshop has an easy to use 'wizard' for this - on the help menu in my version of the program, and you will find the facility in most other graphics software.

There are at least three ways of defining font sizes on web sites. If you want your designs to appear with correct font sizes in relation to your graphic elements, the only way to do this is to specify sizes in pixels. People who have worked with page design seem always take it as a badge of professionalism to work in points, but these just do not work properly on the web. Font sizes, colour and other properties are best handled using a style sheet so you can standardize their use through the whole site and make changes readily if needed simply by editing the style sheet.

When designing your pages, bear in mind the special needs of some users. Firstly, those on slow connections (and some power users) often surf with image display turned off in their browser, only loading those that they decide they want to see. It is also often an easier method for those with a visual handicap, who may use browsers that read text from the screen. Always test your pages without displaying images and see that they still make sense. Make use of the 'alt="text"' facility to display a short description of your images - this will be invisible to normal users unless they allow the mouse to hover over the image when it will pop up.

Source: photography.about.com