If you are building only a one or two or even three page (or personal) website, you do not really need to plan(though it would not harm to plan). But if your website contains ten plus pages, it would probably be to your advantage to plan.
What Your Visitors Want
When you visit a Web Site, you usually have a reason for going there. Even if you stumble upon that website accidentally, there is something there that grasps your attention and interests you.
Therefore, through out the whole planning process, you should consider what your visitors expect to see on your site. You should have a clear idea of which type your visitors are. For example, will they be old or young. If they are old, then you should make the design really simple and without the flashy flashy. If your target audience are kids, you could then include all the flashy flashy, without which they would not be attracted!.
So, you see, it is imperative that you have an idea of the type of your audience.
Site Organization
The most important thing in your website could be your site structure. May be, because of your clumsy structure, visitors leave your site. Therefore, it is necessary to have a structure that suits your site and is friendly for the visitors. Aww… why care about the visitors??? Because you have to! Otherwise you’ll be outta business!
There are two main types of organizational techniques, namely hierarchical and linear. Let us have a look at them now:
Hierarchical Organization
In this type of organization,all the pages (except for your home page), are grouped and are connected to the home page. The pages in the groups are connected to each other and they may be connected to the home page also, but the main page(or the home page) of that group should always be connected to the home page.
The home page is also connected to the main pages of each group and all the pages of each group are connected to the main page of that group This type of organization is suitable for websites which have a huge amount of content which can be divided into groups. The reader knows at every point his position on the website. However, it is not suitable to have too many groups as the reader may get confused.
Linear Organization
In this type of page organization, all the pages(including the homepage), are connected like the pages of a book - one page comes after another. This type of organization may be good for Do-It-Yourself type of websites, as steps often have to be followed in order. All the pages are connected in a “Back” and “Next” order. This type of page organization is good for several types of websites, but it limits the reader’s freedom of roaming around the site as he pleases. You could also add a “Home” link on every page to take the reader to the home page directly from each page.
A Mixture of Both
You could also use a mixture of both hierarchical and linear organization for your website.For example, the contents of your website could be divided into groups and the pages in each group could be connected to each other. This way, the reader would have more freedom to roam around your site.
Webbed Organization
This is another type of organization. In this type, several pages are connected to each other like a web. But too much use of this and your visitors could easily become disoriented and lost.
Navigation Tips
Navigation always will be a very important part of a website. Navigation can make or break the possibility of having more readers.
Unfortunately, navigation is the least of the worries of many webmasters. Bad navigation is also one of the main causes for declining or few visitors. Make sure you don’t fall in the trap! Do not confuse the reader with navigation
You cannot afford to lose your users in this way. You should, at every page of your website, let the user know where he or she is. One way of doing this is to use meaningful URLs. For example the URL to this tutorial is:
htmltheeasyway.com/basics/planning_and_design.shtml.
Anybody who sees this URL can tell that this page has to do something with planning and design of something. So it does not confuse the user. Now compare the above URL with this:
htmltheeasyway.com/b/122.aspx
Can you work out what the page is about?? Neither can I. Therefore, it pays to have meaningful URLs.
Another good way is to have a breadcrumb trail on the top of your pages.It is a textual representation of the site or directory structure, showing where the user currently is, so the user is not confused. We also have one on our site.
Keep it Simple
Yeah, you must keep it simple. Fancy JavaScript mouse-overs and mammoth size images only worsen the miseries of the reader! In addition, they also slow down the speed of loading, further disillusioning the user with your site.
Try to use text-links instead of images and use CSS mouseovers. CSS mouse-overs are a lot speedier than Javascript mouse-overs. Also, as much as possible, use simple text in place of images. For example, as I have done, you could use some clever bits of HTML and CSS to make simple text look like images. Look at the htmltheeasyway.com logo, for example, Using CSS, I have made it look like an image, but in reality, it is not!
Website Design
Believe me, website design can make or break a website. Too much of flash and mammoth sized images resulting in long load times and your users would rather sleep than wait for your site to load. Keep it simple and easy on the users. Here are some tips..
Page Design
When designing your pages, you should always try to make the user experience similar to the real world. For example, most languages like English are read in a left-to-right manner. So if your target audience is an English one, you should position your elements in such a way that your users do not feel much different. For example you could place the navigational menu to the top or the left of your page, etcetera.
Oh, yes, if your target audience’s language is one which is read right-to-left, such as Urdu, you could position your elements in a different manner, such as the navigation on the right, etcetera. So forget all those weird designs you have in mind and design for your target audience to make it easier for them.
One thing to remember, your visitors want to the see content that you have on offer, not to see how much you have decorated your website through flash and mouseovers and all that. Now by this I do not mean that you should not do any thing to make your site attractive, but you should try to remain in between the two extremes.
Now on to the actual design of your website’s pages. First make a vague(or as elaborate as you want) sketch on paper about what a page will basically look like. Then on a graphics program like Serif PhotoPlus, on a canvas of about 783 x 398 pixels(this is the minimum amount of free space on a 800 x 600 screen), draw the layout of your pages, with colour and all(What looks good on paper, will not necessarily look good on a computer screen, so it is best to design your site on the computer only). And then, through the help of this basic layout, begin to code your webpages.
Site Structure
The next important thing that you have to look into while designing your site is your site structure. You must decide which kind of organization to use on your site: hierarchical, linear or a mixture of both. I have explained all of these above. Before you begin on your site, you should have a clear idea on the type of structure to use. You can get a laydown on these three types above.