OVERVIEW

This tutorial will give basic information on best practices for web design. I'll flesh it out over time, but for now it will cover basics of site content organization and basic layout settings to create PSDs (Photoshop Documents) that are most easily translated into web sites. I'll separate this into two categories: content and presentation.

ORGANIZE IT

Have you ever noticed that you can go to good sites and know where to find everything right from the beginning? Even if you've never seen it before? That's because most people build sites in a similar way. Since most sites follow that pattern, you following it too will give people the feeling that they already know where everything is.

This isn't always the best way to organize things. I'm sure you've been to sites that aren't main stream but are still easy to navigate. The real principle at work here is organizing things clearly and logically. If you do that, you'll be fine. But for the sake of standardization I'll discuss the most common pattern here and you can apply these principles to other, more creative designs if you want.

STANDARD LAYOUTS

Almost every site will have its logo on the top that you can click to go to the home page. If you don't have one there, people will probably look for it and get frustrated.

Most sites organize their content basically like this: Home, About Us, Product/Expertise, Contact Us. The product/expertise section often has more than one menu items depending on what the particular site's all about. That is irrelevant. What is important is the organization that comes from the categories. Here is a detailed example:

The Home page should be simple but clear. When someone goes to your home page, they should know almost instantly what your company/site is all about. If you're a graphic designer, you could have a few of your favorite designs with text over the top saying that you're a designer. If you're selling products the home page should take your best, shortest sales pitch, and probably put it over an image of your product or a representation of it. The point is for people to have a clear idea of what you are, but be interested enough to stay on your site.

The About Us page should tell people who you are. Tell about your company or yourself. Include an image of yourself or your business. Tell people why they should care about you in relation to the point of your site.

Product/Expertise can be multiple links, like I said before. It should allow people quick access to the meat of your site. If you're a designer and you specialize in logos and web pages you could have one link be LOGOS and the other WEB PAGES. If the meat of your site can't be divided neatly into two categories, try to divide it into few enough so that people won't be overwhelmed reading your menu.

Contact Us is a way for people to get in touch or give some sort of feedback on what you have. If you've heard of WEB 2.0 that's what they're talking about. Today people like to be able to voice their opinions. The more interactive your site is, the more in tune you can be with the masses and the more loyal you'll get. This is one way to establish that.

Next time you go to a site pay attention to how it's organized. Check to see if it follows a similar format to this. If not pay attention to whether it has clear navigation or whether you find yourself confused trying to find information. You should notice that good sites follow the principles here, and bad sites don't.

The more complex the site, the more you should keep in mind what your main purpose is. Whatever it is should come up on most pages. Usually that means that there is a small column on the right side with featured content, or an interactive header that shows it, etc. etc.

KEY IDEA

If people don't like what your site looks like, they probably won't stay on it. They'll look for someone with a better looking site and the same content. There are probably hundreds of sites just like the one you'll be putting up so don't lose the traffic to poor design!

That doesn't mean that your site has to be graphically amazing. It just means that it shouldn't give people a headache to read and it should be organized neatly. Also it should fit on their screen.

HEACHACKES

Ever been to a site with an obnoxious background color? Or text that is impossible to read because it's yellow? Myspace is notorious for these kinds of layouts. Don't EVER do that. Right now the trend is towards white backgrounds with grey text. It's easy on the eyes. If you want it to be interesting change the color of header text or small portions. Not main content. Main content should be easy to read.

LAYOUT ORGANIZATION

All of your content should fit into boxes. The header should fit into a box above the menu, which should fit in a box above the main content. Paragraphs should all be organized the same way. The idea here is to keep things separate so that the actual coding of the site will be easier. At the same time it keeps the layout clean and helps people find their way around it easier.

Visually set your layout up so that people don't have to think to find their way around it. Separate paragraphs from titles and menus. You can do that by using margins or colors; just make sure the structure separates the content so that people know how the site is organized just by looking at it. If a visitor has to ask themselves where your menu is or where they have to read for actual content, you've failed.

Also, the smallest resolution you find commonly used today is 800px by 600px. Good layouts will keep the content width at 800px. The home page should fit within 600px, but it's okay to have bigger heights with content.

Another good practice is to use web standard fonts for the menus and content. That way you can use code to display them. Gradients are great for web pages as well as graphical elements that communicate visually what the text next to them, or on them, says.

Those are some basics, I'll put more up later.