2. Unit 2: The Multimedia Development ProcessUnit 2: The Multimedia Development Process
IntroIntroMultimediaMultimedia
2
Unit OutlineUnit Outline
• In this unit, we will learn
– Stages of a Multimedia Project
• Planning and Costing
– Target Audience
– Flowcharts
– Storyboards
– Organizational Structures
– Site Maps
– Link Maps
– Navigational Structure
• Design and Production
• Testing
– Alpha Testing
– Beta Testing
• Delivery
3. Unit 2: The Multimedia Development ProcessUnit 2: The Multimedia Development Process
IntroIntroMultimediaMultimedia
3
IntroductionIntroduction
• Multimedia development is a project-based
process.
• Well-developed plan for multimedia product will
save
– time
– money
– multiple modifications
• The rule of thumb for
development is 80%
planning and 20%
production.
80% planning + 20% production
4. Unit 2: The Multimedia Development ProcessUnit 2: The Multimedia Development Process
IntroIntroMultimediaMultimedia
4
Stages of a Multimedia ProjectStages of a Multimedia Project
Stage 1
Planning and Costing
Stage 1
Planning and Costing
Stage 2
Design and Production
Stage 2
Design and Production
Stage 3
Testing
Stage 3
Testing
Stage 4
Delivery
Stage 4
Delivery Four stages of a
multimedia project
5. Unit 2: The Multimedia Development ProcessUnit 2: The Multimedia Development Process
IntroIntroMultimediaMultimedia
• Planning and costing
– Determine the messages and objectives of the project
– Identify how each message and objective may work
within the authoring system
– Before begin developing, plan what writing skills,
graphic art, music, video, and other multimedia
expertise will be required
– Develop a creative graphic look and feel, as well as a
structure and navigation system that will let the user
visit the messages and content
– Estimate the time needed to do all elements
– Prepare a budget
5
Stages of a MultimediaStages of a Multimedia
Project: OverviewProject: Overview
6. Unit 2: The Multimedia Development ProcessUnit 2: The Multimedia Development Process
IntroIntroMultimediaMultimedia
• Designing and producing
– Perform each of the planned tasks to create a finished
product
– There may be many feedback cycles with a client until
the client is happy
• Testing
– Always test the programs / applications to ensure they
meet the objectives of the project, they work properly
on the intended delivery platforms, and they meet the
needs of the client or end user
• Delivering
– Package and deliver the project to the end user
6
Stages of a MultimediaStages of a Multimedia
Project: OverviewProject: Overview
7. Unit 2: The Multimedia Development ProcessUnit 2: The Multimedia Development Process
IntroIntroMultimediaMultimedia
7
Planning and CostingPlanning and Costing
• To determine objectives / purposes of a project,
we may ask:
– How will users be using this product?
– What will users gain from this product?
– What types of features will be most useful to the
users?
– Why will users visit this web site (if the product is a
web site)?
– Which browser / platform will users use to access this
web site (if the product is a web site)?
8. Unit 2: The Multimedia Development ProcessUnit 2: The Multimedia Development Process
IntroIntroMultimediaMultimedia
8
Planning and CostingPlanning and Costing
• Target audience
– The designers should always focus on the user and
tailor product to meet the user’s needs and wants.
– The designer needs to get a clear picture about how
the target audience will use the product. This can be
accomplished through in-person interviews, online
surveys, and various focus groups.
– Users like to feel in control; give users opportunity to
choose or create their own experience.
– Categorization on audience might be useful. Examples:
age, gender, income range, language, nationality,
disability, computer literacy
9. Unit 2: The Multimedia Development ProcessUnit 2: The Multimedia Development Process
IntroIntroMultimediaMultimedia
Planning and CostingPlanning and Costing
• Target audience
9
Case Study
Product: A web site of an Italian café
Objective: Introduces tiramisu recipes
Target audience may be categorized as follows:
• People from Italy
• People from elsewhere in the world
• Experienced tiramisu cooks
• Inexperienced tiramisu cooks
SSelf-
elf-SStudy
tudy SSlide
lide
10. Unit 2: The Multimedia Development ProcessUnit 2: The Multimedia Development Process
IntroIntroMultimediaMultimedia
10
Planning and CostingPlanning and Costing
• A plan that outlines the required multimedia
expertise is prepared.
• A graphic template, the organizational structure
and the navigational system are developed.
• A time estimate, a manpower estimate and a
budget are prepared.
• Time, money, and people are the three
elements that can vary in project estimates.
11. Unit 2: The Multimedia Development ProcessUnit 2: The Multimedia Development Process
IntroIntroMultimediaMultimedia
Planning and CostingPlanning and Costing
• Critical Path Method (CPM) is used to calculate
the total duration of a project based upon each
identified task.
• Critical tasks are also identified using CPM.
• Critical tasks, if lengthened, will result in a
delay in project completion.
• CPM scheduling functions are usually included
in project management software.
11
12. Unit 2: The Multimedia Development ProcessUnit 2: The Multimedia Development Process
IntroIntroMultimediaMultimedia
Planning and CostingPlanning and Costing
• Program Evaluation Review Technique (PERT)
charts are used to show task relationships.
Prerequisites for each task can be observed
easily.
• A Gantt chart is used to illustrate the project
schedule by depicting all the tasks along a
timeline.
• Example of project
management software:
Microsoft Project
12
13. Unit 2: The Multimedia Development ProcessUnit 2: The Multimedia Development Process
IntroIntroMultimediaMultimedia
Planning and CostingPlanning and Costing
Task Duration (Weeks)
A 3
B 4
C 1
D 2
E 2
F 3
13
CPM
PERT
SSelf-
elf-SStudy
tudy SSlide
lide
14. Unit 2: The Multimedia Development ProcessUnit 2: The Multimedia Development Process
IntroIntroMultimediaMultimedia
14
Planning and CostingPlanning and Costing
Gantt Chart
SSelf-
elf-SStudy
tudy SSlide
lide
15. Unit 2: The Multimedia Development ProcessUnit 2: The Multimedia Development Process
IntroIntroMultimediaMultimedia
Planning and CostingPlanning and Costing
• Flowcharts
– provide a graphical
representation of how
the information within the
application is organized
and flows
– are used to illustrate
interactivity
– can be modified as the
application evolves
15
16. Unit 2: The Multimedia Development ProcessUnit 2: The Multimedia Development Process
IntroIntroMultimediaMultimedia
Planning and CostingPlanning and Costing
• Storyboards
– are diagrams showing the layouts of all screens
– describe the content and sequence of each screen
– specify how multimedia elements are positioned on
each screen
16
17. Unit 2: The Multimedia Development ProcessUnit 2: The Multimedia Development Process
IntroIntroMultimediaMultimedia
17
Planning and CostingPlanning and Costing
• Organizational structure is the way in which
information is organized.
• Four main types of organizational structure:
– Hierarchical organizational structure
– Nonlinear organizational structure
– Linear organizational structure
– Database-driven organizational structure
18. Unit 2: The Multimedia Development ProcessUnit 2: The Multimedia Development Process
IntroIntroMultimediaMultimedia
18
Planning and CostingPlanning and Costing
• Hierarchical organizational structure
– Top-down approach
– Sets and subsets of information form a hierarchy.
– Information is chunked down from most important or
general to least important.
– Can be “broad and shallow” or
“deep and narrow”
19. Unit 2: The Multimedia Development ProcessUnit 2: The Multimedia Development Process
IntroIntroMultimediaMultimedia
19
Planning and CostingPlanning and Costing
• A deep and narrow
hierarchical
organizational
structure provides
deep knowledge on
a few topics.
20. Unit 2: The Multimedia Development ProcessUnit 2: The Multimedia Development Process
IntroIntroMultimediaMultimedia
Planning and CostingPlanning and Costing
• A broad and shallow hierarchical organizational
structure provides a little information on many
topics.
20
21. Unit 2: The Multimedia Development ProcessUnit 2: The Multimedia Development Process
IntroIntroMultimediaMultimedia
21
Planning and CostingPlanning and Costing
• Nonlinear organizational structure:
– No prescribed or sequential path
– Information
is linked from
one discrete
piece of
information
to another.
Most information on the Web is read
nonsequentially, so most web sites use a nonlinear
organizational structure.
22. Unit 2: The Multimedia Development ProcessUnit 2: The Multimedia Development Process
IntroIntroMultimediaMultimedia
22
Planning and CostingPlanning and Costing
• Linear organizational structure:
– Traditional method of navigation with a set sequence
– Organizes information sequentially
– Examples: training sites, online slide shows
The linear organizational structure is an uncommon method
for organizing information on the Web because most web
sites have no set path or sequence that must be followed.
23. Unit 2: The Multimedia Development ProcessUnit 2: The Multimedia Development Process
IntroIntroMultimediaMultimedia
23
Planning and CostingPlanning and Costing
• Database-driven organizational structure
– Increasingly popular
– Large volume of short bits of information
– Sites that use internal search engines use databases.
– Examples: library, research, and e-commerce sites
Data
Containers
Any web site that includes an
internal search engine uses a
database-driven organizational
structure.
24. Unit 2: The Multimedia Development ProcessUnit 2: The Multimedia Development Process
IntroIntroMultimediaMultimedia
Planning and CostingPlanning and Costing
• Discrete and short bits of information are
appropriate for online viewing because very few
users will spend time reading long passages of
text onscreen.
• Inclusions of site maps and link maps are helpful
to users.
24
25. Unit 2: The Multimedia Development ProcessUnit 2: The Multimedia Development Process
IntroIntroMultimediaMultimedia
Planning and CostingPlanning and Costing
• Site Maps
– provide an overview of the organizational structure of
a multimedia application / web site
– can be used at the planning stage to help the designer
see the big picture
– are often included in the final products so users can
view the overall structure
– may be graphical in nature, or in a text-based menu
format
– Many web-authoring programs will generate site
maps.
25
SSelf-
elf-SStudy
tudy SSlide
lide
26. Unit 2: The Multimedia Development ProcessUnit 2: The Multimedia Development Process
IntroIntroMultimediaMultimedia
Planning and CostingPlanning and Costing
A site map provides an overview of the web site’s structure.
26
SSelf-
elf-SStudy
tudy SSlide
lide
27. Unit 2: The Multimedia Development ProcessUnit 2: The Multimedia Development Process
IntroIntroMultimediaMultimedia
Planning and CostingPlanning and Costing
• Link Maps
– illustrate the interconnectivity of web pages within the
web site as well as the links to external sites and all of
the multimedia elements included within the web site
27
A link map provides
an overview of the
web site’s links.
SSelf-
elf-SStudy
tudy SSlide
lide
28. Unit 2: The Multimedia Development ProcessUnit 2: The Multimedia Development Process
IntroIntroMultimediaMultimedia
Planning and CostingPlanning and Costing
• Navigational Structure
– The navigational structure is the means through which
the users will know where they are, where they have
been, and where they want to go.
– It’s imperative to offer simple, consistent navigation
available from every page.
– Frames divide the screen / page into multiple regions.
Normally, one region of the screen / page remains
constant.
– Navigational bars are found on many multimedia
applications / web sites.
28
29. Unit 2: The Multimedia Development ProcessUnit 2: The Multimedia Development Process
IntroIntroMultimediaMultimedia
Planning and CostingPlanning and Costing
• Navigational Structure
– Hub and spokes is a cumbersome navigation method,
which relies too heavily on the browser’s back button,
as the users must return to the home page to go to the
other pages of web site.
– With a search feature, users navigate directly to their
content of interest. The user can enter specific search
terms.
– The directed navigational structure is efficient because
the site becomes tailored to the user. The user is
asked to provide information when entering the site,
and then information is available to the user based on
their initial input.
29
30. Unit 2: The Multimedia Development ProcessUnit 2: The Multimedia Development Process
IntroIntroMultimediaMultimedia
Planning and CostingPlanning and Costing
This frame-based web
site uses the left frame to
establish a consistent
navigational structure that
remains constant from
screen to screen.
30
31. Unit 2: The Multimedia Development ProcessUnit 2: The Multimedia Development Process
IntroIntroMultimediaMultimedia
Planning and CostingPlanning and Costing
There are many different types of navigation bars, including text only, buttons, and
tabs.
31
The hub and spokes navigational structure should be avoided because it forces the
user to rely too heavily on the browser’s Back button.
32. Unit 2: The Multimedia Development ProcessUnit 2: The Multimedia Development Process
IntroIntroMultimediaMultimedia
Planning and CostingPlanning and Costing
Directed navigation makes choices
for the user based on the user’s
input.
32
33. Unit 2: The Multimedia Development ProcessUnit 2: The Multimedia Development Process
IntroIntroMultimediaMultimedia
33
Design and ProductionDesign and Production
• The structure and user interface
(1)
are designed,
implemented and continuously refined.
• Multimedia elements (text, graphics, animation,
sound, video) are created.
• Content is added.
• Scripts are added.
• The product is revised, based on the continuous
feedback received from the client.
(1) Issues about user interface will be discussed in Unit 3.
34. Unit 2: The Multimedia Development ProcessUnit 2: The Multimedia Development Process
IntroIntroMultimediaMultimedia
TestingTesting
• It is important to test and review a project to
ensure that:
– the product is bug-free, accurate, and operationally
and visually on target.
– the client's requirements have been met.
– the reputation of the developer/company is not
damaged by a premature or erroneous release.
34
35. Unit 2: The Multimedia Development ProcessUnit 2: The Multimedia Development Process
IntroIntroMultimediaMultimedia
35
TestingTesting
• Alpha testing
– An alpha release is the first working draft of a project
and is only for internal circulation.
– Alpha testing is usually done “in-house” by team
members.
– Alpha releases are expected to have problems or to
be incomplete.
36. Unit 2: The Multimedia Development ProcessUnit 2: The Multimedia Development Process
IntroIntroMultimediaMultimedia
36
TestingTesting
• Beta testing
– Beta testing is done with a wider array of testers.
– Beta testers should be representative of real users
and who were not involved with the actual production.
– Beta level bugs are typically less virulent than alpha
bugs.
– Managing beta test feedback is critical.
37. Unit 2: The Multimedia Development ProcessUnit 2: The Multimedia Development Process
IntroIntroMultimediaMultimedia
TestingTesting
• Terms that are used to indicate the version
status of the project:
– Bronze: close to being finished
– Release candidate: approach a gold master
– Gold master: nothing is left to change or correct; ready
for mass production
37
38. Unit 2: The Multimedia Development ProcessUnit 2: The Multimedia Development Process
IntroIntroMultimediaMultimedia
38
DeliveryDelivery
• The final project is packaged and delivered to
the end user.
• Delivering the project on an optical disc (e.g.:
CD-ROM, DVD-ROM) is the most popular
method among multimedia developers.
• Multimedia can also be delivered on the Web by
hosting the pages on a web server.
39. Unit 2: The Multimedia Development ProcessUnit 2: The Multimedia Development Process
IntroIntroMultimediaMultimedia
DeliveryDelivery
• Issues about delivery on the Web:
– Every web site on the Web has a numeric address
called an IP (Internet Protocol) address.
IP address example: 134.39.42.57
– The domain name system allows people to use easy-
to-remember names instead of long sequences of
numbers to get to specific web sites.
Domain name example: hkuspace.hku.hk
– A domain name is a powerful marketing tool. We
should select one that is easy to use and easy to
remember.
39
40. Unit 2: The Multimedia Development ProcessUnit 2: The Multimedia Development Process
IntroIntroMultimediaMultimedia
DeliveryDelivery
• Issues about delivery on the Web:
– Once designed and named, the web site must be
uploaded to a web server.
– We can buy a web server and host our site in-house,
or outsource to a web hosting company.
– There are some free web hosting sites available, but
many have limitations.
40
41. Unit 2: The Multimedia Development ProcessUnit 2: The Multimedia Development Process
IntroIntroMultimediaMultimedia
DeliveryDelivery
• Some considerations for web hosting:
– Storage space for web site
– Connection bandwidth
– Scripts and software to use to add features to the site
– Technical support
– Site administration
– Security keeps data secure from hackers
– Search engine registration service
41
42. Unit 2: The Multimedia Development ProcessUnit 2: The Multimedia Development Process
IntroIntroMultimediaMultimedia
ReferenceReference
• Part of this slide set is prepared or/and extracted
from the following book:
– Multimedia For The Web Revealed, Calleen Coorough & Jim
Shuman, Thomson Learning, 2006, ISBN:1-4188-3953-1
• This set of slides is for teaching purpose only.
• Self-study slide(s) is / are within the scope of the
final examination.
42