Web site design

Web Site Design

Design for the Computer Medium

Craft for Look and Feel How the site works Personality Users create their own navigation

path

Make the Design Portable Site must work with multiple

browsers, operating systems and platforms

TEST, TEST, TEST Provide update links Consider your audience’s

technology

Design for Low Bandwidth Plan pages for a variety of

connection speeds It will several more years before

everyone has broadband Images 10 to 15 kb in size Most people will only wait 10 to 20

seconds for a page to load

Plan for Easy Access Most important factor in web site

success Make info. easy to find and get to Make multiple navigation paths Anticipate what user might do Put in direct links to frequently

used info.

Plan for Clear Presentation Make info. easy to read Break text up into easy to read

chunks Using contrasting colors People scan more online Put in plenty of headings Seven(plus or minus two) rule Use links to navigate long passages

Navigation is clear, easy to read

Contains sub-topics

Popular links on every page

Text legible onlineActive white space

Create a unified site design Choose colors, fonts, page layout,

graphics to fit your theme Pick a theme and stick to it

Plan smooth transitions Make the layout of each page the

same Use same colors and fonts Be consistent Put navigation in the same place

on each page The American Zoo

Use a grid for Visual Structure Create a template The GRID organizes the page in

columns and rows Use tables with borders turned off CSS will soon replace tables

layouts

Use active white space Blank areas on a page Can be any color Used to guide readers Active white space separates content Passive white space – page borders

and results of mismatches shapes Lack of white space makes page look

busy

Active White Space

PassiveWhite space

Design for the User Know your audience Use an online survey for feedback Consider the site’s purpose

Design for Interaction Will the user read or scan pages? Provide links to keywords inside

the text to be read

5

4

2

31

Design for Location

2

3

4

15

Guide the Users Eyes

Keep a Flat Hierarchy Don’t make users go through too

many layer to find info. Use the “three click” rule Use cues to guide users Example standard navigation bar

on every page Avoid getting users lost – site map

Use Power of Hypertext You can decide how users get to info. Place links within reading material –

This is often overlooked Avoid “ Click here” Use plenty of links for quick navigation Provide a table of contents hyperlinks

How Much Content is Enough? Don’t overload the user Provide enough navigation clues

for them to find what they want Split info. up into smaller chucks Use hyperlinks between chunks

Design for Accessibility Design for the physically challenged ADA (American Disabilities Act) Images and media intensive sites

thrawt this effort. Be aware of screen readers and

Braille translators Provide text on version of your site

W3c and WAI Web Accessibility Initiative Recommendations (a few) Use alt attribute Provide captioning for video Use text with links that makes

sense when read out loud Use Bobby www.cast.org/bobby

Design for the Screen Computer is landscape Screen is backlit. Light comes

through content. Use good contrasts Avoid dark on dark light on light Use 72 dpi for scans Use italics sparingly

Reformat Content for Online Presentation You are not creating a book Times New Roman is hard to read

on line