I am web designer – someone who designs for the web but who spends more time implementing the designs of others.  The biggest bane of my working existence is having to implement designs from designers who are out to make websites “pop” with design, make the site “stand out” with design and who don’t follow some important rules.

Websites tend to be standardized in many ways due to the importance of:

• navigation
• visual clarity
• functionality

Since I get to implement those “stand out” designs, I can tell you what are the most important requirements for a website:

• content
• load time
• that clarity thing again, combined with ease of navigation

Based on that, here are rules for designing websites:

1. Perform a reality check – content drives a worthwhile website. No amount of design makes up for that.
2. Simplify – fancy images complicate execution, frequently require whole page backgrounds to implement and increase load time by ridiculous amounts. (Note: css divisions can only be in blocks and that does limit what’s possible and effective. This ain’t paper, folks.)
3. Clarify – the more elements or the busier the elements on a page, the harder it is for the visitor to be able to focus on what’s important.
4. Plan for functionality – either design for straight html or design for the script being used.  Determining what is going to be used and designing towards those possibilities only makes sense.  You, as a designer, are the not the one choosing or dictating site functionality. Don’t make me the bearer of bad tidings to the end customer: “Sorry, you may like that but you can’t have it without spending $200, $500, $1000 more to have it custom coded.”
5. Recognize the need for speed – I just completed 2 sites where the design included very large photos that even with optimization take a visibly long time to load on my second tier cable connection. Though I understand the need to impress when the site is selling real estate, don’t make the visitors wait. (How long do you wait for site to load – 5 seconds – 20 seconds?)
6. Skip movement – changing or flashing elements not only call attention to themselves but also distract the visitor. Got real message? Emphasize it with color, size or a different font within a graphic – or think a slowing moving jquery (not flash) to fade in images if it’s got to be there.
7. Standardize the fonts – web browsers can only display fonts that are on the person’s computer. And those same fonts can easily displayed differently on different operating systems.  I only use arial, helvetica, sans-serif or times, times roman, serif for the basic site font.  I might stick an element like h1 as verdana, arial, helvetica, sans-serif.  When you design a site with anything else, the client is going to expect to see that font on the website and lucida grande from a Mac does not cut it, folks.
8. Avoid the use of caps – without the up and down of lowercase letters, words are harder to read.  For something different, use a small caps rendition – all caps but with the capital letters larger.
9. Follow tradition design standards – if you have good training, you know it’s harder to read white on black.  That applies on the web as well. Remember that the older you get, the more important those standards get. – just because you can read it does not mean us oldsters can. So don’t use tiny fonts, reduce the clutter behind the text, etc.
10. Last but not least, show the client designs at an optimized 72 dpi so that they don’t expect perfect images on the web then deliver the psds at 72 dpi to whomever is doing the design implementation.