Designing Multimedia Project
Transcript of Designing Multimedia Project
![Page 1: Designing Multimedia Project](https://reader036.fdocuments.in/reader036/viewer/2022062312/554bc3cab4c90594278b5346/html5/thumbnails/1.jpg)
DESIGNING MULTIMEDIA PROJECT
Huda TajuddinNoranisah IsmailAtiqah Abdul Aziz
![Page 2: Designing Multimedia Project](https://reader036.fdocuments.in/reader036/viewer/2022062312/554bc3cab4c90594278b5346/html5/thumbnails/2.jpg)
OVERVIEW
Strategies in designing multimedia projectDesigning a multimedia project
![Page 3: Designing Multimedia Project](https://reader036.fdocuments.in/reader036/viewer/2022062312/554bc3cab4c90594278b5346/html5/thumbnails/3.jpg)
STRATEGIES FOR CREATING INTERACTIVE MULTIMEDIA
Designing and building multimedia project.Feedback loops and good communication between
the design and production effort.Spends more effort in rendering the projectMethods chosen scopes
size style of the team
Detailed design- separated design team with development team.
![Page 4: Designing Multimedia Project](https://reader036.fdocuments.in/reader036/viewer/2022062312/554bc3cab4c90594278b5346/html5/thumbnails/4.jpg)
RENDERING
Rendering is the process of generating an image from a model, by means of computer programs.
The model is a description of three-dimensional objects in a strictly defined language or data structure.
It would contain geometry viewpoint texture lightening shading information
The image is a digital image or raster graphic image.
![Page 5: Designing Multimedia Project](https://reader036.fdocuments.in/reader036/viewer/2022062312/554bc3cab4c90594278b5346/html5/thumbnails/5.jpg)
DESIGNING MULTIMEDIA PROJECTRequires knowledge
computer skills talent graphics
artsvideomusic
ability to conceptualize logical pathways
Involves thinking choosing making doing
![Page 6: Designing Multimedia Project](https://reader036.fdocuments.in/reader036/viewer/2022062312/554bc3cab4c90594278b5346/html5/thumbnails/6.jpg)
Designing Structure• The manner in which project material is organized has just as great an impact on the viewer as the content itself.
User Interface• The user interface of a project is a blend of its graphic elements and its navigation system.
DESIGNING MULTIMEDIA PROJECT
![Page 7: Designing Multimedia Project](https://reader036.fdocuments.in/reader036/viewer/2022062312/554bc3cab4c90594278b5346/html5/thumbnails/7.jpg)
DESIGNING THE STRUCTURE
Navigation maps Architectural Drawing
HotspotsThrough Hyperlinks
Image Maps Icons and Buttons
![Page 8: Designing Multimedia Project](https://reader036.fdocuments.in/reader036/viewer/2022062312/554bc3cab4c90594278b5346/html5/thumbnails/8.jpg)
NAVIGATION MAPS/SITE MAPSDone early in the planning phase.Help organize the content and messages.Provide a hierarchical table of contents and a
chart of the logical flow of the interactive interface.
Essentially non-linear.
![Page 9: Designing Multimedia Project](https://reader036.fdocuments.in/reader036/viewer/2022062312/554bc3cab4c90594278b5346/html5/thumbnails/9.jpg)
Structures
Organizing Structures
Linear
Users navigate sequentially, from
one frame of information to
another
Hierarchical/
Liner with
branching
Users navigate along the branches of a
tree structure that is shaped by the
natural logic of the content.
Non-linear
Users navigate freely through the content, unbound by predetermined
routes.
Composite
Users may navigate non-linearly, but are
occasionally constrained to linear
presentations.
![Page 10: Designing Multimedia Project](https://reader036.fdocuments.in/reader036/viewer/2022062312/554bc3cab4c90594278b5346/html5/thumbnails/10.jpg)
TYPES OF SITE MAPS
![Page 11: Designing Multimedia Project](https://reader036.fdocuments.in/reader036/viewer/2022062312/554bc3cab4c90594278b5346/html5/thumbnails/11.jpg)
DESIGNING THE STRUCTURE
Navigation maps Architectural Drawing
HotspotsThrough Hyperlinks
Image Maps Icons and Buttons
![Page 12: Designing Multimedia Project](https://reader036.fdocuments.in/reader036/viewer/2022062312/554bc3cab4c90594278b5346/html5/thumbnails/12.jpg)
ARCHITECTURAL DRAWINGStoryboards and navigation maps.Storyboards are linked to navigation maps
during the design process, and help to visualize the information architecture.
![Page 13: Designing Multimedia Project](https://reader036.fdocuments.in/reader036/viewer/2022062312/554bc3cab4c90594278b5346/html5/thumbnails/13.jpg)
STORYBOARD
![Page 14: Designing Multimedia Project](https://reader036.fdocuments.in/reader036/viewer/2022062312/554bc3cab4c90594278b5346/html5/thumbnails/14.jpg)
Types of Structure
Depth structure
Represents the complete navigation map and
describes all the links between all the
components of the project.
Surface structure
Represents the structures actually realized by a
user while navigating the depth structure.
![Page 15: Designing Multimedia Project](https://reader036.fdocuments.in/reader036/viewer/2022062312/554bc3cab4c90594278b5346/html5/thumbnails/15.jpg)
DESIGNING THE STRUCTURE
Navigation maps Architectural Drawing
HotspotsThrough Hyperlinks
Image Maps Icons and Buttons
![Page 16: Designing Multimedia Project](https://reader036.fdocuments.in/reader036/viewer/2022062312/554bc3cab4c90594278b5346/html5/thumbnails/16.jpg)
HOTSPOTSAdd interactivity to a multimedia project.Categories of hotspots text
graphic icon
The simplest hot spots on the Web are the text anchors that link a document to other documents.
Example
![Page 17: Designing Multimedia Project](https://reader036.fdocuments.in/reader036/viewer/2022062312/554bc3cab4c90594278b5346/html5/thumbnails/17.jpg)
DESIGNING THE STRUCTURE
Navigation maps Architectural Drawing
HotspotsThrough Hyperlinks
Image Maps Icons and Buttons
![Page 18: Designing Multimedia Project](https://reader036.fdocuments.in/reader036/viewer/2022062312/554bc3cab4c90594278b5346/html5/thumbnails/18.jpg)
HYPERLINKS
A hotspot that connects a viewer to another part of the same document, a different document, or another Web site.
Example: Hyperlink
![Page 19: Designing Multimedia Project](https://reader036.fdocuments.in/reader036/viewer/2022062312/554bc3cab4c90594278b5346/html5/thumbnails/19.jpg)
DESIGNING THE STRUCTURE
Navigation maps Architectural Drawing
HotspotsThrough Hyperlinks
Image Maps Icons and Buttons
![Page 20: Designing Multimedia Project](https://reader036.fdocuments.in/reader036/viewer/2022062312/554bc3cab4c90594278b5346/html5/thumbnails/20.jpg)
IMAGE MAPS
Larger images that are sectioned into hot areas with associated links.
Example
![Page 21: Designing Multimedia Project](https://reader036.fdocuments.in/reader036/viewer/2022062312/554bc3cab4c90594278b5346/html5/thumbnails/21.jpg)
DESIGNING THE STRUCTURE
Navigation maps Architectural Drawing
HotspotsThrough Hyperlinks
Image Maps Icons and Buttons
![Page 22: Designing Multimedia Project](https://reader036.fdocuments.in/reader036/viewer/2022062312/554bc3cab4c90594278b5346/html5/thumbnails/22.jpg)
ICONS AND BUTTONS
Icons are fundamental graphic objects symbolic of an activity or concept.
A graphic image that is a hotspot is called a button.
Plug-ins such as Flash, Shockwave, or JavaScripts enable users to create plain or animated buttons.
Small JPEG or GIF images that are themselves anchor links can also serve as buttons on the Web.
![Page 23: Designing Multimedia Project](https://reader036.fdocuments.in/reader036/viewer/2022062312/554bc3cab4c90594278b5346/html5/thumbnails/23.jpg)
DESIGNING THE USER INTERFACE
Is a blend of graphic elements and navigation system.
Can contain plenty of navigational power, which provides access to content and tasks for users at all levels.
The interface should be simple and user-friendly.
![Page 24: Designing Multimedia Project](https://reader036.fdocuments.in/reader036/viewer/2022062312/554bc3cab4c90594278b5346/html5/thumbnails/24.jpg)
GRAPHICAL USER INTERFACES
The GUIs of Macintosh and Windows are successful due to their simplicity, consistency, and ease of use.
GUIs offer built-in help systems, and provide standard patterns of activity that produce the standard expected results.
![Page 25: Designing Multimedia Project](https://reader036.fdocuments.in/reader036/viewer/2022062312/554bc3cab4c90594278b5346/html5/thumbnails/25.jpg)
GRAPHICAL APPROACHES THAT WORK
Plenty of "non-information areas," or white space in the screens.
Neatly executed contrasts.Gradients.Shadows.Eye-grabbers.
Example of a good website interface.
![Page 26: Designing Multimedia Project](https://reader036.fdocuments.in/reader036/viewer/2022062312/554bc3cab4c90594278b5346/html5/thumbnails/26.jpg)
GRAPHICAL APPROACHES TO AVOID
Clashes of color.Busy screens.Requiring more than two button clicks to
quit.Too many numbers and words.Too many substantive elements presented
too quickly.
Example of a insufficient website interface.
![Page 27: Designing Multimedia Project](https://reader036.fdocuments.in/reader036/viewer/2022062312/554bc3cab4c90594278b5346/html5/thumbnails/27.jpg)
AUDIO INTERFACE
A multimedia user interface can include sound elements.
Sounds can be background music, special effects for button clicks, voice-overs, effects synced to animation.
Always provide a toggle switch to disable sound.
Example
![Page 28: Designing Multimedia Project](https://reader036.fdocuments.in/reader036/viewer/2022062312/554bc3cab4c90594278b5346/html5/thumbnails/28.jpg)
QUESTION?
![Page 29: Designing Multimedia Project](https://reader036.fdocuments.in/reader036/viewer/2022062312/554bc3cab4c90594278b5346/html5/thumbnails/29.jpg)
~THANK YOU~