What is Multimedia?

Today’s objectives

Define multimedia Work with XHTML Work with CSS

Multimedia terms

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

What is Multimedia?

•Text

•Graphics

•Sound

•Animation

•Video

What is Multimedia?

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

Types of Multimedia?

• Linear multimedia

• Interactive multimedia

Structure of linear

Projects where users are given navigational

control are called non-linear or

user-interactive.

Non-Linearity

11

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

Creating & Delivering Multimedia

Creating & Delivering Multimedia

• 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

Examining hypermedia

Hypermedia Sites CNN. com

MSN. com

Rustin: http://www.pbs.org/pov/pov2002/brotheroutsider/

Blue Smoke coffee http://bluesmokecoffee.com/

Somerset Collection (http://www.thesomersetcollection.com/) (Color Wheel)

DNA: http://www.dnai.org/index.htm Click Genome -Tour – chromosome close up

Blues http://www.pbs.org/theblues/index.html

Don’t Click: http://www.dontclick.it/

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

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).

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

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”)

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.

Graphics

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

Color

• Appropriate color choices are used for site Kuler

• Color wheel, harmonius colors

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

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.

Stages of multimedia development

Stages of multimedia development

Basic Stages in a Multimedia project

Planning and Costing Designing and Producing Testing Delivering

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.

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

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

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

Tools to help plan

Wireframes Flowcharts

Sample flowcharts

Example 1

Flowchart 2

Symbols

Wireframes (usually sketches)

Example

Wireframe Example 2

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

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.

The Waterfall process: feedback problem?

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.

Typography

families Type (serif, san serif) Color Contrast Font size