Web Design & Web Site Design Guidelines

Web Site Design Overview

Web site design is the first step. Before you can determine your web site's requirements in step 2 or select a proper host in step 4 you must first decide what your web site is going to look like and what it is going to contain.

Note: Step 3 (domain name selection) can be done before or during the web design phase, if desired.

Web site design concerns encompass a wide range of factors to be considered and evaluated with regard to their effectiveness in supporting your web site's objectives. These may include, but are not limited to:

• Content
  Text, writing style, page layout, continuity of web site, navigation logic.
  
  
• Artistic Effect
  Proper use of graphic images, psychology of colors, photos, web site fonts and sound.
  
  
• Performance
  Page loading time, browser compatability.

Note: This is where you decide WHAT you want, not how you want it done. It is important not to concern yourself with the implementation details at this point including whether or not you will need to learn HTML. But, FYI, knowledge of HTML will not be necessary unless you decide in Step 2 to code the web site yourself, and then only if you decide to use a non-WYSIWYG editor. If you code it yourself with an ASCII or HTML (non-WYSIWYG) editor you must learn basic HTML and probably, depending upon your requirements, some CSS and JavaScript as well.

Web Site Design Expert Guidelines

Design Guidelines
Web design guidelines from HitBox.

The Foundations of Web Design
Web site design guidelines from Lycos.

Basics of Design Proper
Web design guidelines from Dmitry Kirsanov.

What Do You Have to Offer?
More web design tips from HitBox.

Good and Bad Web Design Features
Web site design pro's and con's.

Design Your Web Site

1. Decide Scope of Features
   Produce a checklist of web site features that you want your web site to have. Visit web sites of similar purpose to generate ideas for your own. Determine the degree of web site sophistication needed and the scope of user interaction that will be provided, e.g., online credit card processing, shopping carts, bulletin boards, chat rooms, site search, etc.



2. Decide Page Layout & Navigation Scheme
   Estimate the total number of web pages and name and define the purpose for each one. Plan the positioning and contents of the pages common areas - headers, footers and sidelinks. Also, decide upon a navigation scheme that will be consistent throughout the website. This may be as simple as a static set of side links on every page or as sophisticated as a pulldown cascading menu system which becomes more detailed as you go deeper into the site. Visit web sites of similar purpose or surf the internet freely to generate ideas of your own and be sure to consider the use of free web design templates.



3. Determine Keywords
   Do your keyword analysis now to determine your most effective primary and secondary keyword phrases with respect to search engine positioning.



4. Draft the Content
   Produce the text content that will appear on each page. Review the rules for incorporating keyword phrases into page content and the specific concerns relative to writing for the internet before beginning.



5. Decide Artistic Enhancement
   Plan the artistic aspects; graphics, animations and text appearances. Check out the free web design templates for ideas.
• Psychology of Colors
• Font Selection
• Performance Considerations

The Three (3) Levels of Web Site Design Sophistication

• Basic
  All websites, whether Personal, Hobbyist, Organization or Small Business, have some or all of the basic ingredients.
  
  
• Database Driven
  Websites can also have a backend database for storing and dynamically displaying various types of data.
  
  
• Multimedia
  Websites can also have a multimedia enhanced appeal. This is entertaining but is not always effective, depending on your websites purpose. The user may not want to be bothered by a lot of intrusive and time consuming flashiness.

Determine the Most Effective Keyword Phrases for your Website

GoTo.com
This tool can be used to obtain the frequency with which specific keyword phrases were searched on in the last month. It allows you to see what keyword phrases users are actually entering into the search engines and it ranks them according to frequency. Throw a few keywords at it and see what it can tell you. Select the most popular, yet relevant, user keyword phrases as the main keyword phrases of your web page(s). Do this analysis for every page that you consider important and unique enough to warrant submission to the search engines. Usually this is only your index page.


Here is a similar yet more accurate tool.



In addition, the following links provide a more sophisticated analysis of what constitutes well selected primary and secondary keyword phrases ...

Finding the Perfect Keywords
Expert Sumantra Roy factors in the number of existing pages which are already using a particular keyword phrase with the frequency data provided above to produce an "effectivity" index for determining the best keywords.

Focus Your Keywords
Successful web site promotion...

The Keyword Susser
Provides a convenient interface to the GoTo.com database of user entered keywords. Allows you to submit a list of keyword phrases and analyses their popularity.

Keywords Database Sites
Determine the most popular keywords in use at these FREE sites.

Rules for Incorporating Keyword Phrases into Page Content

Power up Your Traffic with Search Engines

"... Think of one or two main keywords for your site, and make them appear 5-6 times each on your front page ..."

"... Some search engines will look for 'keyword density', meaning how far apart the keywords appear. Some will only look at the first 200 characters of your site, and count the number of times the keyword appears. Others will index a bit from the top, middle, and bottom parts of your website, and search them for keywords. Generally keyword density should be in the 2-3% range..."

Keyword Density Analyzer
Free online tool to test your pages for keyword(s) density.

Web Design Writing Styles

Writing for the Web
Writing aspect of web design.

What is good hypertext writing?
More web site design writing concerns.

W3C Style Guide for Online Hypertext
"... This guide is designed to help you create a WWW hypertext database that effectively communicates your knowledge to the reader ..."

Good Business Documents
How to write for the INTRAnet.

Modern Language Association (MLA) Guide to Style
More about writing and web site design.

Yale Style Manual-Table of Contents
More about writing and web design.

Psychology of Colors

(see also Color Charts)

In General

Color Matters
"... Color plays a vitally important role in the world in which we live. Color can sway thinking, change actions, and cause reactions. It can irritate or soothe your eyes, raise your blood pressure or suppress your appetite ..."

The Psychology of Color
"... The power of color is something that most people are unaware of ..."

Psychology of Color
"... Colour Psychology covers the colour preferences of different people, such as children, adolescents, normal and abnormal groups ..."

with Regard to Websites...

Use Smart Colour on your Website

The Psychology of Website Colors

Choosing Web Site Colors

Web Color Guidelines

Selecting Fonts

Fond About Fonts

How to Choose the Right Fonts for Your Web Pages

Free Web Design Templates

These templates can be downloaded for free. If they are what you are looking for you save a lot of time.

FreeWebTemplates.com
Get free website templates and page layouts, flash templates, business templates and more.

FreeSources.net

FrontPageThemes.Shop

Free web site design templates
from JimWORLD.

Art For The Web
Free graphics by Art for the web.

Hiring a Web Designer

Go to our Web Designer Costs and Selection Guidelines page.

Performance Considerations

Site Optimization Tutorial

The 60-second Battle

Samples of Good and Bad Web Sites

Samples of Good and Bad Web Sites

Story Big Blue Tops Among Computer-Maker Sites

Web Pages That Suck

Ecommerce Specific Concerns

Other Expert Advice

WebMonkey - Design Topics

DMOZ - Top> Computers> Internet> WWW

Dr. Jakob Nielsen - Alertbox Archive - articles on usability
Google - Computers > Internet > WWW

Back to top