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

Colors can go away

Colors can go away

Colors can go away

Colors can go away

Colors can go away

Colors can go away

•Colors can go away•Colors can go away•Colors can go away•Colors can go away•Colors can go away•Colors can go away

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.