Design methodsDiscuss basic design concepts Apply lowest common denominator Define and indicate when appropriate to

use frames and menusCompare and contrast intrapage, intrasite

and intersite hyperlinksDiscuss the rationale for selecting linksDiscuss the role of volatility in web designApply the linkage matrix to web design

Lowest Common Denominator

Resolution Pixels: 640x480 (or less)

Color depth 256 (or less) Netscape palette: 216 colors Perhaps most applicable for non-

developed countries

640x480

800x600

1024x768

Elements in Creating a Web Site

Content text and artwork effectiveness and affectiveness something compelling

DesignProgramming

TextEffective

complete accurate easy to read clear useful to at least one defined audience concise

Balancing act

Text Hints

Be specific when it is to your advantage “We have been in business 26 years” vs

“We have been in business a long time”

Use active voice “You will receive a discount” vs.

“A discount will be given to you”Use logical groupings

location, alphabetic,time, etc

Text Hints (cont)

Layout (alignment)Typeface

limit to 2 or 3 on a pageType size

72 points in an inch 8 point type - minimum 12-18 point - bulk of screen

Color

Text Arrangement

Proximity volatility, relationship

Alignment centered for effect left aligned for standard columns for long passages

ContrastRepetition

Text: Contrast and Repetition

Identify focal pointMake differences starkAvoid underlining and boldfaceUse serif typeface for body and sans

serif for headersUse color for contrastUse repeated, consistent use of colors

Page FormattingMenus

fast to load columns (indented), tables

Hot regions (i.e., parts of store)Frames

i.e., menu, header, details allow for simultaneous display for all browsers supporting HTML 3.0 often need more screens and complex navigation

Home Pages

Greet usersHave catchy headlineGive overview of things to followInclude all company’s key informationList main areas you can go from thereDon’t put favorite sites on home pageDon’t ignore text-based Web users

Linkage and Web Design

Intrapage hyperlinks good for longer pages bookmarks

Intrasite hyperlinksIntersite, or free, hyperlinks

Intrasite LinksPurpose

Compose meaningful threads Provide links between business relationships Provide alternative to intrapage linkages (150 lines

upper limit/page; 2-3 screens/page)

Selection factors Ease of maintenance Use Load time (>15 secs) Number of screens, levels (<4)

Intersite Links

Search for free links should be accurate, complete,

related, compatibleAdd information for customerMust be checked periodicallyAvoid free links on home pageMay impact impression

Linkage RulesUse hyperlinks wellA page with no links or graphics is

boring Intrapage links with more than150 lines Intrapage links every 10-20 lines

Too many hyperlinks One or two links per paragraph 7 +/- 2 links per page (except lists or products)

Use linkage matrix

Linkage Guidelines

Be concise, direct and accurateConsider your sponsor’s needsConsider link colorsrelate to one or more specific

user groups (one or more threads)

More Hints for Creating Web SitesUse icons to create clear navigational paths

with a theme (but also include text-based links)

With storefronts, give your customers a way to pay order form toll-free telephone number fax line

Return button at bottom of each pagePut contact name,address at bottom

Hints for Using Multimedia on Web SitesThe use of multimedia should match the

needOnly use quality photos

use clipart, saved images (noncopyrighted) if photos aren’t good

cartoons are good for presenting socially taboo subjects

Use audio sparinglyDon’t use too much bandwidth

100K or less

Still More Hints for Using Multimedia on Web Sites

Still graphics logo on website smaller version of logo on main page avoid “angry fruit salad” don’t clutter

Moving graphics save movies at ftp site bullets and borders can attract attention use seasonal themes in bullets and borders

Steps in Creating Web PresentationsStoryboardingPrototypes

evaluating threads evaluating multimedia proving a design concept works

Walkthrough testing headings and hyperlinks scrolling (6x4 inches or 640-480 pixels) - try to keep everything on screen fully visible disclaimers, update and contact info