COM 205 Multimedia Applications St. Joseph’s College Fall 2003

Basic Software Design

Consider your audience Who? What? When? Where? How?

Technology Connection- 14.4K modems/ fast T1 Monitor size Don’t over use graphics – too slow Monitor size Put most important info at top of page Don’t clutter screen Don’t cause too much scrolling Browsers available Netscape Internet Explorer Plug-ins

Some Design Issues Speed ( of loading) Simplicity ( say more with less…) Clarity Consistency Easy of use Ease of navigation “Bells and Whistles”

Speed Should load quickly Choose text and graphics wisely Not too many bitmaps! Balance text and graphics Design for the disabled or those without graphics Use ALT tag in HTML Blind will hear description of image with synthesized speech Some may choose not to load graphics and can still understand the message

Simplicity and Clarity Use basic layout and themes Use only a few colors and fonts Choose clear consistent icons with universal meaning Include no more than 5 to 7 items on a menu

Consistency Provide and overview/summary screen Each link and page should have the same “look and feel”where possible Use same colors for hotlinks, etc…

Ease of Use Easy to read text and font size Use text appropriate to your audience Provide sense of “where you are” Check for dead ends- pages without links Use good navigational controls

Ease of Navigation Provide navigational controls ( back, next, home, top, bottom) Button bars are often helpful Include common links on each page Home Email Back, etc.

“Bells and Whistles” Animation should be meaningful not distracting Don’t go over board- one screen is not meant to contain ALL you know or have learned Use special effects where they enhance your message…

Interesting Resources Web Page Design Guides http://info.med.yale.edu/caim/manual http://hotwired.lycos.com/webmonkey/design/?tw=design http://www.killersites.com Virtual Computer Library http://www.utexas.edu/computer/vcl/www.html Animation http://hotwired.lycos.com/webmonkey/multimedia/animation/tutorials/tutorial1.html