Chapter 8 Multimedia Production · 2020. 12. 15. · multimedia production can easily involve a...

Chapter 8

Multimedia Production

Introduction

multimedia production can easily involve a host of people with specialized skills,e.g:◦ an art director,

◦ graphic designer,

◦ production artist,

◦ producer,

◦ project manager,

◦ writer,

◦ user interface designer,

◦ sound designer,

◦ videographer, and

◦ 3D and 2D animators,

◦ as well as programmers.

2

Team Members

Project manager◦ Responsible for delivering the product with promised

features, on time, and on budget.

◦ Oversees the business aspects of the development process.

◦ Must be organized, focused, and task oriented.

Project designer◦ Responsible for overall structure of content, the look, feel,

and functionality of user interface.

3

Team MembersContent expert◦ Has detailed understanding of the topic.

◦ Some projects may rely on the client to provide content for project.

Writers1. Create original text for the project.

2. Provide written requirements of the project such as documentation, contracts, help screens.

3. Technical writing skills are useful.

4

Media Specialists

Responsible for preparation of individual elements in a multimedia application.◦ Graphics specialist

◦ Artists skilled in design principles and most current digital technology.

◦ Sound specialist

◦ Trained in traditional sound production and has a working knowledge of a sound studio.

◦ Familiar with digital tools for creating and editing sounds.

5

Media Specialists

◦ Animation artist

◦ Understands the principles of composition and color and can produce drawings.

◦ Understands the elements of motion and can envision action sequences.

◦ Knows computer animation programs and techniques.

◦ Video specialist

◦ Videographers who have knowledge of film techniques, writing, sound, and digital video production and editing.

6

Media Specialists

◦ Programmer

Responsible for computer code that unites the media elements and provides the product's functionality.

◦ Acquisitions Specialist

◦ Knowledgeable about sources for copyright-protected content and process of securing permissions.

◦ Establishes agreements to protect the creative work of the project developers.

7

Production timeline

During the production timeline:

The programmer is involved when the project is about 40% complete

the design phase consists of:

◦ storyboarding,

◦ flowcharting,

◦ prototyping, and

◦ user testing, as well as

◦ a parallel production of media.

Programming and debugging phases would be carried out in consultation with marketing, and the distribution phase would follow.

8

Development Plan

Addresses three essential tasks:◦ Definition

◦ Design

◦ Production.

Progress markers or rewards are identified at each stage.

Deliverables are sent to the client as project takes shape.

Payment schedules often tied to deliverables.

9

STAGE 1: DEFINITION

Identify project goal or purpose.◦ What should the application accomplish?

Identify the audience.◦ Who are the intended users?

Identify role of multimedia in this project.

1-Advantages of multimedia to accomplish goal.

2-Media elements it requires.

3-Forms of interactivity to provide.

4-Delivery method and cost estimate.

10

Key Documents In Stage 1

Preliminary Proposal◦ Short description of the proposed application.

◦ Includes project goal, audience, outcomes, description of media, types and uses of interactivity, preliminary cost estimate.

◦ Often includes a flowchart.

◦ A simple box diagram with brief descriptions of product contents.

11

Key Documents In Stage 1

Storyboard◦ Series of sketches of major screens.

◦ Rough drawings of media elements such as photos, animations, or videos are sketched in.

◦ Navigational aides are identified.

◦ Used to:

◦ Communicate with the client during the definition stage

◦ Communicate project goals and requirements to the development team.

12

Key Documents In Stage 1

Functional specification◦ Detailed description of the elements and performance of

multimedia project.

◦ Basis of a detailed business contract.

◦ Developer and client understanding of what has been promised and the procedures to follow if changes are made in specifications.

13

Stage 2: Design

Purpose is to create an incomplete working model of the project—prototype.◦ First media elements are created.

◦ Interface is designed.

◦ Elements are combined to create the prototype.

Media Creation◦ Required media identified in a content inventory list.

◦ Media preproduction, production, postproduction are carried out.

14

Interface Design

User interface defines how user experiences the content on the screen.

Goal of interface design is to engage the user.◦ Must support the project goals, match the expectations and

abilities of audience.

◦ Should establish appropriate tone determined by style of media elements and controls.

15

Interface Design

Features of user interface◦ Intuitive.

◦ Immediately understood by the user.

◦ Common strategy is to use a metaphor.

◦ Consistent.

◦ Common backgrounds and consistent location of user controls.

◦ Predictable and reliable.

◦ Similar actions should produce similar results.

◦ Identical actions produce identical results.

16

Prototype

An incomplete working model of the final product.

Functions of prototype: 1. Refine the definition of the product

2. Test proposed features

3. Guide further work of team members.

Generally built in the authoring application that will produce final project.

17

Prototype (CONT.)

Used to test the product itself.1. Test proposals.

2. Test assumptions of definition and design stage.

3. Test product to see if it performs as anticipated.

4. Test navigation of product.

5. Obtain internal and external product review.

Guides subsequent work to complete the project.

18

Stage 3: Production

Remaining elements of product are created and integrated into the application.

Includes quality assurance testing with bug reports and corrective measures.◦ Alpha version: includes most media elements but also many

"bugs."

◦ Beta version: includes all media but still has a few bugs.

◦ Gold master: complete, bug-free application.

19

STAGE 3: PRODUCTION (Cont.)

Completion of release notes, manuals, and packaging.

Project materials are systematically archived. ◦ Archived files may resolve disputes between client and

developers.

◦ Project may need revisions that use archived files.

◦ Copyrighted materials may be used in future projects.

20

WARP UP

Multimedia development is a team effort.◦ Team members provide expertise in the varied disciplines

needed to complete the project.

◦ Process is interactive and iterative.

Development plan guides the process to keep production on task and on time.◦ Follows three major stages: Definition, Design, Production

21

StoryboardWhat do we mean by the term “Storyboarding”?

◦ “Storyboards are visual organizers, typically a series of illustrations displayed in sequence for the purpose of pre visualizing a video, web-based training, or interactive media sequence.”

What is its Purpose?What are your goals?

What is your presentation for?◦ To educate?◦ To sell?◦ To convince?◦ To inform?◦ To entertain?◦ Or a combination of the

above?

Who is your audience?

�Know your audience!

�Is it a serious matter?

�Can it be entertaining?

�Do they care about what you have to say?

�Once you know your audience, target your presentation to THEM.

Generate Ideas

Use your notes

Decide what you need and what you don’t need.

Do you need more info?

Based on your brainstorming session, make a plan.

Use your plan to design your presentation.

Decide what pictures or diagrams you will need and have a teammate create them.

Provides an overall rough outline of what the presentation will look like, including:◦ Which topics go where,◦ the links,◦ and a conceptual idea of

where your images go, and what the layout will look like.

You don't have to be able to draw to produce a storyboard. You need only sketch in the outlines.

Someone should be able to look at your storyboard and put together the same site you would have done.

The Storyboard actually begins life in the description of the goals of the project itself.

◦ The clients descriptions of their requirements can be divided into :

◦ the context of the application (metaphor(s))

◦ the content of the application

◦ the goals and anticipated outcomes of the project

◦ functionality additional to the standard interactivity controls provided for multimedia applications

◦ multimedia/hypermedia requirements

Storyboarding plays an important role in these areas in providing everyone, including the client, if there is one, with a common point of reference, to verify and validate structural and content elements.

◦ From this information an initial specification can be developed :

◦ described in film/video development as an application script

◦ outlines the project goals in terms of :

◦ development of context and context-related material

◦ incorporation of existing content

◦ identification of new content to be developed

◦ use of multimedia and hypermedia to support/provide context and content

◦ structure of the program can be described in terms of :

◦ standard interface components

◦ interactivity controls

◦ additional specific functionality

◦ describes anticipated outcomes in terms of :

◦ testing and evaluation strategy

◦ user acceptance testing

◦ From the initial specification, an outline can be developed:

◦ uses same basic technique as outlining content for an essay, identifying main sections of the content under specified heading, then identifying subsections and subsection headings within each section, and so on

◦ From the specification and the outline, a logic flow chart is developed :

◦ provides a map of the proposed system, to support multimedia authoring

◦ illustrates the choices available to the user from each screen

◦ The storyboard itself is a graphic representation of the proposed multimedia application:

◦ can use standard templates

◦ supports the development of hypermedia linking, at screen level

◦ provides a history of the development of the design of the application, through the production log

Examples

Examples

Information in Storyboardfollowing information must be included: ◦ A sketch or drawing of the screen, page, or frame.

◦ Color, placement, and size of graphics, if important.

◦ Actual text, if any, for each screen, page, or frame.*

◦ Color, size, and type of font, if there is text.

◦ Narration, if any.*

◦ Animation, if any.

◦ Video, if any.

◦ Audio, if any.

◦ Audience interaction, if any.

◦ Anything else the production crew needs to know.

The Advantages of Storyboarding

It helps catalyse feelings about the feasibility of the program idea. If the storyboard looks wrong, the program will too.

There is a document which everyone can point to as a common point of reference, enabling the design team (which includes the client) to say, 'Yes, that is what I meant', or 'No, we've a problem here'.

The storyboard helps focus on the total content of the program, both from the point of view of the overall size of the program, and in discussing user interaction times.

Problems may be spotted from the storyboard which may have proven more costly to correct at a later stage.

A detailed storyboard can save time in writing project documentation.

Advanced planning can result in templates for the content-writer to work with. This speeds up the content-writing process and makes the production of the storyboard itself so much faster.

Interaction/Navigation Design

The World Wide Web, by its very nature, encourages jumping from one site, from one page, from one thought, to another. It's all so easy

Reading a book is essentially a linear process. You start at the beginning and read to the end

With the advent of interactive hypertext, you can be reading a line of text on one page, and with the click of a button, be transferred to a cross referenced line of text on a site on the other side of the world

If things are where you expect them, they’re easy to find

The problem with knowledge is that it’s not made up of simple linear relationships. It’s a messy interrelated thing

Navigation Maps

A navigation map outlines the structure of the entire web project...showing all of the html pages and the connections from one page to others. It is useful for organizing and clearly seeing how material should be connected. The Navigation Map is similar to a storyboard, except that it doesn't provide detail as to the contents of the individual pages. Below are some examples of navigation maps.

Linear Structure

Hierarchical Structure

Non-Linear Structure

Composite/Hybrid Structure

Linear StructureThe web user navigates sequentially, moving from one page to the next.

Hierarchical StructureAnalogous to the branches of a tree. To move from top to bottom, one must move down one branch at a time...with more branches being available the lower you go. The structure is shaped by some natural logic.

Non-Linear StructureWeb users can navigate freely through the content of the web project, unbound by predetermined routes.

Composite/Hybrid Structure

For the most part users can navigate freely (as in the non-linear structure), but are occasionally constrained to a linear or hierarchical structure for some of the material.

Interaction StylesA dialogue between the computer and the user

Common interaction styles:◦ Command line interface

◦ Menus

◦ Natural language

◦ Question/answer and query dialog

◦ Form-fills and spreadsheets

◦ WIMP

◦ Point and click

◦ Three dimensional interfaces

Problems in Navigation❑Disorientation

❑Cognitive Overload

DisorientationSituation where user lost or they don’t know where they were within non-linear application. Sometimes this phenomenon also called lost in hyperspace

How to avoid◦ Limit the number of links

◦ Use global mapping, visual location pointer

◦ Create buttons to home or automated backtracking

Cognitive OverloadProblem arise when user is presented with too many hypertext (too many choices)

User will getting confuse which link to follow and could have some feeling of irritating

End up, user no longer favour to use the application

How to avoid:◦ Use of glossary for technical jargons

◦ Pop-up windows for glossary, help function

◦ Avoid putting to much hypertext within a single node (max 8)