Rocketface® Webmaster's Workshop
Designing A Website   
A beginners guide to building a classic website


Including the step-by-step webmasters tutorial
How to Design a Website

Home Sitemap Archive Index Privacy About Search AddThis Social Bookmark Button

Website Construction

by: Gene DeFazzio


Constructing the website

The techniques used in the construction of the physical site itself can add a professional touch to your work. This can be accomplished by the use of consistent elements throughout the site and the application of certain basic rules. Be sure to take these following elements into consideration when involved in your website construction.

Information Icon Professional Webpage Layout

HTML coding

Whether you use a web-authoring program or do all the HTML coding by hand, there are some basic steps to constructing a well-designed website layout. These steps begin with the intelligent design of the individual webpages.
Make your HTML coding easy to read by using indentations and comment tags. This will save you a lot of time when you need to edit your site.

Information Icon WYSIWYG Web Design Software - Which One is Best?

Have a plan for your website

You should have the layout of your pages planned, the graphics and photographs ready to go, and the website content determined. You know what order the pages will appear and how they will be linked...in other words, the navigation of your site. Make special note of the following :
  • Header elements such as a logo or title - these do not have to be the same size on all the pages, but should be the same design .

  • Common recognizable clues such as colored bullets and the same color and style of links .

  • Footer elements such as copyright and contact persons e-mail address .

  • A common graphics style - that is, don't use cartoon style images with photographic-quality graphics. Both are fine separately, but not together .

  • Margins for balance of the page just as you find in a book. (see white space)

Information Icon Web Development and Design Techniques

Putting it all together

Here is a recap of what a well-designed website should include;The first (index) page fits on screen in an area 640 - 740 pixels wide by 460 - 520 pixels high. This ensures that nearly every visitor to your introductory page will see the important information.

Note:
Always try to keeps things 740 pixels wide or less, simply because you want to design for the lowest common denominator or screen resolutions which by most standards is 800x600. Some people have less, going as low as 640x480, but to design for that just doesn't leave enough space to present a professional looking website.


  • Short text Lines (40-60 characters).

  • Short paragraphs (4-8 Lines).

  • Alt labels on all graphics.

  • Index or site map for large website.

  • Color coordination - including text Link colors.

  • Corresponding text Links for all graphic !inks - for those who are viewing sans graphics.

  • Quick download time.

  • Use of browser-safe color palette.

  • All other pages are designed for a width of 640 - 740 pixels; the length can be whatever is appropriate for the content.

  • Clear, easy-to-follow navigation.

  • Consistency from page to page - visitors will know they are still on the same website regardless of which page they are viewing.

  • Organization - of the information and of the website.

  • White space.

  • Contrast of text and background for easy reading.

  • Good object/text alignment.
There you have it. Follow these simple rules and your website will move up to the next level. Good Luck!

Information Icon Ten Steps to a Winning Home Page

Information Icon Must Know Tips For Redesigning Your Website The Right Way

Website Design for Beginners - Further Reading

Create a Professional Looking Website in One Day
Building a Multipurpose Website
Dos and Donts Guide to Great Web Design
Do You Know How To Create A Successful Web Site?
15 Fixes For A Failing Website
8 Ways To Improve Bad Website Design
Common Web Design Mistakes
Choosing A Professional and Reliable Web Host

Website Designing - Further Reading

Information Do You Know How To Create A Successful Web Site?
Information Icon All About Design Principles and Elements
Information Icon An Issue of Width - The Resolution Problem
Information Icon Critical Web Design Rules
Information Icon An Easy Way to Choose Attractive Color Combinations
Information Icon 8 Ways To Improve Bad Website Design
Information Designing Your Website - The Top Ten Pages to Include
Information Icon Visit the Webmasters Article Archive for further information on website design and webmastering.


Check out the webmasters article archive.
Copyright© 1999 - 2008
Rocketface® Graphics
Home Analyze Organize Develop Implement Maintain Site Map Index