1. Multimedia Design 1

2. 2 Objectives 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

3. 3Multimedia Design A Design Model DECIDE Determine Project Goals Brainstorm Content Conduct Research DESIGN Draw Flow Charts Specify Screen Designs Create StoryBoards DEVELOP Audio, Video, Graphics, Animation Using Authoring Software EVALUATEEVALUATE EVALUATEEVALUATE

4. 4Multimedia Design 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 Animation are brought together using authoring tools. EVALUATE as you go

5. 5Multimedia Design Design Phase Decisions Take 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?

6. 6Multimedia Design Design Phase Decisions - Content Information 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.

7. 7Multimedia Design Design Phase Decisions - Style Aesthetic 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.

8. 8Multimedia Design Design Phase Products Outline of the Product Content Flow Charts Screen Designs and User Interface Storyboards

9. 9Multimedia Design Creating Product Flow Charts Slide 1 Slide 2 Slide 3 Home Games Hot 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

10. 10Multimedia Design Linear 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 1Slide 2Slide 3

11. 11Multimedia Design Tree Structure Flow Chart Family Pets DogsCatsReptiles HistoryBreedsHistoryBreedsHistoryBreeds 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

12. 12Multimedia Design Star Structures Home Games Hot 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 Subject Matter

13. 13Multimedia Design 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.

14. 14Multimedia Design Specifying 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/

15. 15Multimedia Design Consistent 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

16. 16Multimedia Design 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 DETAILSDETAILSDETAILS!!! Test out the presentation on paper first! It’s easy to make changes with the Story Boards.

17. 17Multimedia Design 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)

18. 18Multimedia Design 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!

19. 19Multimedia Design 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.

20. 20Multimedia Design Flow Charts – Screen Designs – Storyboards HomeGames Hot Links Quiz email Subject Matter Title Graphic Questions BackForward Specify Layouts Specify Fonts Details Flow and Order Colors Sounds and other effects… 1. Flow Chart 2. Screen Designs 3. Storyboards

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

22. 22Multimedia Design 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.

23. 23Multimedia Design 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.

24. 24Multimedia Design 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.

25. 25Multimedia Design Design Phase Outcomes Outline of the Product Content Evaluate Flow Chart Evaluate Screen Designs and User Interface Evaluate Storyboard

26. 26Multimedia Design Design is an Cyclic Process Decide Design Develop 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

27. 27Multimedia Design Evaluate The Design Phase Deliverables 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.