Website Design

Site Design and Layout - Laying Foundations

Design

If, like me, you're "graphically challenged" in the design field, you may not have given much thought to the design of your site. Hey, as long as you can read it, right? Wrong.

The good news is that even if you have all the drawing skills of a man with his hands tied together, you can still get a site together that looks at least as good as this one does.

You've really got two choices here. Either you need a decent design program (no, Windows Paint won't do, I'm afraid) like Adobe Photoshop or my personal choice, PaintShop Pro. Or you could just use a lot of linkware backgrounds and graphics that you found on the web. There are some beautiful sets on offer out there, but I prefer to make my own.

Backgrounds and graphics

Your choice of background and graphics will say a lot about your site. As a rule, seamless tiled backgrounds in very pale colours are the easiest to work with, and take up less space and therefore download more quickly. Whether you use a background with a border or not is up to you, and really depends on what you want it to say about the site. Personally I prefer a background without a border, but I have seen some very nice ones on offer.

Your graphics should be appropriate to the theme of the page, and preferably optimised for loading speed without sacrificing quality. This means that images should generally be no larger than 20-25kb tops. If you're having trouble optimising your graphics, NetMechanic.com have an excellent online tool for this.

I cannot stress enough that images should match the theme of the page and the site. Yes, that little animated kitty does look sweet, but does it really belong on your page about victims of drink-driving? No.

Which brings me to...

Animations

Unless your page is a collection of animated graphics for use, or aimed towards children, you should be very wary of animations. They are very slow to load if, like a huge number of people, you're surfing on a modem. One on a page can look nice and bring some life to it. More than that is usually overkill. I have come across sites where every graphic on every page was animated. And when they finally loaded they added nothing to the page that a static graphic wouldn't have added.

The same thing goes for cursor trails and little java applets such as moving clocks, bars that tell me where I'm from (and always get it wrong), lake applets, falling snowflakes, drifting hearts, etc. Yes, they do look cute when they first pop up on a page. After 30 seconds they become seriously annoying. Don't get me wrong, these things have their place - on pages celebrating a wedding, birthday, holidays, they are fine, because those pages are probably only going to be seen by a few of your friends and family. On a page that is intended for public viewing, they are only going to put visitors off.

Top

Colour

Colour can be one of the things that makes or breaks your site. Your site should generally have one or two main colours that it uses (black and white don't count). All colours on your site should then be variations on these colours.

Look around this site. You'll notice that at Safe Haven Awards we really only use two colours, which are blue/green and tan. The backgrounds are dark sage. The links are highlighted in green or blue, depending on which part of the page they appear on. The scrollbars are in sage with a tan highlight. (If you're viewing on Internet Explorer, that is. Other browsers don't support this function yet.)

Try to avoid switching backgrounds from page to page - it will confuse and disorient your visitors. Pick one you like, and stick with it!

Text, fonts and layout

Text should be laid out in a way that's easy to read. Well, duh! Obviously! Okay, I know it sounds self-evident, but it's really not (can't be, judging by the number of sites I come across where I have immense difficulty reading the text).

Ever wondered why books are printed with black ink on white paper? Because that's the easiest text form to read. But it does look a little lifeless, granted. So we need a nice background to bring things to life! Hey, let's have... neon pink! No, let's not. You need to decide whether you're going to have a dark background with light text, or vice versa. Yes, a light background with dark text will be easiest to read, but you can get away with a dark background if you pick your text colour carefully. White on black will induce eye-strain - the safest colours to use are pastels.

Also, have you ever wondered why books print text justified to the left? Well, that's also because it's the easiest to read. And there's an optimum length line, too - you really don't want your text to go longer than 600 pixels, or your readers' eyes will be getting tired. So keep it left-justified, and use margins well.

Margin use, or "white space", also helps to make your website look more user-friendly. Nothing is more off-putting than lines and lines of closely packed text - looks like a school textbook, and people will be out of your site quickly. So break up your text into manageable pieces with margins and paragraph breaks.

We should also talk about fonts. A sans-serif font, like Arial, Verdana or Tahoma, is the easiest to read. Serif fonts like Times New Roman should only be used for large-point text, such as section headings. And don't forget that your visitors will only have the standard Windows or Mac fonts installed - so while your page may look wonderful to you all set out in Tempus Sans ITC, everyone else will see it in their default font. That's why it's wise to specify a family of fonts in your coding. For example, the font for Safe Haven Awards is Verdana. Most people will see it in this font, but for those who may not have Verdana, the page will default to either Arial or Tahoma, one of which they are bound to have. I have set this property in the stylesheets for the site - but that's something we'll talk about later.

[Back] :: [Top] :: [Next]