1. What is Multimedia?

2. Today’s objectives Define multimedia Work with XHTML Work with CSS

3. Multimedia terms Multimedia Multiple Media Linear multimedia Interactive multimedia Hypertext Hypermedia Graphical User Interface (GUI) Usability

4. What is Multimedia? Text Graphics Sound Animation Video

5. What is Multimedia? Multiple media (text, graphics, video, audio, animation, etc.) presented and controlled by a computer or electronic device.

6. Types of Multimedia? Linear multimedia Interactive multimedia

7. Structure of linear Projects where users are given navigational control are called non-linear or user-interactive. Non-Linearity 11

8. What is Multimedia? Any combination of two or more media, represented in a digital form, sufficiently well integrated to be presented via a single interface, or manipulated by a single computer program

9. Creating & Delivering Multimedia

10. Multimedia is created by MM developers Content makes Multimedia project The shipped product is a Multimedia title Developers use Authoring tools ( Flash, Dreamweaver) to create multimedia projects…Flash not used much…HTML5

11. Examining hypermedia

12. Hypermedia Sites CNN. com MSN. com Rustin: http://www.pbs.org/pov/pov2002/brotheroutsider/http://www.pbs.org/pov/pov2002/brotheroutsider/ Blue Smoke coffee http://bluesmokecoffee.com/http://bluesmokecoffee.com/ Somerset Collection (http://www.thesomersetcollection.com/) (Color Wheel) Somerset Collectionhttp://www.thesomersetcollection.com/Color Wheel DNA: http://www.dnai.org/index.htmhttp://www.dnai.org/index.htm Click Genome -Tour – chromosome close up Blues http://www.pbs.org/theblues/index.htmlhttp://www.pbs.org/theblues/index.html Don’t Click: http://www.dontclick.it/http://www.dontclick.it/

13. Architecture and Navigation 1. Architecture and Navigation 2. Layout and Design 3. Content 4. Graphics 5. Color 6. Typography 7. Error Tolerance 8. Platform and Implementation

14. Architecture and Navigation The site structure fits the purpose. There is good clarity of where you are in the site. There is good clarity of where you have been (bread crumbs) in the site (You know where you were ). Every page makes it clear which Web site you’re in. It is easy to find what you want. Navigation choices are logically ordered. Links are clearly indicated. The site map is useful. The user has control over navigation. The site functions robustly (e.g., no bad links or error messages).

15. Breadcrumbs From Hansel and Gretel who left trail of crumbs Make it easier for viewer to back up to a higher page Is called a secondary navigation method (What would be first ?) Use with large sites

16. Layout and Design Page size does not exceed window size. There is a consistent layout of pages. There is a clear focal point on each page. The layout works visually. Alignment is used effectively. Grouping is used effectively. There is good contrast. The layout is not cluttered. The layout is aesthetically pleasing. Scrolling is not excessive. (“Above the fold”)

17. Content/information The site avoids bias (cultural, gender, race) Text information is clear and concise. Text is organized in small chunks. No spelling or grammar errors. Introductory text on pages is useful. Directions on pages are useful. Multimedia components support the task. Date and time information is useful. Phone numbers/identity information are useful. Address/identity information was useful The site is motivating to users.

18. Graphics Image quality is adequate. Alternate text included for images. Are graphics useful? Is animations useful? Are there too many graphics?

19. Color Appropriate color choices are used for site KulerKuler Color wheel, harmonius colors

20. Typography Text is legible. Font sizes are large enough. Font colors are appropriate. Font contrast to background is sufficient. Text formatting (10 to 12 words per line) is appropriate. Margins are sufficient. Typefaces are used properly and consistently. Serif for headings, san serif for body

21. Platform and Implementation Load-time is fast enough. Does it load in 3 to 15 seconds? All the links work. There are no broken images. The site works with user’s browser. The site works with user’s hardware platform. Nonstandard plug-ins are NOT required.

22. Stages of multimedia development

23. Basic Stages in a Multimedia project Planning and Costing Designing and Producing Testing Delivering

24. Stages of a Multimedia Project Planning and costing: Develop an idea Needs of project are analyzed - outline its objectives,. Determine requirements A plan that outlines the required multimedia expertise (skills and resources) is prepared.

25. Stages of a Multimedia Project Planning and costing (continued): Graphic templates (flowchart, storyboards, wireframes ), the structure, and navigational system are developed. A time estimate and a budget are prepared. rate/hour (loaded rate) * hours A short prototype or proof-of-concept is prepared. May be in Photoshop

26. Objectives and goals: Examples Process Focused Goals:  Improve flexibility and ability to respond to Marketing initiatives.  Improve system accuracy and responsiveness.  Improve performance measurement and reporting capability.  Reduce administrative overhead and cost of commissioning.  Improve financial analysis, controls, and audit capability

27. Business Focused Goals and Objectives  Increase quality.  Reduce delivery time.  Reduce cost.  Implement changes faster

28. Tools to help plan Wireframes Flowcharts

29. Sample flowcharts Example 1

30. Flowchart 2

31. Symbols

32. Wireframes (usually sketches) Example

33. Wireframe Example 2 http://webdesignledger.com/inspiration/18-great-examples-of- sketched-ui-wireframes-and-mockups

34. Stages of a Multimedia Project Design and production: The planned tasks are performed to create a finished product. The product is revised, based on the continuous feedback received from the client.

35. The Waterfall process: feedback problem?

36. Stages of a Multimedia Project Testing – Test program to ensure that it meets objectives, works on the proposed delivery platforms, and meets client requirements. Delivery - The final project is packaged and delivered to the end user.

37. Typography families Type (serif, san serif) Color Contrast Font size