Site Search:

The Header

In the introduction, I touched on the sans-serif font idea. The basic concept here is that you want to use something that is as clean, easy to read, and easy on the eye as possible. Good fonts include Geneva, Arial, Helvetica, and the created-for-web font Verdana.

If you look on some of the better Free Font sites, you’ll find others that are just as suitable – my current favorite is called 7 Days, and is the one I used in this header.

Choose a sans-serif font and write the site title on a canvas about 240 x 50 pixels. Don’t put any spaces between the words, you want it to look as “dot-com” as possible. Make the first word bold and the second word a neutral color – gray or tan.

Save this image in two formats – Photoshop’s native .psd so you can further edit it if necessary, and gif, optimized for the web. This step is required for every image in this tutorial.

The Menu

The colors of your menu background should make your text stand out, and represent your site. Colors say a lot of things – if you’ve never looked into Color Theory, I highly recommend doing so if you’re going to design web sites. As a quick thought, though, look at it this way:

You obviously aren’t going to use pinks on a site that you want men to be attracted to, and you’re not likely to use a lot of black in a site about gardening. Instead, if you wanted to attract both men and women to your site you’d stay away from gender-specific tones and stick to yellows, dark blues, oranges, and reds. A site about gardening will make a greater impact using shades of green.

Next, keep in mind that the menu should be a background – for the style of design we’re using in this tutorial, all of the graphics should download extremely fast because there are so many of them. So, it’s important to use as much text links as possible. We aren’t creating a graphic navigation, we’re creating a backdrop.

Create a thin image like the one below, about 144 x 405 pixels. Use the Photoshop layers to create shape effects. Remember to keep it pretty simple – think like Microsoft. Clean shapes, no shadows, simple designs. This does more than download quickly – it makes it easy for the viewer to find what they’re looking for.

Subject Dividers

It is essential to make your site navigable. As the designer, it’s easy to forget that someone else doesn’t know how to get from spot A to spot B if you have created a button or indication that B is there.

The quickest way to create a user-friendly navigation, second to the menu navigation, is to set apart sections of your site with subject dividers. Using Photoshop to create the dividers, your end product will be crisp and clean looking.

Using two of the colors you have chosen for your menu scheme, create several subject dividers which represent areas of the site you are creating. For example, “Site News”, “Latest Product”, and “Newest Member” are some ideas. Don’t include something that doesn’t fit with your site, though. The size of the dividers above is 151 x 24 pixels.

Picture Icons

I have said a couple of times now that the hallmark of this style is the number of graphics, right? If we’re thinking like Microsoft, it’s easy to see the need for picture icons – where would you be without the formatting icons in Word? Or the little corner-top icons? It would be completely boring, and a good bit more complicated.

Keeping this in mind, think about the subjects of your site. It’s easy to find a site’s “download library” if the subject is accompanied by a picture of software.

Pick several graphics which represent your site and/or subject, and create 70x70 icons with them.

The Layout

Below are the dimensions for the page layout that these graphics will work best in. I won’t go into how they should be created, because it really depends on the html editor you use. I use Dreamweaver, and would create the layout using Dreamweaver’s “Layout Table” option. (If you want to do it the easy way, download the source files I used for this tutorial.)

Basically, regardless of the editor, you would start with a 3-cell table. The table’s width should be 630 pixels without borders or cell padding. The left-hand cell width will be the size of your menu image (144 pixels using the image size I gave earlier) and your right-hand cell will equal the width of your left-hand cell. Finally, you should have one long thin cell along the bottom of your layout that is 630 pixels for your redundant links.

This is a rough diagram (not sized) that shows what it should “look” like: