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
– 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