Amateur Web Design Tips

Good Website Design
Consistant Design
Background Colors & Images
Font Styles & Colors
Web Design Books

Web Design Mistakes
Website Music
Click Here Links
Disabled Functionality
More Web Design Mistakes

Web Design Examples
Excellent Squidoo Design
What NOT to Do!
Web Design Comparison
Comments & Suggestions

Every page in your website should use the same basic layout and color scheme. The header, navigation menu, and footer should be the same throughout the entire website.

Visit the Web Design Library for additional web design tips, tutorials and resources.

Create Your Own Template
The easiest way to create a consistent layout is to use the same template for every page that you create for your website. You can create your own template by saving your completed design in a read-only format. Now, every time you create a new page, simply open up this file and save it with an appropriate name.

Tips for Using a Template

• Make sure the new file is not read-only
  
• Don't move things around on your new page
  
• The only part that you should be changing is the actual content area.
  
• If you make changes to your original template, you will also need to make these changes to all of the pages that you have already created.
  

Use a Ready-Made Template
There are many websites out there that offer free and premium templates. Some of these sites even offer template installation services. Pay attention to the template ratings (if available). Here are a few popular web template companies to get you started.

Template Monster
Free Website Templates
WebsiteTemplates.com

Use CSS to Define Your Style
The easiest way to describe CSS (cascading style sheet) is that it is a set of instructions that tell your website how to format the different elements within it. CSS can be used for text formatting, layout and alignment, image styles, and so much more. The best thing about CSS is that it allows you to easily maintain consistency throughout your website.

For example, let's say that you decide that you want to change the color of all of the links in your site. Without CSS, you would have to go into every single page and manually change each and every link. If you are using CSS, you would simply open up the style sheet, change the color property for links, and save the file to the web. All of your links would now use the new color that you chose.

While CSS is way beyond the scope of this page, there are several excellent resources out there. Here are some of my favorites.

w3schools - How to use CSS
HTML.net - CSS Tutorial
CSS Video Tutorials

Use a Blog or Content Management System (CMS)
Blogs and content management systems are the perfect alternative for those that do not want to spend all of their time learning about HTML and CSS. There are several advantages to using either one of these systems for your website including, the structure and formatting for your site is built right into the system, you don't need to know HTML, and thousands of free and premium templates are available

WordPress
Joomla
Drupal

The first example shows black text on a colored background. In this case, there is not enought contrast between the background and the text, making the page more difficult to read.

If you wish to use color in your background, consider the second example. Here, the black text on white is easy to read, and the blue border add enough color to make the page visually appealing.

 
While the pink and white polka dots may not be for everyone, this site is a good example of how to use a background image. Notice how the content has a white background. If the content was place directly on the polka dots, it would be extremely hard to read. The main content area has a border around it, clearly defining the text area. And finally, the text is far enough away from the border.

Font style and color should be used in moderation. A web page like the one on the left is difficult to read. Your eyes are drawn to the yellow highlights and it is difficult to focus because there is so much going on.

A better alternative is the example on the right. The main heading is the largest and the sub-headings are emphasized with bold text. This allows the reader to easily flow through the contents of your page without distraction.

Link Text

The example to the left shows the default style for links and visited links. To avoid confusion, you should not use either of these styles for non-linked text.

More Font Tips for Your Website

1. Use the default font size for paragraph text. Your visitors can change the text size to suit their needs by using the setting in their browser.
    
2. Increase the font size for page and section headings. This will help to visually separate the different sections of a web page.
    
3. Use a sans serif font such as Verdana. It is easier to read on a computer monitor.
    
4. Avoid using decorative fonts. They may not display properly for all of your visitors.
    
5. Visit websites that you find visually appealing. Pay attention to how they use different font styles throughout their website.
    
6. Use font formats and styles in moderation.

Currently, Google has about 793,000,000 results for the words "click here".

Your link text is very important. First, and foremost, it helps your visitors decide if they are interested in following the link.

Next, and probably just as important, is search engine optimization. Search engines look at the "special text" within your site to determine how your site will rank for a particular keyword. This includes the text used in your links.

Finally, is the appearance of your website. A site with a bunch of blue "click here" links just doesn't look as professional as a site that takes the time to properly identify each link.

1. Right Clicking
Don't insult me by assuming that I plan to steal your images when I right click on your page. I like to use this function to access menu items such as print, email, view properties, and more. Besides, if I wanted to get copy your image, this method wouldn't even slow me down.

2. The Back Button
Do not prevent me from using the back button. That's just rude.

3. Exit Messages
When I click on an external link, or try to close the browser, please don't pop up a message that asks me if I really want to leave your site. If I didn't want to leave, I wouldn't try to leave.

4. Prevent Text Selection
I find this to be one of the most annoying on the internet. I like to select and copy phrases that want to google, I also select text when I am interupted, so I can easily figure out where I left off. Most importantly, I like to fidget with my mouse when I am reading something on the computer. I select things, then unselect them, then select something else, and so on.

The websites for this comparison were chosen because they both contain alot of information on the home page. While both sites could benefit from a little clutter control, I feel that the first site does a much better job of presenting a professional image.

• The different sections are clearly defined and contained using boxes.


• All of the boxes in the each column are the same width. This gives the site a cohesive look.


• I like the way that each coupon listing has an image and all of the listings are formatted the same, with the image on the left and the coupon code and descripon on the left.

• Each section on this site is a different size and shape, making the page look a little lopsided.


• The right column is nearly twice as long as the left column, again making the web site look lopsided.


• Currently, everything on the page is a link, with the exception of a few section headers. A short description could be added to each of the tips to extend the left column and even out the page a bit.