091003basicdesigngui..

Slide 1:Web Design and Development

Web Pages for the Real World

Slide 2:Areas to Consider

Color Scheme Readability Navigation Content Graphics Speed Universal Access Page Size Page Layout Site Structure .

Slide 3:Site Structure

Planning is the key Folder organization File naming 8.3 preferred scheme no spaces or symbols no caps or punctuation Webs with links to and fro Links to outside sites use target= attribute with value set to “_blank” .

Slide 4:Page Size

Minimum 800 x 600 fit most important information in area Standard 1024 x 768 maximum width, browser edges less scrolling ? ? 1 ½ pages max length less vertical scrolling better for printing e.g., 900-1100 pixel length .

Slide 5:Page Layout

Loads left to right Loads top to bottom Navigation: top & left (prefer text links) Most important text information at top (above fold) Body of text: top & left Logos & other graphics: right or further down page .

Slide 6:Navigation

Redundant placement left menu top and bottom of page within written text linked to images with alternative text, alt= Clearly visible Limit choices Use text labels No mystery meat!!! .

Slide 7:Color Scheme

Evokes emotion Sets tone Enhances look Adequate contrast Choose a palette Integrate links, backgrounds, text, borders, graphics and design elements .

Slide 8:Content

Relevant and related Accurate Original Depth and breadth Organized Links to other resources .

Slide 9:Readability

Easy to read fonts style (normal, bold…) color (contrast) size (default 3) Small blocks of text Concise sentences Bulleted/numbered lists Use <blockquote> Include some white space .

Slide 10:Speed (loading)

10 second limit More text, fewer graphics at first Link to multimedia 50k goal per page Consider access dial up, DSL, cable Optimize/compress files .

Slide 11:Universal Access

Special software for people with disabilities More text, fewer pix Larger fonts Less content per page “Alt” text on graphics Multiple versions of site.

Slide 12:Graphics

Limit file size Limit screen size link from thumbnails JPG for photos GIF for cartoons 72-96 dpi resolution Relevant Good quality!

Slide 13:Web Resources on Design

www.webmonkey.com www.visibone.com/colorlab www.webpagesthatsuck.com/ info.med.yale.edu/caim/manual/ www.coolhomepages.com/ www.useit.com/alertbox/9605.html www.htmlhelp.com/

Slide 14:Folder and File Management

In WCWork folder Add folder called “webdesign” In “webdesign” folder Add folder called “firstnamelastname” Add folder called “donotupload”