Designing a Good Web Site

Objective
To understand the basics of what to do and not to do on a web page

Step 1 The foundation

Understand your purpose
Who will view

Define the general results you want to achieve

Why you want people to view

What methods can be used to achieve the goals

Forms for data entry, catalogs, schedules, etc.

What are your visitors looking for?

Principles of User Interface Design

Layout Content awareness Aesthetics User experience Consistency Minimal user effort

Layout
The screen is often divided into three boxes Navigation area (top) Status area (bottom) Work area (middle) 3 Clicks rule

Content Awareness
Each web page should have an appropriate title. Menus should show where you are where you came from to get there It should be clear what information is within each area Use dates and version numbers to aid system users

Aesthetics
Interfaces need to be functional and inviting to use Avoid squeezing in too much, particularly for novice users Design text carefully
Be aware of font and size Avoid using all capital letters Avoid underlined words

More Aesthetics
Colors and patterns should be used carefully
Use colors to separate or categorize items Use only web-safe colors

User Experience
Do not assume the user will know how to do anything Examples:
Reach a particular page Use the Back button on the browser

Consistency
Enables users to predict what will happen Reduces learning curve Pertains to many different levels Navigation controls Terminology Report and form design

Minimal User Effort

Always remember the user is lazy. You need to attract his or her attention. Dont make the user scroll down too much and dont make it scroll on the side at all if possible.

Step 2: Text
Typeface: The most common typefaces found on both Macintosh & Windows are;
Times New Roman, Arial, & Verdana Dont count on all your users having other typefaces installed on their systems Use one of these typefaces for your body text

Pick a typeface for your web site & stick with it Add impact with GIF headlines sparingly set in complementary typefaces

More on Typefaces
The heading is the place to use a creative typeface. Typefaces must often be purchased Choose a headline typeface that breaks from the norm If a document needs to be printed, then Adobe Acrobat PDF is the best way to go.

Cascading Style Sheets

These style sheets may be used to achieve a higher level of control over type specifications.

Spelling and Grammar

Always check spelling and grammar.

Step 3 - Forms
Assign consistent names & values to each element used in the form. Elements are:
Checkboxes, Radio buttons, Text fields, Text areas, Drop-down menus, Scrolling lists, Hidden fields, Reset buttons, & Submit buttons

More on Forms
Forms should be:
Easy to navigate Precisely aligned Easy to read Self-explanatory Just the right size Checked for errors Not boring Polite Consistent in style

Step 4 - Color
The red, green, blue (RGB) color wheel is used to create all the colors. A hexadecimal code is used with the first 2 characters representing red, the second two green, and the last two blue.

Color Depth
Determined by a computers video card, video-display driver, & monitor either 24bit, 16-bit, or 256 colors can be displayed IE & Netscape have a common palette of 216 web safe colors that do not dither when viewed on different platforms You should use these colors, or blend these colors together in GIF images to form new colors

Readability
Your colors should be easy on the eye Usually a light background with dark print works best

Step 5 - Graphics
Identity graphics tell who you are Structural graphics form the shape of the page Navigational graphics provide a way from here to there Contextual graphics tie directly to page content Ornamental graphics embellish the page

More Graphics
Identity graphics, like a logo, should be in the exact same location & be the exact same size on every page. A picture is worth a thousand words if its the right picture. Photos may be downloaded from: www.corbisimages.com, www.eyewire.com, www.photodisc.com Check the fine print to be sure that you do not violate copyright law with any of your images, etc.

GIF or JPEG?
The GIF format is an indexed-color format. It should be used for solidcolor graphics, logos, line art, & cartoon-like illustrations. It produces the best compression on large areas of flat, contiguous color. Avoid using GIF for photographs. JPEG is used for photos & other artwork with many colors.

Backgrounds
Backgrounds are usually GIF files that are patterns, vertical stripes, horizontal stripes, or big images. When designing background images, remember to:
Ensure readability Avoid overly complex designs Never let them see your seams

In General
Design for the lowest common denominator for both browser & display resolution. The most important item on each page should be seen within the first 300 pixels never assume a visitor will scroll down.

Step 7 - Navigation
Your site MUST be easy to navigate. Use horizontal or vertical navigation?
Determine the number of static links that must be on every page Repeat at the bottom if they scroll out of site if necessary Where am I? Where have I been? Where can I go next Where's the Home Page Where's the Home Home Page

 No MMN (Mystery Meat Navigation) occurs when, in order to find specific pages in a site, the user must mouse over unmarked navigational "buttons" -- graphics that are usually blank or don't describe their function. JavaScript code then reveals what the real purpose of the button is and where it leads. MMN are only good in some specific cases

Frames
Frames allow for a flexible site. Certain items like headers & navigation remain intact as visitors jump from page to page. Each frame holds 1 individual web page A frameset holds all of your frames. Never use more than 4 frames. Each frames border, margins, width, height, scrollbars, & resizing can be set.

Step 8 Site Structure

Your web site is your virtual home. Be sure your visitors feel welcome. Search engines may link your visitors directly to any room in the house. Make sure they know where they are & can navigate easily no matter where they arrive. Sketch everything out on paper first!

Step 9 Be sure to:

Provide contact information with full details on every page, or with a constant link Provide information on whats new with the site & your company Provide company details to let them know who you are Never give just one way to reach a page. Larger sites need both a site map & a search facility. Give visitors an opportunity to send feedback & answer all inquiries.

And Always
Keep pages no wider than 800 pixels Break longer pages into separate shorter ones Remember that less is more dont go overboard Be sure to proofread! Use appropriate page titles (for search engines to find you) Keep your site fresh remove outdated information Make sure you have the proper Meta tags (and keep them updated)