Multimedia

Project Design

OVERVIEW
1. Strategies in designing
multimedia project
2. Designing a multimedia project

STRATEGIES FOR CREATING

INTERACTIVE MULTIMEDIA
Designing and building multimedia project.
Feedback loops and good communication between the design
and production effort.
Spends more effort in rendering the project

Methods chosen

scopes

size
style of the team

Detailed design- separated design team with

development team.

RENDERING
Renderingis the process of generating an image from
amodel, by means of computer programs.
The model is a description of three-dimensional objects in
a strictly defined language or data structure.
It would contain

geometry

viewpoint
texture
lightening
shading information
The image is adigital imageorraster graphic image.

DESIGNING MULTIMEDIA PROJECT

Requires

knowledge
computer skills
talent

graphics
arts
video
music

logical

ability to conceptualize
pathways

DESIGNING MULTIMEDIA PROJECT

Involves

thinking
choosing
making
doing

DESIGNING MULTIMEDIA PROJECT

Designing
Structure
The manner in which project material is organized has just
as great an impact on the viewer as the content itself.

User Interface
The user interface of a project is a blend of its graphic
elements and its navigation system.

DESIGNING THE STRUCTURE

Navigation maps
Architectural Drawing
Hotspots
Through
Hyperlinks
Image Maps
Icons and Buttons

NAVIGATION MAPS/SITE
MAPS
Done early in the planning phase.
Help organize the content and messages.
Provide a hierarchical table of contents and a chart of the
logical flow of the interactive interface.
Essentially non-linear.

Organizing
Structures

Linear

Hierarchical/
Liner with
branching

Users
Users navigate
navigate
sequentially,
sequentially, from
from
one
one frame
frame of
of
information
information to
to
another
another

Users
Users navigate
navigate
along
along the
the
branches
of
branches of aa tree
tree
structure
structure that
that is
is
shaped
by
the
shaped by the
natural
natural logic
logic of
of
the
content.
the content.

Non-linear

Composite

Users
Users navigate
navigate
freely
through
freely through the
the
content,
content, unbound
unbound
by
by predetermined
predetermined
routes.
routes.

Users
Users may
may
navigate
navigate nonnonlinearly,
but
linearly, but are
are
occasionally
occasionally
constrained
constrained to
to
linear
linear
presentations.
presentations.

Structures

TYPES OF SITE MAPS

DESIGNING THE STRUCTURE

Navigation maps
Architectural Drawing
Hotspots
Through
Hyperlinks
Image Maps
Icons and Buttons

ARCHITECTURAL
DRAWING
Storyboards and navigation maps.
Storyboards are linked to navigation maps during the
design process, and help to visualize the information
architecture.

STORYBOARD

Types of
Structure

Depth
structure

Surface
structure

Represents
Represents the
the
complete
complete navigation
navigation
map
map and
and describes
describes all
all
the
the links
links between
between all
all
the
the components
components of
of
the
the project.
project.

Represents
Represents the
the
structures
structures actually
actually
realized
realized by
by aa user
user
while
navigating
while navigating the
the
depth
depth structure.
structure.

DESIGNING THE STRUCTURE

Navigation maps
Architectural Drawing
Hotspots
Through
Hyperlinks
Image Maps
Icons and Buttons

HOTSPOTS
Add interactivity to a multimedia project.
Categories of hotspots
graphic
icon

text

The simplest hot spots on the Web are the

text anchors that link a document to other
documents.

DESIGNING THE STRUCTURE

Navigation maps
Architectural Drawing
Hotspots
Through
Hyperlinks
Image Maps
Icons and Buttons

HYPERLINKS
A hotspot that connects a viewer to
another part of the same document,
a different document, or another
Web site.

DESIGNING THE STRUCTURE

Navigation maps
Architectural Drawing
Hotspots
Through
Hyperlinks
Image Maps
Icons and Buttons

IMAGE MAPS
Larger images that are sectioned
into hot areas with associated links.

DESIGNING THE STRUCTURE

Navigation maps
Architectural Drawing
Hotspots
Through
Hyperlinks
Image Maps
Icons and Buttons

ICONS AND BUTTONS

Icons are fundamental graphic objects
symbolic of an activity or concept.
A graphic image that is a hotspot is
called a button.
Plug-ins such as Flash, Shockwave, or
JavaScripts enable users to create plain
or animated buttons.
Small JPEG or GIF images that are
themselves anchor links can also serve
as buttons on the Web.

DESIGNING THE USER INTERFACE

Is a blend of graphic elements and
navigation system.
Can contain plenty of navigational
power, which provides access to
content and tasks for users at all
levels.
The interface should be simple and
user-friendly.

GRAPHICAL USER
INTERFACES
The GUIs of Macintosh and Windows
are successful due to their simplicity,
consistency, and ease of use.
GUIs offer built-in help systems, and
provide standard patterns of activity
that produce the standard expected
results.

GRAPHICAL APPROACHES THAT WORK

Plenty of "non-information areas," or
white space in the screens.
Neatly executed contrasts.
Gradients.
Shadows.
Eye-grabbers.
Example

GRAPHICAL APPROACHES
TO AVOID
Clashes of color.
Busy screens.
Requiring more than two button clicks
to quit.
Too many numbers and words.
Too many substantive elements
presented
too quickly.
Example

AUDIO INTERFACE
A multimedia user interface can
include sound elements.
Sounds can be background music,
special effects for button clicks,
voice-overs, effects synced to
animation.
Always provide a toggle switch to
disable sound.

QUESTION?

~THANK YOU~