How to Design a Great Web Site


If you're trapped in someone's frames click HERE to break out! 

Designing a good web page takes three basic talents...creativity, common sense and technical knowledge. Anyone can download a shareware HTML editor and throw a page on the web. If you want to have a site that people bookmark, one that you can be proud of, you have to make the commitment to learn the basics. After all, anything worth doing is worth doing right! 

Before we begin, let me just say that the the following information is based purely on my opinions and personal experience. The links, references and tips may be my favorites, but you've got to be willing to explore and experiment to find your own style! 

There are many, many pages on the net about the specifics of writing HTML code but this isn't one of them. Although I will give you some HTML code for a couple of special little tricks I've learned, this page is mainly focused on the design aspect of your page. My goal is to help you make your page as attractive and interesting as possible.    

  Learn how HTML works 
BEFORE you download that editor! 

I strongly recommend that you write your first page in a standard word processor like "Notepad" or "Word" or whatever else you use. I know there are lots of great programs out there to help you write pages, I'm using FrontPage right now to create this page you're reading. The problem is that no matter which page editing program you end up using, you always have to know how to fix the codes that your editor just can't fix by itself. 
 

When I first started learning HTML, I read a book called How to Use HTML3 by Scott Arpajian, published by Ziff Davis Press. Now I know what you're saying..."I can't learn anything from a darn computer book!" Well, we're in the same boat. I am not a fan of computer manuals either. This is more of a step by step tutoring session. There are pictures of EVERYTHING, every step you take is clearly explained in "real people" language.  Unfortunately, by now this book is pretty out dated and I'm not certain if you'll be able to find it.

He walks you through creating a web page from start to finish including forms, tables, and frames and even give you a taste of Java at the end. If you can find it in your public library on Friday, you'll probably have a web page on Monday. If you can't find it, (and don't want to buy it) then here are a few online ways to get started. They are not nearly as easy, but if you're persistent you'll get the same results.  
 

Crash Course on Writing HTML Good starting point, although it can be pretty dry reading. This is an older document using HTML 2 for people who are not interested in the finer points of writing codes. Use your word processor to test things while you read because if you're anything like me you'll never remember it just by reading this.  
 

The Bare Bones Guide to HTML This is one of the newest reference pages I've found. It is well done and has a nice complete list of HTML 3.2 tags HERE and their descriptions.  
 

Netscape's "Frames: An Introduction" Yes, it tells you all about writing frames, but to be honest, I had to have a friend help me learn by giving me some example code to play with. I just couldn't understand frames well enough by reading about them.  

The Art of Frames  Now THIS is a good place to learn frames! Unfortunately I found it after I needed it. It is where I send anyone now who needs frames help.  

The HTML Writer Guild Website a wonderful organization where experts answer questions from newbies. If you're serious about learning HTML or you just hit a snag and don't know how to fix it you've got to check this one out! 
 
  Write what you love 
 

What is it you love to do? What are you really good at? What makes you smile? I happen to love to design web pages and collect graphics which should be obvious by all the information in my WizHat site. This is the part of myself that I chose to share with the world. What will you share? It doesn't matter if it's cooking, scuba, engineering or telling jokes. Don't be afraid to be original but stick to what you know. 
 
 
  Color and design are just as important as content 
 

You have to face facts...this is the information age and there are too many interesting resources on the web for people to take the time to wade through a poorly laid out site. You could be telling the world the secret to eternal life but if it's black text on a standard gray background with standard blue links they will surf away before they get to the punch line. 

That doesn't mean you should put every graphic you can find in your page either...if the page is so full of graphics that it loads too slowly not many folks out there are patient enough to find out if it's worth the wait. Here are a few tips on design basics. Most are just plain common sense but I'd rather tell you something you already know, than leave out something you might need. 

Know what you like and stick to it...everyone has different tastes, the point of designing your page is to let your own personality come through. It's more important that YOU like your page  
 

Choose your background first...you can go with a solid color background (anything except gray, PLEASE!) or a textured background, but choose it first. The background you choose makes a big difference in your colors, graphics and text. It can save time, energy and frustration to get this decision over with first  
 

Keep the background simple...have you ever tried to read text on a psychedelic background? Gives you a headache, and I guarantee you won't be back. Fancy backgrounds are only useful to hide poor content.  
 

Decide on a color scheme...Light text on dark background, dark text on light background. Using the medium range of colors fade the text no matter if you use light or dark and makes your reader uncomfortable. I recommend using medium range colors only in pages with very little text, or very large bold text.  
 

Not TOO many colors of text...Keep your text (including link/visited link colors) to no more than four on any given page. Easier on the reader's eyes, and your graphics and background will provide plenty of color by themselves.  
 

Graphics rule #1: Quality over Quantity...If you fill your page with graphics just because you can, the page will load so slowly most people won't wait to see it, and even if they do wait you'll lose your message in the jumble of images.  
 
Graphics rule #2: Design your own graphics whenever possible...I realize that not all of us are graphic artists, or have the software capable of doing good, clean pictures. If you do have the capability to do some custom work, take the time to do it! At least do your own titles, it gets pretty boring to go from page to page and see the same graphics over and over.  
   

Graphics rule #3: Use transparent images...I have to admit that this is one of my pet peeves. Seeing that little colored box behind the picture ALWAYS detracts from the image you are trying to present. It's a very simple process to make an image transparent. If you don't already have software to make gif images transparent, try Gif Construction Set. Not only can you make single image graphics transparent, it's also a powerful animation tool.  
 
 

Graphics rule #4: Choose the right images for your page...Take the time to look for graphics that enhance your ideas. If your page is about cooking, search for graphics that show food items or cooking tools; if it's about scuba diving look for tropical fish or other sea life. I guarantee no matter what the subject is, you can find the right graphics to get your message to the reader in a lively way.  
 
 

Graphics Rule #5: Use Animation! (sparingly)...I love gif animation and you can use it as easily as a non-animated image with the same <IMG SRC> tag, but the files are larger than standard gif files. It's better to repeat a small number of really good animations throughout your page than force the surfer to wait on many different ones to load. Another danger with animations is confusion to the eye. If you have too much motion in a small space the human eye does not know where to focus and you'll lose your reader.  
 

Use blank space to your advantage...The blank areas on your page gives your visitor a chance to rest, separates important sections or ideas, and makes your graphics stand out.  
 
 
  Tables are useful for more than you think 
   

Tables are one of my favorites tools. They are a great way to sort and separate important data, and very easy for the eyes to focus on. Here are a few quick table tricks for you to try. 

Jump to the EXAMPLE PAGE to see what they look like: 

Use a table with no borders to make perfect columns...easier than trying to get images and text perfectly aligned with HTML tags alone. Playing with the number of columns and their width can give you lots of great effects that you can't get any other way.. 
 

Transparent tables vrs. color tables...Which type you choose mainly depends on your page's background and what you want inside the table. If you must use a "busy" background, using a colored table can make text readable. Color can also make a very eye catching "reverse image" to grab your visitor's attention. On the down side, not all browsers are going to recognize the color codes so it won't necessarily work for everyone 
 

Table as a picture frame...you can use a table with one column and one row to put a nice frame around any picture. Make sure you use a wider border (the example is set to 15) to make it look more like a true "frame". The down side is that you can only use this trick with one picture at a time, and you can't put anything to the left or right of the table. 

  How did they do that? 

Have you ever seen something really cool on another page and want to know how they did it? With Netscape, on the menu bar hit "View" then "Source" and it will show you all of the coding for the page your looking at. If it's a long code and you don't trust your memory (or pen and paper) you can exit the viewing screen and hit "File" and "Save As" and save the page as an HTML document on your hard drive. Then just cut and paste the code to your document, and adjust it the way you want it. Here are a few quick tips on some of the basics. 

Jump to the EXAMPLE PAGE to find the following: