multimedia design 1. 2 objectives by completion of this session, you will be able to: organize your...

Multimedia Design Multimedia Design 11

Multimedia DesignMultimedia Design

22 Multimedia Design Multimedia Design

ObjectivesObjectives

By completion of this session, you will be able to:

• Organize your multimedia project• Develop Flowcharts and Storyboards that represent the product• Specify Screen Designs• Be equipped with basic Design Guidelines for designing a multimedia product


A Design ModelA Design Model

DECIDEDetermine Project Goals

Brainstorm ContentConduct Research

DESIGNDraw Flow Charts

Specify Screen DesignsCreate StoryBoards

DEVELOPAudio, Video,

Graphics, AnimationUsing Authoring Software

EVALUATE

EVALUATE


Design Model Phases Design Model Phases

The Decide Phase defines the project:• Goals• Target Audience • Ideas• Topic• Research• Team Member Expertise

EVALUATE as you go

During the Design Phase project teams use the information “Decided Upon” to develop “blue prints” for the final product.

EVALUATE as you go

During the Develop Phase, all of the different media components: Text, Graphics, Audio, ,Video and Animationare brought together using authoring tools.

EVALUATE as you go


Design Phase DecisionsDesign Phase DecisionsTake the Product Goals that were Decided upon and determine:

Who is the Target Audience?• Who will be the primary users of the multimedia product?• What is the target audience background? Age? Experience?

What Is The Intent Of The Project?• Project Title• Project Goals• Project Outcomes• Content Outline

What is the Development Timeline? • How much content can successfully be developed in that time?


Design Phase DecisionsDesign Phase Decisions - - ContentContentInformation Design• The goal is to communicate a message, whether the product is:

a game to play,a tutorial to learn a skill from,a marketing exercise,an information provider.

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

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

• The content must be factually accurate.

• The content must be organised into a logical structure.

The design decision is how best to communicate the message.


Design Phase DecisionsDesign Phase Decisions - - StyleStyleAesthetic Design• Determine a style for the product:

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

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

sequential, menu structure, tree structure etc.

Remember the message and the audience.


Design Phase ProductsDesign Phase Products

• Outline of the Product Content • Flow Charts• Screen Designs and User Interface• Storyboards


Creating Product Flow ChartsCreating Product Flow Charts

Slide 1 Slide 2 Slide 3

Home GamesHot

Links

Main Topic

email

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

Different types of Flow Chart structures include:

• Linear• Tree• Star

Linear Flow Chart

Star Structured Flow Chart


Linear Flow ChartLinear Flow Chart

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.

Slide 1 Slide 2 Slide 3


Tree Structure Flow ChartTree Structure Flow Chart

Family Pets

Dogs Cats Reptiles

HistoryBreeds HistoryBreeds HistoryBreeds

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


Star StructuresStar Structures

Home GamesHot

Links

Quiz

email

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

SubjectMatter


Creating Flow ChartsCreating Flow ChartsIdentify 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.


Specifying Screen DesignsSpecifying Screen Designs

Power Point Presentation

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

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


Consistent Screen LayoutsConsistent Screen Layouts

Determine the following for each screen “type”:

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

Title

GraphicsNavigation

Instructional Text


Creating StoryboardsCreating 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 BulletsAudio Files ColorsVideo Files AnimationsGraphics Font type and Size

DETAILS DETAILS DETAILS!!!

Test out the presentation on paper first! It’s easy to make changes with the Story Boards.



•Collect the toolsa very large sheet of paper or card, orseveral smaller sheets,pen or pencil, coloured pens.

•Represent the componentsSketch 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)



•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 detailadd an indication of colour to the background and the text,describe text fonts/styles.

•Produce a document fit to show a user/clientattractive, clear,gets the message across!



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.


Flow Charts – Screen Designs – Flow Charts – Screen Designs – StoryboardsStoryboards

Home GamesHot

Links

Quiz

emailSubjectMatter

Title

Graphic Questions

Back Forward

Specify LayoutsSpecify FontsDetailsFlow and OrderColorsSounds and other effects…

1. Flow Chart

2. Screen Designs

3. Storyboards


Design Issues to Consider Design Issues to Consider What Makes a Good Multimedia Presentation Design?


What Rules Apply?What Rules Apply?• The design must be Clear and Eye Catching.

• The user needs to be able to quickly grasp and 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, multimedia presentation organization and consistency between pages.


Overall Design ConsiderationsOverall Design Considerations

Consider Your AudienceDetermine who your target audience is.

Design the multimedia product with their needs in mind.

Establish ConsistencyConsistency is extremely important with multimedia screen design.

When creating your screens, make sure that theflow and consistency of look and feel are adhered to.

Visually, visitors need to know what they are doing.


Overall Design ConsiderationsOverall Design Considerations

Choose a BackgroundConsider the background early in the design process.

Ensure good contrast between the text andbackground 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.


Design Phase OutcomesDesign Phase Outcomes

Outline of the Product Content

Evaluate

Flow Chart

Evaluate

Screen Designs and User Interface

Evaluate

Storyboard


Design is an Cyclic ProcessDesign is an Cyclic Process

Decide

DesignDevelop

Evaluate

Multimedia Project

Development

Each Phase produces information that is passed onto the next.

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

Evaluate Evaluate


Evaluate The Design Phase Evaluate The Design Phase DeliverablesDeliverables

Summary – Planning & Designing

Verify the research information obtained during the Decide Phase, the ideas defined can be mapped using Flowcharts.

Map out the flow using a flowchart; make sure sequencing and all links and are defined.

Once flowcharts are approved, begin the Storyboard.

Make sure everything is clear and complete!

Now you are ready to produce the multimedia document.

multimedia design 1. 2 objectives by completion of this session, you will be able to: organize your...

Documents