31 October, 2007

Top 10 Noob Mistakes in Web Design

Well my noob mistakes in PHP tutorial was a success so i'm gonna try and write one for web design too :) but remember, anyone is welcome to write their own. And yes I know, my site isn't perfect, im just trying to help.

As before i'd like to state that these mistakes aren't statistical and just mistakes i see too often.

In reverse order, here they are.

10 - Animation

Animation generally does not work on webpages, if someone is trying to read something, the last thing they want is a little thing blinking or moving in the corner of their eye. So do not have little flash animations, animated gifs, or basically any unnecessary movement on your webpages.


9 - Backgrounds

Choose your background carefully, its normally not a good idea to have it as a photo, and especially not a small tiled photo. If you have a narrow, centered page, then maybe have a shadow effect or some grooves or something. Try and make it compliment the color of the content and nothing which will draw the attention of the reader too much.


8 - Site Ripping

I really don't like to see sites which are just copies or more popular sites. Sure, maybe take one or idea, or at most two, but do not copy the template, and do not try and immitate anyone elses site. This is bad for two reasons, one - people will think your a noob if they know anything about websites. And two - it's nice to have some individuality, and no ones gonna thing "this is a nice site" if it looks just like every other site.


7 - Alignment

This ones quite important, the human brain works in symetry and when theres a table or a piece of text that doesn't match the rest of the content, it sticks out like a sore thumb. Well you may think that only web designers are going to notice this, but it generally makes your site look tacky if you haven't gone to the extra effort to make everything fit.


6 - Text Spacing

If you have a block of text, it should always be paragraphed. It is sometimes difficult to read if it isn't and people can loose their place or just get frustrated and not bother reading it at all. Take this tutorial for example, i have spaced everything out into nice paragraphs which are easy to read and it isn't hard to browse through specific points. Would you honestly read this if it was one massive block of text? (And for those awkward people who say "yes" just to be annoying, 90% of people wouldn't :D )


5 - Advertising

Advertising can be a big problem, too many adverts is bad, but so is advert placing. Try to position your adverts descreet enough so they are not in the way (don't interupt users reading things) but also in places where they will notice them. And if you want to know about pop-ups, don't use them! They are the most annoying thing, even if you are getting payed a nice amount per user that gets one, many users will not return if they annoy them.


4 - Layout Spacing

Similar to text spacing, layout spacing is where there is not enough space in between each module and each different section on a page. If you have it nicely spaced, it is much easier to read and find what you are looking for. It also looks much more professional and neat.


3 - Text size, and color

Another important factor of a good site, readable text and appropriately sized. The main thing you should make sure with your text is that it's the right color. Black for light site, and white for a very dark site is usually fine but these are thing to avoid:

- Bright colored text (#ff0000, #00ff00, #0000ff) basically pure colors. Try and make them quite colorless, but not necessarily completely all the time.

- Menu text size; make your menu text size roughly the same as content text, maybe a bit bigger.

- Title text; it is generally not useful to have it that big, and i dont often have it underlined either, just bold.

- Fonts, use plain(ish) fonts, i always use verdana, but if you wanna use something different, make it simple. And make it consistant throughout the whole site.

Main thing is to have nice readable text that goes with the content, nothing too fancy.


2 - Too many effects

Masses of effects are bad, really bad. Try and keep your site, clean and simple. There is no need to have gradients everywhere and lots of images, with drop shadows and bevels on everything. Take this forum for example, nice and plain, very easy to navigate, generally really good. Im not saying don't use effects, just limit them.

The same goes for not enough, if you have a solid background, plain colors, no gradients, square corners, black text etc. Its just boring, the trick is to get it just right ;)


1 - Colors

Colors are the most important thing about a site. And again you need to get it just right, pick a color, and just use different shades of it for the style. And make the mild, like text coloring you do not want bright backgrounds and tables, it looks awful.

Greys, i personally avoid grey in any template (unless its extremely mild, or extremely dark). And do not have the whole template grey, it just looks dull and boring.

Black, be careful when using black, even dark sites normally don't have much pure black in them and with white text it looks really tacky (in my opinion).

I am sort of contradicting myself by saying this next part but, when i said "don't copy another site" there is one exception. It is alright to find a site which has a nice color scheme that works and then use similar colors, this will often work if you do not follow them exactly.


Final Note

Web design is a very tricky thing to get right, and even harder to end up with something everyone likes. You will often get a template that half of people love and the other half hate, but always try and get as many people liking it as possible.

When coding a site, try and use css so it easy to change the whole color scheme if it doesn't turn out the way you hoped.

If one person doesn't like how your site looks, don't let it put you off. The main thing is to ask yourself if you would use it if you were a user.

0 comments: