multimedia design. table of content 1.multimedia development process 2.navigational structures...
TRANSCRIPT
Multimedia Design
Table of Content
1. Multimedia Development Process2. Navigational structures3. Storyboard4. Multimedia interface components5. Tips for interface design
Multimedia Development Process
• Take a long time to be produced.
• Include four stages:
1. Planning and costing2. Designing and Producing3. Testing4. Delivering
Planning and Costing
• Plan to fulfill the expectation of the audience.
Steps to start a project:
1. Define the objectives and scope2. Target audience3. Set the content4. Estimating cost5. Hardware6. Software7. Build a multimedia team
1. Define the objectives and scope
What is the purpose of creating the project?• Try to achieve the objective.
Define the scope or the boundary of the project.• Consider how much time to develop the project.• Consider the knowledge and skills needed• Consider the how to organize the project
2. Target audience
• Target audience – applications users or information recipient.
• To whom the project is created for• Consider the following factors:
• Age• Knowledge or educational background• Technological background• Language• Gender• Economical background• Profession
3. Set the content
• Content or information will determine the size of the project
• Content production depend on the availability of the existing resources or the need to create new materials.
• Consideration before determining the content are:
• Digitizing pictures, audio, and video.• Produce materials including text, graphics, audio
effects and animation
4. Estimating cost• Three general elements that can vary in project
estimates: time, money and people. If we decrease any of these elements, we may generally increase one or both of the others.
People
Time Money It will take longer time to develop multimedia application if developer team (people) and money is less.
People
Time
MoneyIf there is a large number of developerteam, time and money (cost) to develop multimedia application could be reduced.
Time
MoneyPeople
Money (cost) can be saved if we decrease the number of developer team and time duration in multimedia application development.
5. Hardware Requirement
• Developer side.• It is also for the end user expectation – the type of
hardware platform.• Several types of hardware components that need to
be considered:Memory and storage device Input devicesOutput devices(monitor size, projectors )Communication Device (optional)
6. Software requirement
• Expensive software offer advance and powerful features which requires higher skill. However, there are software that can help to save time and to organize a project which are less expensive.
• Several types of software:• Text Editing and Word Processing Tool• Painting and Drawing Tools• 3D Modeling and 2D Animation Tools• Image Editing Tools• Sound Editing Tools
7. Build a multimedia team
• Require a specific set of skills. • Most of the time, multimedia project involves a
lot of people to be produced. Each person has their own specialized skills required to do specific task.
• The examples of multimedia team members and their roles: Project ManagerMultimedia DesignerAudio/Video specialistMultimedia programmer
Multimedia team
Project Manager• The leader of a project.• Strong in both technical and management aspect of the project.
Multimedia Designer• Deals with visual aspects of the project, graphic design,
illustration, animation, interface design and image processing
Audio/Video specialist • Focus on the audio and video production - shooting,
capturing and editing video, digitizing and audio recording. Multimedia programmer • Responsible for integrating all the multimedia elements
using authoring system or programming language .
Testing
• Test or review the project or Web site to ensure it is bug free, accurate, operationally and visually on target, and achieving the objective or target.
• Every feature and function must be exercised, every button or link must be clicked - will be repeated again and again with different hardware and under various conditions
• Two phases of testing Alpha testing Beta testing
Testing phases
Alpha testing :• Often performed only by users within the organization
developing the software as a form of internal acceptance testing.
• The product is evaluated relatively in the early stage of the development phase.
• The main interest is to review the concept, format, user interface and the layout.
Beta Testing :• The product is evaluated just before the final release. • It is a fully functioning product and should be relative bug
free.• The testing group should be represented by the real users
and should not include the people who have been involved in the project.
Delivering• Final stage• Know the medium you want to use. • Web site: can just upload to the servers and
adjust some settings then it is ready.• For more complex application where installation
into the user’s computer is needed. Installation should be smooth, easy and fast.
• Documentation - need to provide a clear step-by-step procedure for the users to follow.
• Troubleshooting guide - potential problem that can occur and how to solve it.
• A file name README.TXT is good thing to include in the CD distribution of your project.
Delivering medium
CD-ROM• It is also an optical storage and considered the most
common form of packaging for multimedia products. • It started out as a read-only technology in which user
could store data once only and access it many times.
DVD• It is the latest format for optical storage up to 17GB.• At the moment, DVD is increasingly popular for
DVD-Video for its high quality audio and video.
Multimedia Design
• When you are done with the planning stage, it is time for you to organize your content.
• Computer screens are better suited to show concise chunks of information.
• Very long content/pages are disorienting because the user has to scroll long distances and remember what was off-screen.
• Organize your information into short categories.
Navigational Structures
Navigational Structure
• Linear• Hierarchical• Non-Linear• Composite
Linear
• Sequential navigation (sequence of step by step procedures)
• They usually go Forward or Backward.• E.g. slides and video presentation
Hierarchical
• Based on the logic of the content• Structured through menus and the user makes a
choice that leads to another menu.
Non-linear
• Navigation is unbound by pre-determine routes.• E.g. website
Composite
• Mixed structure• Users may navigate freely, but are occasionally
constrained to linear presentations of movies or critical information and/or to data that are most logically organized in a hierarchy.
Storyboard
• Storyboarding is literally building a story or sample page on paper that describes roughly the layout.
• This is a process lifted from other media
development including movie making, cartoon animation and marketing.
• A visual representation of the different frames, or screens, that will be included in your production.
• The storyboard page is used to describe specific frame of time within a multimedia presentation..
Storyboard
• Sample page is drawn on paper to describe the rough layout
• Used to describe specific frame within a project.
Continue…
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)
Annotate the drawings:• show where animations will occur,• indicate which sound files will play and where,• add any other effects (transitions, text effects etc.).
Multimedia Interface Components
• Background and texture• Buttons, icons and picons• Rollovers and sliders• Hotspots and menus• Feedback
Components
Background and texture
Buttons, icons and picons
Rollovers and sliders
Hotspots and menus
• A section of an image which when clicked invokes an action
• In one image there can be multiple clickable area.
• Menu are used such as pull-down menus usually place on the top or the side area of applications
Feedback
• Immediate response triggered by user’s action.• E.g. After user answered a question, a pop up
window will respond whether the answer is correct or not.
Tips for Interface design• Make sure your information is readable without
straining your eyes. Use appropriate background and foreground colors. Do not overuse color and limit the use of strong colors(red).
• The navigational controls should have indication or visual cues of what are their function.
• Make sure users do not have to click too many times to look for specific information.
• Do not put too many things/information in one place. It will make the screen too ‘busy’.
• Create your interface as simple as possible.• Make sure the size of text and graphics are legible.• Be consistent in the use of symbols and color. Your
navigation controls should be at the same place so that users will always know where they are.
• Keep Screen Content Simple and Clear
• Good use of Margins and White Space
Avoid Avoid Excessive Excessive and and Improper Improper Use Use of of CCoolloorr
Uses of TypeSerif type• Ideal for large headlines
• Difficult to read in long blocks of text
• Looks best when surrounded by lots of white space.
Sans-Serif type• Works well in smaller sizes
especially in body text• Looks busy and cluttered in
large size.
Uses of TypeSerif type• Ideal for large headlines
• Difficult to read in long blocks of text
• Looks best when surrounded by lots of white space.
Sans-Serif type• Works well in smaller sizes
especially in body text• Looks busy and cluttered in
large size.
• An image should not distract from the main message on the screen
Dance (early 1950s - 1970s)
Multimedia (without computer interaction)
Alwin Nikolais (1910-1993) employed lights, slides, electronic music, and stage prop s to create environments through whi ch dancers moved, and more important, into which they blended.
Dance (early 1950s - 1970s)
Multimedia (without computer interaction)
Alwin Nikolais (1910-1993) employed lights, slides, electronic music, and stage prop s to create environments through whi ch dancers moved, and more important, into which they blended.
Obtrusive images Unobtrusive images
User will not be able to read this easily
Make sure there is enough contrast between foreground and textured background
User will be able to read this easier
• Careful use of special effect.
• Use Dark Type on a Light Background
Easier to read Harder to read
How Does the Internet Work?
• Packet switched networks– if it uses phone lines, it must work like the
phone system, right? WRONG!– circuit switched/packet switched
difference
• A better model -- the postal system– think of a packet as an envelope with an
address– point-to-point collection and distribution
What Makes theInternet Go?
H Protocols -- rules ofthe road for nets
H Packets– 1-1500 characters
– travel out ofsequence and byvarious routes
H Routers -- connectvarious networks
H The InternetProtocol– addresses the
packets
– tells the routers thebest way to go
How Does the Internet Work?
• The Transmission Control Protocol– breaks the info into packets, puts ordering
info on and inserts into IP “envelopes”– opens the envelopes and reassembles– if packets are missing or damaged, it asks
for retransmission -- parity bits
• The User Datagram Protocol (UDP)– used for short messages only– doesn’t worry about missing packets
Employ ConsistentLayouts for
Related Materials
Don’tChangeFormats in theMidst of a Concept
• Use Effective Cropping and Image Placement
Uncropped image Most of the trees and part ofthe building are cropped,emphasizing the student
For Further ReadingMarr, David (1982). Vision: A computational
investigation into the human representation andprocessing of visual information. Freeman: SanFrancisco.
Parker, Roger (1993). Looking good in print: A guide tobasic design for desktop publishing (3rd Edition).Ventana Press: Chapel Hill, NC.
Peretz, Isabel (1993). Auditory agnosia: A functionalanalysis. In S. McAdams & E. Bigand (Eds.),Thinking in sound: The cognitive psychology ofhuman audition (pp. 199-230). Oxford UniversityPress: Oxford.
Porkorney, Cornel & Gerald, Curtis (1989). ComputerGraphics: The principles behind the art and science.Franklin, Beedle & Associates: Irvine, CA.
For Further ReadingMarr, David (1982). Vision: A computational investi-
gation into the human representation and process-ing of visual information. Freeman: San Francisco.
Parker, Roger (1993). Looking good in print: A guideto basic design for desktop publishing (3rd Edi-tion). Ventana Press: Chapel Hill, NC.
Peretz, Isabel (1993). Auditory agnosia: A functionalanalysis. In S. McAdams & E. Bigand (Eds.),Thinking in sound: The cognitive psychology of hu-man audition (pp. 199-230). Oxford UniversityPress: Oxford.
Porkorney, Cornel & Gerald, Curtis (1989). ComputerGraphics: The principles behind the art and sci-ence. Franklin, Beedle & Associates: Irvine, CA.
Avoid Hyphenationand Underlines
Underlined and hyphenated
Clear