Download Lecture notes powerpoint

Web Design
Keep a Consistent Appearance
Visually show that the site is the same
Always use the same background
 Same graphic style
 Same type formatting

Ransom note effect can confuse the reader
Is this the same site?
 Adjusting to new formatting style

Design for Content
Cannot control how the user sees the page
Color can change
 Graphics can be turned off
 Browser window can vary

Paper can be tweaked, web pages cannot
Browser set wide
Browser set narrow
Wasted top half of screen
Introduction Page
Get reader oriented fast
Provide an overview
Keep all information visible
Has navigation information
Allow access to any point
 Never force linear reading

Minimize scrolling
Title and Nav not visible
Navigation is too far down
Graphics
Adds interest
Helps engage the reader
Can distract
First thing the reader sees
Animation is very distracting
Proper Use of Graphics
Same rules as used for paper documents
Use graphics that support the ideas
Reference figures in the text
Don’t let the reader interpret the graphic
Eye Candy Graphics
Copying Graphics on the Web
To save a graphic image:
Put the cursor over the image
 Right-click with the mouse
 Select “Save Image As…”
 Enter the filename (same place as your web
page files)

Tables on Web Pages
Main formatting method
Only way to get side by side text
 Navigation bars, etc all use tables

Not just data lists, like in paper docs
NOTE: tables do not resize
Don’t use tables to reproduce paper
Formatting with tables
Same page with table borders
Table Resize Problem
Developing Links
Links impose “Click Cost”
People evaluate cost of following the link
 Will it produce meaningful information

Link text must let people know why to click
Links Between and Within
Links are links are links
Can go between pages in a site
 Can go within one page
 Can go to a new site

Use “anchors” to give a place to link within
a page
Rules for Making Links
Keep link text length short
Make self-explanatory
Avoid too many in-line links
Don’t change default colors

People expect blue/purple combination
Why follow the link
Link references
Use of Color
Color draws the eye
Make sure color fits the context
Never flash colored text
Keep contrast high
Busy background images cause text to come
and go in the color changes
Examples of Colored Text
Colors can go away
Colors can go away
Colors can go away
Colors can go away
Colors can go away
Colors can go away
Colorscan
cangogoaway
away
•Colors
Colorscan
cangogoaway
away
•Colors
Colorscan
cangogoaway
away
•Colors
Colorscan
cangogoaway
away
•Colors
Colorscan
cangogoaway
away
•Colors
Colorscan
cangogoaway
away
•Colors
Text and Contrast
Structuring is the first crucial step in creating a good Online
Document. Structuring the document means sitting down and
deciding what how you want your document to be created.This
also means considering how the will look on the screen once
you have decided the final structure.According to Caroline
Drakely (Training 68), to effectively structure your document
you should create a checklist and use the following Structuring
the document means sitting down and deciding what how you
want your document to be created.This also means considering
how the will look on the screen once you have decided the final
structure.According to Caroline Drakely (Training 68), to
effectively structure your
Kewl Background
Design Tip
Keep all text and graphics in same folder
Graphics and text are stored as separate files
 Each page on a site is a separate file

Never drag and drop graphics. This will
link to the original page.
Know the design before you start.
Making changes is very tedious.