OVERVIEW

 Strategies in designing multimedia project
 Designing a multimedia project
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 project
 Methods chosen      scopes
                       size
                       style of the team
 Detailed design- separated design team with development
  team.
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.
DESIGNING MULTIMEDIA PROJECT
 Requires    knowledge
              computer skills
              talent       graphics
                           arts
                           video
                           music
               ability to conceptualize logical pathways
 Involves   thinking
              choosing
              making
               doing
DESIGNING MULTIMEDIA PROJECT

 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 THE STRUCTURE

            Navigation maps
            Architectural Drawing
            Hotspots
 Through   Hyperlinks
            Image Maps
            Icons and Buttons
NAVIGATION MAPS/SITE MAPS
 Done 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.
Organizing
                                             Structures




                           Hierarchical/
      Linear                Liner with                    Non-linear            Composite
                            branching



                          Users navigate along                                Users may navigate
    Users navigate                                   Users navigate freely
                         the branches of a tree                              non-linearly, but are
sequentially, from one                               through the content,
                            structure that is                                    occasionally
 frame of information                                    unbound by
                         shaped by the natural                               constrained to linear
     to another                                     predetermined routes.
                          logic of the content.                                 presentations.




                                        Structures
TYPES OF SITE MAPS
DESIGNING THE STRUCTURE

            Navigation maps
            Architectural Drawing
            Hotspots
 Through   Hyperlinks
            Image Maps
            Icons and Buttons
ARCHITECTURAL DRAWING
 Storyboards and navigation maps.
 Storyboards are linked to navigation maps during the
 design process, and help to visualize the information
 architecture.
STORYBOARD
Types of Structure




    Depth structure                 Surface structure




 Represents the complete
                                 Represents the structures
   navigation map and
                                 actually realized by a user
  describes all the links
                                 while navigating the depth
     between all the
                                         structure.
components of the project.
DESIGNING THE STRUCTURE

            Navigation maps
            Architectural Drawing
            Hotspots
 Through   Hyperlinks
            Image Maps
            Icons and Buttons
HOTSPOTS
 Add 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
DESIGNING THE STRUCTURE

            Navigation maps
            Architectural Drawing
            Hotspots
 Through   Hyperlinks
            Image Maps
            Icons and Buttons
HYPERLINKS
 A hotspot that connects a viewer to another part of the
  same document, a different document, or another Web
  site.
 Example: Hyperlink
DESIGNING THE STRUCTURE

            Navigation maps
            Architectural Drawing
            Hotspots
 Through   Hyperlinks
            Image Maps
            Icons and Buttons
IMAGE MAPS

 Larger images that are sectioned into hot areas with
  associated links.
 Example
DESIGNING THE STRUCTURE

            Navigation maps
            Architectural Drawing
            Hotspots
 Through   Hyperlinks
            Image Maps
            Icons and Buttons
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.
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.
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.
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.
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.
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
Designing Multimedia Project
Designing Multimedia Project

Designing Multimedia Project

  • 2.
    OVERVIEW  Strategies indesigning multimedia project  Designing a multimedia project
  • 3.
    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 project  Methods chosen scopes size style of the team  Detailed design- separated design team with development team.
  • 4.
    RENDERING  Rendering isthe 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.
  • 5.
    DESIGNING MULTIMEDIA PROJECT Requires knowledge computer skills talent graphics arts video music ability to conceptualize logical pathways  Involves thinking choosing making doing
  • 6.
    DESIGNING MULTIMEDIA PROJECT 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.
  • 7.
    DESIGNING THE STRUCTURE Navigation maps Architectural Drawing Hotspots  Through Hyperlinks Image Maps Icons and Buttons
  • 8.
    NAVIGATION MAPS/SITE MAPS Done 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.
  • 9.
    Organizing Structures Hierarchical/ Linear Liner with Non-linear Composite branching Users navigate along Users may navigate Users navigate Users navigate freely the branches of a tree non-linearly, but are sequentially, from one through the content, structure that is occasionally frame of information unbound by shaped by the natural constrained to linear to another predetermined routes. logic of the content. presentations. Structures
  • 10.
  • 11.
    DESIGNING THE STRUCTURE Navigation maps Architectural Drawing Hotspots  Through Hyperlinks Image Maps Icons and Buttons
  • 12.
    ARCHITECTURAL DRAWING  Storyboardsand navigation maps.  Storyboards are linked to navigation maps during the design process, and help to visualize the information architecture.
  • 13.
  • 14.
    Types of Structure Depth structure Surface structure Represents the complete Represents the structures navigation map and actually realized by a user describes all the links while navigating the depth between all the structure. components of the project.
  • 15.
    DESIGNING THE STRUCTURE Navigation maps Architectural Drawing Hotspots  Through Hyperlinks Image Maps Icons and Buttons
  • 16.
    HOTSPOTS  Add interactivityto 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
  • 17.
    DESIGNING THE STRUCTURE Navigation maps Architectural Drawing Hotspots  Through Hyperlinks Image Maps Icons and Buttons
  • 18.
    HYPERLINKS  A hotspotthat connects a viewer to another part of the same document, a different document, or another Web site.  Example: Hyperlink
  • 19.
    DESIGNING THE STRUCTURE Navigation maps Architectural Drawing Hotspots  Through Hyperlinks Image Maps Icons and Buttons
  • 20.
    IMAGE MAPS  Largerimages that are sectioned into hot areas with associated links.  Example
  • 21.
    DESIGNING THE STRUCTURE Navigation maps Architectural Drawing Hotspots  Through Hyperlinks Image Maps Icons and Buttons
  • 22.
    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.
  • 23.
    DESIGNING THE USERINTERFACE  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.
  • 24.
    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.
  • 25.
    GRAPHICAL APPROACHES THATWORK  Plenty of "non-information areas," or white space in the screens.  Neatly executed contrasts.  Gradients.  Shadows.  Eye-grabbers.  Example of a good website interface.
  • 26.
    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.
  • 27.
    AUDIO INTERFACE  Amultimedia 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