Multi media

1
Multi media

• Flow charts and Storyboards

2
Creating Flow Charts
Identify each main topic. Identify and Group
together smaller sub-topics. Based upon the
content, draw the order or sequencing of the
Product. Make sure each topic is
labeled. Systematically go through the
sequencing.
Evaluate, Refine and Make Modifications as you
go.
3
Creating Flow Charts

• Flow Charts provide a VISUAL representation of
  the sequence and structure of the product.
• Different types of Flow Chart structures include
• Linear
• Tree
• Star

Main Topic
Home
Games
Hot Links
email
Star Structured Flow Chart
Slide 3
Slide 1
Slide 2
Linear Flow Chart
4
Linear Flow Chart
Slide 1
Slide 2
Slide 3
Linear Flow Charts depict presentations with a
specific sequence of step by step
procedures. They usually go Forward or
Backward. Power Point is a classic example for a
linear flow chart.
5
Tree Structure Flow Chart
Family Pets
Dogs
Cats
Reptiles
History
Breeds
History
Breeds
History
Breeds

• Tree Structures are appropriate when a Main topic
  branches into several other Sub topics.
• Movement options usually allow users to branch
• Forward
• Backward
• Previous
• Main Topic

6
Star Structures

• Star structures are used when one idea branches
  into several other single ideas.
• Web pages and hypermedia programs are usually
  designed with a Star format.
• Users may navigate in a variety of directions.
  In most instances, users may branch
• Forward
• Backward
• Main Menu

Quiz
Home
Games
Hot Links
email
Subject Matter
7
Storyboarding

• Storyboarding is exactly what it sounds like.
  Consider the approach taken from the film
  industry...
• The writers or directors produce a storyboard for
  the movies they want to make.
• Each scene is depicted with the actors, their
  movements, the camera positions etc in enough
  detail that the crew know what to set up.
• This approach can be used for multimedia or any
  form of design.

8
Creating Storyboards
Storyboards enable you to create a mock up of the
multimedia project BEFORE committing to anything!
Storyboards provide the supporting details for
each screen Text Bullets Audio Files
Colors Video Files Animations Graphics
Font type and Size DETAILS DETAILS DETAILS!!! T
est out the presentation on paper first! Its
easy to make changes with the Story Boards.
9
Storyboarding

• You sketch out every page or screen of the
  presentation, highlighting interactions and
  components such as
• Description of page
• Text and narration content
• Graphics
• Video including voice-over script
• 3D/animation
• Audio
• Links to from
• Any external programs

10
Storyboarding
11
Creating Storyboards

• Advantages of storyboarding
• The designer is forced to think visually to
  convey the message.
• The storyboard is flexible, allowing designers
  to rearrange ideas.
• It can be used to show the flow between scenes,
  enabling the multimedia author to keep track of
  the action during development.
• The storyboard can be shown to the client for
  approval before committing to development of the
  product.

12
Creating Storyboards

• Annotate the drawings
• show where animations will occur,
• indicate which sound files will play and where,
• add any other effects (transitions, text effects
  etc.).
• Add detail
• add an indication of colour to the background and
  the text,
• describe text fonts/styles.
• Produce a document fit to show a user/client
• attractive,
• clear,
• gets the message across!

13
Creating Storyboards

• Collect the tools
• a very large sheet of paper or card, or
• several smaller sheets,
• pen or pencil, coloured pens.
• Represent the components
• Sketch the components that will be displayed on
  each screen, including text (rough sketches will
  do for a first draft).
• Add the navigation structure
• draw the buttons,
• show the links (e.g. with arrows or numbered
  screens)

14
Storyboard/navigation combinations

• Combines slide information with navigation
  information
• Lacks detail due to size
• Use it as a minimum level

15
Navigation maps

• Show the linking between pages
• Could also indicate the different elements
  (linked video/sounds)

16
Flow Charts Screen Designs Storyboards
Title
Quiz
Graphic
Questions
Back
Forward
Home
Games
Hot Links
2. Screen Designs
email
Subject Matter
Specify Layouts Specify Fonts Details Flow and
Order Colors Sounds and other effects
1. Flow Chart
3. Storyboards
17
What Makes a Good Multimedia Presentation Design?

• The design must be Clear and Eye Catching.
• The user needs to be able to quickly grasp
• understand what is being presented.
• The message must be clear, focused and
  concise.
• Combine high quality graphical images, easy
  to use navigation tools and logical
  presentation of
• material.
• Pay attention to the multimedia navigation,
• presentation organisation and consistency
  between
• pages.

18
Overall Design Considerations
Consider Your Audience Determine who your target
audience is. Design the multimedia product with
their needs in mind. Establish
Consistency Consistency is extremely important
with multimedia screen design. When creating
your screens, make sure that the flow and
consistency of look and feel are adhered
to. Visually, visitors need to know what they
are doing.
19
Overall Design Considerations
Choose a Background Consider the background early
in the design process. Ensure good contrast
between the text and background so the
information may be read easily. Some
text/background colour combinations should be
avoided, e.g. red/black, blue/black,
red/green. Create A Logical Navigation System
Users want to locate information quickly and
easily. Repeat the navigational tool on every
screen.