multimedia development

2.3 Multimedia 2.3 Multimedia DevelopmentDevelopment

2.3.32.3.3 Multimedia ProductionMultimedia Production

2.3.3 Learning Outcome2.3.3 Learning Outcome

At the end of this lesson, students At the end of this lesson, students should be able toshould be able to

1.1. Identify steps involved in Identify steps involved in multimedia developmentmultimedia development

2.2. Apply steps involved in multimedia Apply steps involved in multimedia developmentdevelopment

MULTIMEDIA PRODUCTIONMULTIMEDIA PRODUCTION

ANALYSIS

DESIGN & DEVELOP

IMPLEMENTATION

TESTING &

EVALUATION

DOCUMENTATION

PUBLISHING

MAINTENANCE

DESIGN & DEVELOPDESIGN & DEVELOP

Design and DevelopDesign and Develop

Consist of:Consist of:

1)1) Design Phase DecisionDesign Phase Decision- ContentContent- StyleStyle

2)2) Design Phase ProductDesign Phase Product

Design and DevelopDesign and Develop

2) Design Phase Product2) Design Phase Product

1.1.Outline of the Product Content Outline of the Product Content 2.2.Flow ChartsFlow Charts3.3.Screen Designs and User Screen Designs and User

InterfaceInterface4.4.StoryboardsStoryboards

1) Design Phase Decisions1) Design Phase Decisions

Determine:Determine:

1.1. Who is the Target Audience?Who is the Target Audience?

2.2. What Is The Intent Of The Project?What Is The Intent Of The Project?

3.3. What is the Development Timeline?What is the Development Timeline?

1)Design Phase Decisions - 1)Design Phase Decisions - ContentContent

Information DesignInformation Design

1.1. The goal is to communicate a message, The goal is to communicate a message, whether the product is:whether the product is: a game to play,a game to play, a tutorial to learn a skill from,a tutorial to learn a skill from, a marketing exercise,a marketing exercise, an information provider.an information provider.

2.2. Does the product content already exist and Does the product content already exist and can it be used?can it be used?

1) Design Phase Decisions - Content

3. The quantity must be right; sufficient but not 3. The quantity must be right; sufficient but not too much information.too much information.

4. The content must be factually accurate.4. The content must be factually accurate.

5. The content must be organized into a logical 5. The content must be organized into a logical structure.structure.

* The design decision is how best to communicate * The design decision is how best to communicate the message.the message.

1) Design Phase Decisions1) Design Phase Decisions - - StyleStyle

Aesthetic DesignAesthetic Design Determine a style for the product:Determine a style for the product:

what style of graphical images will be used?what style of graphical images will be used? what visual effects are required?what visual effects are required? what colour scheme? is a ‘house style’ what colour scheme? is a ‘house style’ required?required? what style of text? fonts, size, colour?what style of text? fonts, size, colour? will a theme run throughout, or will each will a theme run throughout, or will each screen be different?screen be different?

1) Design Phase Decisions1) Design Phase Decisions - - StyleStyle

Navigation styleNavigation style There are several navigation styles to There are several navigation styles to choose from:choose from:

sequential,sequential, menu structure,menu structure, tree structure etc.tree structure etc.

* Remember the message and the audience.* Remember the message and the audience.

2) Design Phase Products2) Design Phase Products

1.1. Outline of the Product Content Outline of the Product Content

2.2. Flow Charts Flow Charts

3.3. Screen Designs and User InterfaceScreen Designs and User Interface

4. Storyboards4. Storyboards

Creating Product Flow ChartsCreating Product Flow Charts

Flow Charts provide a Flow Charts provide a VISUALVISUAL representation representation of the sequence and structure of the product.of the sequence and structure of the product.

Different types of Flow Chart structures :Different types of Flow Chart structures :

1.1. LinearLinear2.2. TreeTree3.3. StarStar

Linear Flow ChartLinear Flow Chart

1.1. Linear Flow Charts depict presentations with Linear Flow Charts depict presentations with a specific sequence of step by step a specific sequence of step by step procedures.procedures.

2.2. They usually go Forward or Backward.They usually go Forward or Backward.

3.3. Power Point is a classic example for a linear Power Point is a classic example for a linear flow chart.flow chart.

Slide 1 Slide 2 Slide 3

Tree Structure Flow ChartTree Structure Flow ChartFamily

Pets

Dogs Cats Reptiles

HistoryBreeds HistoryBreeds HistoryBreeds

Tree Structures are appropriate when a Main topic Tree Structures are appropriate when a Main topic branches into several other Sub topics.branches into several other Sub topics.

Movement options usually allow users to branch:Movement options usually allow users to branch:• ForwardForward• BackwardBackward• PreviousPrevious• Main TopicMain Topic

Star StructuresStar Structures

Home GamesHot

Links

Quiz

email

One idea branches into several other single ideas.One idea branches into several other single ideas.Web pagesWeb pages and and hypermediahypermedia programs are usually programs are usually designed with a Star format.designed with a Star format.Users may navigate in a variety of directions. In most Users may navigate in a variety of directions. In most instances, users may branch:instances, users may branch:• ForwardForward• BackwardBackward• Main MenuMain Menu

SubjectMatter

Specifying Screen DesignsSpecifying Screen Designs

Power Point PresentationPower Point Presentation

Defining Screen Design layouts Defining Screen Design layouts priorprior to developing to developing the project helps to create a consistent format for the project helps to create a consistent format for

the project.the project.

www.bbc.co.uk/cbeebies/tweenies/www.bbc.co.uk/cbeebies/tweenies/

Consistent Screen LayoutsConsistent Screen Layouts

Determine the following for Determine the following for each screen “type”:each screen “type”:

• Title locationTitle location• Informational/Instructional Informational/Instructional text, font, locationtext, font, location• Graphics location and Graphics location and relationship with relationship with supporting textsupporting text• Navigational OptionsNavigational Options

TitleTitle

GraphicsGraphicsNavigationNavigation

Instructional TextInstructional Text

Creating StoryboardsCreating Storyboards

Enable to create a mock up of the multimedia Enable to create a mock up of the multimedia project project BEFOREBEFORE committing to anything! committing to anything!

Storyboards provide the supporting details for Storyboards provide the supporting details for each screen:each screen:

TextText Bullets BulletsAudio FilesAudio Files Colors ColorsVideo FilesVideo Files Animations AnimationsGraphicsGraphics Font type and Size Font type and Size

DETAILSDETAILS DETAILSDETAILS DETAILS!!!DETAILS!!!


Advantages of storyboardingAdvantages of storyboarding

1.1. The designer is forced to The designer is forced to think visuallythink visually to to convey the message.convey the message.

2.2. The storyboard is The storyboard is flexibleflexible, allowing designers to , allowing designers to rearrange ideas.rearrange ideas.


Advantages of storyboardingAdvantages of storyboarding

3.3. It can be used to It can be used to show the flowshow the flow between between scenes, enabling the multimedia author to keep scenes, enabling the multimedia author to keep track of the action during development.track of the action during development.

4.4. The storyboard can be The storyboard can be shown to the clientshown to the client for for approval before committing to development of approval before committing to development of the product.the product.

Flow Charts – Screen Flow Charts – Screen Designs – StoryboardsDesigns – Storyboards

Home GamesHot Links

Quiz

emailSubjectMatter

TitleTitle

GraphicGraphic QuestionsQuestions

BackBack ForwardForward

Specify LayoutsSpecify LayoutsSpecify FontsSpecify FontsDetailsDetailsFlow and OrderFlow and OrderColorsColorsSounds and other effects…Sounds and other effects…

1. Flow Chart1. Flow Chart

2. Screen Designs2. Screen Designs

3. Storyboards3. Storyboards

Design Issues to Consider

What Makes a Good What Makes a Good Multimedia Design?Multimedia Design?

What Rules Apply?What Rules Apply?

1.1. The design must be The design must be ClearClear and and Eye Eye CatchingCatching..

2.2. The user needs to be able to The user needs to be able to quickly graspquickly grasp and and

understand what is being presented.understand what is being presented.

3.3. The The messagemessage must be must be clearclear, focused and , focused and concise.concise...

What Rules Apply?What Rules Apply?

4.4. Combine high quality graphical images, Combine high quality graphical images, easy to use navigation toolseasy to use navigation tools and logical and logical presentation of material.presentation of material.

5.5. Pay attention to the multimedia navigation, Pay attention to the multimedia navigation, multimedia presentation organization and multimedia presentation organization and consistency between pagesconsistency between pages..

Overall Design ConsiderationsOverall Design Considerations

1.1. Consider Your AudienceConsider Your Audiencei.i. Determine who your target audience is.Determine who your target audience is.

ii.ii. Design the multimedia product with Design the multimedia product with theirtheir needs in mind.needs in mind.


2.2. Establish ConsistencyEstablish Consistency

i.i. Consistency is extremely important with Consistency is extremely important with multimedia screen design.multimedia screen design.

ii.ii. When creating your screens, make sure that When creating your screens, make sure that the flow and consistency of look and feel are the flow and consistency of look and feel are

adhered to.adhered to.

iii.iii. Visually, visitors need to know what they are Visually, visitors need to know what they are doing. doing.


3.3. Choose a BackgroundChoose a Background

i.i. Consider the background early in the Consider the background early in the

design process.design process.

ii.ii. Ensure good contrast between the text Ensure good contrast between the text and background so the information may be and background so the information may be

read read easily.easily.

iii.iii. Some text/background colour ombinations Some text/background colour ombinations should be avoided,should be avoided,e.g. red/black, blue/black, red/green.e.g. red/black, blue/black, red/green.


4.4. Create A Logical Navigation System Create A Logical Navigation System

i.i. Users want to locate information Users want to locate information quickly and easily. quickly and easily.

ii.ii. Repeat the navigational tool on Repeat the navigational tool on every screen.every screen.

Design is an Iterative ProcessDesign is an Iterative Process

DecideDecide

DesignDesignDevelopDevelop

EvaluateEvaluate

Design & DevelopDesign & DevelopPhasePhase

Each Phase Each Phase produces produces information that is information that is passed onto the next.passed onto the next.

Evaluating the Evaluating the content and making content and making changes is part of changes is part of the process.the process.

EvaluateEvaluateEvaluateEvaluate

multimedia development

Documents