Web site design is a vast topic and it’s not possible to cover everything in one article or even a handful of them. Having said that, this page will introduce you (an aspiring web designer?) to the interesting topic of designing a web site and point you to other resources and articles.
I want to state one thing clearly at the beginning – the topic we shall be discussing is how to design a web site and not how to create one. If you came here looking for information on the latter, I suggest you read how to create a web site or details on making your own web site.
Sponsored Links
Before we start on the actual process of designing a web site, here are some cautionary words of wisdom not just from me but from the “gurus” of web site usability and design.
Web surfers (this includes you) are an impatient lot and they can size up a web page in less than 10 seconds. Though the visual aspects of a web site design are important, DO NOT be obsessive about them.
Trying to come up with the most beautiful design will simply delay the launching of your web site. Your prospective visitors, including potential buyers, would be more interested in the information on the site than anything else. Which means you can completely shun the notion of embedding background music and the likes unless, of course, it’s demanded by the content. Pay more attention to web site usability aspects – helping the visitor locate the desired information.
Put your thoughts on paper
Nothing works better than a bunch of plain papers and a pencil to get started with designing a web site… trust me! Make a rough sketch of the structure of web site. Don’t draw the layout – we’ll come to that in a moment – just put the web site structure in place. For a large web site with more than a hundred or so pages, I strongly suggest you segregate them into sections. These sections can serve as subdivisions of the web site and need to be linked from each page.
Understanding the web site design template
Most web sites that one comes across follow certain design conventions. The logo along with other common elements are paced generally at the top section which is referred to as the masthead. The text and / or multimedia content are placed in the middle of the page. There is also a web site navigation bar which can be horizontal or vertical or sometimes at both places. The footer at the bottom contains the copyright notice and links to other important pages. It is generally recommended that all web pages on a site conform to the same design template; expecting, maybe the web site homepage.
Design the layout web site
Now that you have decided on the structure, take a fresh drawing paper and design the layout of the web site. You need to create a basic design template for the web pages. The content you want to put on the web site would dictate the template; for example, a shopping cart web site would probably be quite different in design than one which offers a lot of detailed technical text. Most web site layouts are column based – you can have one, two or three columns. A web site layout with more than three columns would lead to a very confusing design unless the content fits in well.
The content is usually placed in the widest column. The main web site navigation or sub section navigation bars are placed in the extreme left and right columns. One of these columns is sometimes also reserved for ad banners or eye-catching elements.
Important #1: Though the use of wider monitors is increasing, there are still about 5% people using 800×600 screen resolution. For such visitors, a web site design that is more than 780 pixels will result in horizontal scrolling. You can always have a “liquid” web site design template (refer below) which will change depending on the width of the monitor but that has its own problems – refer below.
Important #2: If there is a lot of text content on your web pages, ensure that the width of the column that contains this is less than 600 pixels. I suggest you stick to a smaller value of 500 pixels but it depends on the number of vertical columns you plan to have in the design. FYI, web surfers find it difficult to read text that has been displayed in a section that’s wider than 600 pixels. Why? Because it’s kind of hard to spot the beginning of the next line.
Width of the web page
You can either create your design template with a fixed width or make it “liquid” which means that the web page width will change depending on the monitor screen resolution. However, liquid design has a big drawback. On very wide screens the content of the column that holds the text might increase beyond the 600 pixels standard limit unless of course that has been fixed.
Color aspects of web site design
This is a very vast subject because choosing color schemes for your web site is dictated by many factors including your (or your boss’) personal preference. Do select visually appealing colors that complement your brand and your business motto. Use foreground and background colors judiciously – you can never go wrong with dark (black) text on a light (white) background, right?
Web usability
Does your design template and web site layout makes it easy for visitors to locate information and pages? Remember the golden 3-click rule: Any web page on your site should be reached from another page with a maximum of 3 clicks. Though this is not much of an issue for small web sites, it might be hard to apply for a large site with hundreds of pages. However, remember good internal linking not only helps human visitors but also search engine bots (below); so the efforts you make in implementing the 3-click rule on large web sites will pay off well.
Web accessibility
Make sure that your design template is accessible to everyone including those with visual impairment. Avoid excessive use of images. I agree “a picture is worth more than a thousand words” but please use graphics only when required – it would be a great idea to jell them into the content. Keep your design template simple which will make it effective!
Visually appealing design but is it search engine friendly?
Though this should not concern you directly (at least not immediately), you need to understand the technical and functional aspects of the web site. Agreed that a web site should be designed mainly for humans but let us not forget the automated search engine bots. Use text in place of images, and this is especially applicable to those who insist on creating web page headings in fancy fonts.
Put proper text links in the navigation bars – do not have images as navigation links. FYI, you can create really fancy navigation bars using CSS (this is a tip for your web programmer). Using JavaScript based drop down dynamic menus will not help your cause when it comes to search engine optimization. Do away with such bells and whistles or create similar kind of menus with CSS.
Guess, this is enough to get you started in designing a web site for your personal or business use. Best of luck and keep reading more because this is one field that changes really fast!
