Designing a Web Site

(That Entices Visitors Instead of Repelling Them)

By Hasmita Chander

 

Creating a Web site, for me, is a bit like indulging in my favorite hobbies: playing with colors, drawing, and writing. If it's a personal Web site, all the more fun. A Web site is like a multimedia canvas that you can paint on with words, pictures, sound, and interactivity! You can experiment with color combinations, fonts, buttons, navigation&emdash;it's a long list!

At the same time, of course, nothing is too much fun if there are no restrictions. Imagine writing words so freely that they are no longer a comprehensible language, or experimenting with different media in painting so unthinkingly that you put in too much sand and the canvas tears as you paint. Well, you get the idea. And if you don't know the restrictions, there could be blatant errors that you're unaware of, which is sad after all the enthusiastic effort.

Hue and Design

The first thing that comes to mind while planning the design for a new Web site is color. Keep the colors gentle so that they don't hurt your reader's eyes. At the same time, maintain enough contrast between the background and text colors to ensure readability. Interestingly, the combination of black text on a white background that does so well in the print medium isn't a great choice for the Web. White is the brightest color, so when the background is white, the monitor glares more than usual.

Next thing that you think about, probably, is style. Keep in mind your target audience. Maybe you're creating a Web site for your home office, or maybe it's a marketing display for your hobby: making scale models of motorbikes. Think of the people you want visiting, and design the overall look accordingly. For example, a site with snazzy graphics and curvy navigation bars could be great for a peppy personal site, but not so great for a site on home décor! If you're stuck for ideas for the look and feel of your site, an excellent site to visit is Lynda.com (www.lynda.com/resources/inspiration/index.html). Lynda has a collection of sites chosen for interesting designs in various aspects like colors, navigation, simplicity, roll-overs, and typography&emdash;truly inspiring.

The Temptation&emdash;Trinkets

With all the generous people on the Web, there's a lot being given away free&emdash;attractive, covetable stuff like buttons (imprinted with Web address, e-mail, etc.), bullets, animated GIFs, and horizontal rules. Top 20 Free (www.top20free.com) is a jump-off point to sites that offer freebies of all kinds, including Web graphics. For animated icons and buttons, try www.animfactory.com. There's nothing wrong with using some of these as long as you don't go overboard. Maintain a uniform look, use a particular combination of colors throughout, and save the other six animated GIFs for the next time. Some people like to redesign their sites every year or so. If you're one of them, you could use a different set of trinkets with every redesign!

Fonts are another collection of pretties that often can't be used. The reason is, not everyone has the same set of fonts. They possibly even use a different type of computer, say, a PC instead of  your Mac/UNIX-based system. If the visitor's computer doesn't have the font you've used, it will substitute one that it has. If this doesn't matter much to your design, fine&emdash;some of the TrueType fonts look quite similar. But if you don't want this substitution to happen, you could use one of these common TrueType fonts: Arial, Verdana, Times New Roman, and Courier&emdash;they are supported by most computers.

The good news is that you don't have to give up the fancy fonts completely. You can use them by making them into graphics. Type the text using the font you like in a graphics application (e.g. Jasc Paint Shop Pro) and save the image. Use these for titles and headings. 1001 Free Fonts (www.1001freefonts.com) has a good collection of PC and Mac fonts available for download. You can find links to more such sites from Top 20 Free. Do note, however, that most of these freebie-offering sites state in their terms and conditions that you can use their stuff for free only for non-commercial purposes.

Steering Through It

Navigation is the process of retrieving the information you've put on your site&emdash;the way people move from one page to another. The best designs have simple and intuitive navigation. Let users keep track of where they are by highlighting the particular section name or with a title on the page. The user should always be able to get to the Home page (the first page) without getting lost.

As far as possible, minimize the depth of your links, that is, the number of clicks it takes to get to some section of the site. For example, a three-level click would be like this: To get to your photos, the user has to click Personal > Family > Photos. Instead, keep the Photos link in the Personal section itself. Single-level clicks are best, but two-level clicks are OK if you have ample information to offer.

If you're making a Web site, naturally you'll have links to the various pages or sections. But where do you put them?

Put the main links on the Home page. Keep them in a frame if you have several sections. Then the links will be available all the time. (This way you don't have to provide a Back or Home button on every page.) Don't let the frames for the links be too numerous or too wide, or the main content will be squashed into a tiny area.

I recently came across the site of an established company that had this problem. Though the content was interesting, I had to copy it into Notepad to read offline. Reading it online was like crouching in a low tunnel. Claustrophobic!

The Bottleneck&emdash;Speed

Heavy graphics mean a lengthy loading time, and people who are browsing the Web are often impatient. Use graphics only where nothing else will do the job better. Prefer a small tileable background to a large single piece. Using frames for the parts of the page that remain constant helps speed up things, since those parts don't need to be loaded every time the user clicks on a link.

Especially take care while uploading scanned photographs. Scan the photos at a resolution of 72&endash;100 dpi instead of the usual 300 dpi (that's for print), and make sure that the photo is visible on an 800x600 pixel monitor resolution without having to scroll.

Web page creation software usually lets you resize images, but this is only pseudo resizing. The software stores only the original image. While uploading, it loads the bigger image, then resizes it and displays it. This means that the storage size, as well as the loading time, is more than what it should be for the displayed size of the image. For true resizing, use an image editor to proportionately scale down the image before you incorporate it into your site.

Final Touches

OK, you have the text, the links, and the pictures. Satisfied? What? You want to add sound as well? Can be done. So long as you know why you want it there. If you want to share sound clips, or a recording of your little one talking, go right ahead&emdash;no substitute for that. No, you say you want to put in some "atmosphere music"? You can, you sure can, everything is possible with a computer, but . . . what if the user is not a big fan of Deep Purple? Right, she can just turn off her computer speakers and listen to her own silly music on a CD player!

Once you've got everything you want on the site (including "Smoke on the Water"), you might like some feedback to see how well you've designed it. For this, try the Website Garage (websitegarage.netscape.com/O=wsg). The Website Garage tests your Web site and tells you how you could improve it. Some of the things it checks for are whether the page loads quickly enough, if there are any dead links (links that don't lead anywhere because of an error in typing out the link location), if the site is search-engine ready, and so on.

Webmonkey (http://hotwired.lycos.com/webmonkey) is a good reference site, attractively designed, for Web site designers of all levels of experience. You could go here for any help or questions you have while designing your site.

Once you know what to avoid and where to find things you need, creating a Web site is a lot of fun. And you don't need to be a techie to do it either! So, to your computers and let the fun begin!


ComputerEdge - May 24, 2002