Designing a Good Web Site

8/6/2019 Designing a Good Web Site

http://slidepdf.com/reader/full/designing-a-good-web-site 1/31

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.

•

Don’t make the user scroll down toomuch and don’t make it scroll on the

side at all if possible.



Step 2: Text

• Typeface: The most common typefacesfound on both Macintosh & Windows are; – Times New Roman, Arial, & Verdana – Don’t 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 andgrammar.



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, thesecond two green, and the last two

blue.



Color Depth

• Determined by a computer’s video card,video-display driver, & monitor – either 24-bit, 16-bit, or 256 colors can be displayed

•

IE & Netscape have a common palette of 216web safe colors that do not dither whenviewed on different platforms

• You should use these colors, or blend these

colors together in GIF images to form newcolors



Readability

• Your colors should be easy on the eye

• Usually a light background with darkprint works best



Step 5 - Graphics

• Identity graphics – tell who you are

• Structural graphics – form the shapeof the page

• Navigational graphics – provide a wayfrom 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 onevery page.

• A picture is worth a thousand words – if it’s 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.

http://www.corbisimages.com/

http://www.eyewire.com/

http://www.photodisc.com/

http://www.photodisc.com/

http://www.eyewire.com/

http://www.corbisimages.com/



GIF or JPEG?

• The GIF format is an indexed-color

format. It should be used for solid-

color graphics, logos, line art, &

cartoon-like illustrations. It producesthe 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 thatare 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 nextWhere's the Home PageWhere'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 unmarkednavigational "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 frame’s 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 what’s new with thesite & your company

• Provide company details to let them knowwho 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 – don’t go

overboard• Be sure to proofread!

• Use appropriate page titles (for searchengines to find you)

• Keep your site fresh – remove outdatedinformation

• Make sure you have the proper Meta tags(and keep them updated)

Designing a Good Web Site

Documents

Transcript of Designing a Good Web Site