multimedia development lifecycle
DESCRIPTION
Week 2 Lecturing P420 - 1 CMLA Multimedia Presentation for Public Relations Swiss German University Indonesia (13 September 2011)TRANSCRIPT
![Page 1: Multimedia Development Lifecycle](https://reader034.vdocuments.site/reader034/viewer/2022050904/547216a5b4af9fc30a8b4d6f/html5/thumbnails/1.jpg)
MULTIMEDIA DEVELOPMENT LIFECYCLE (MDL) Week 2 P420 - 1 CMLA Multimedia Presentation for Public Relations Swiss German University Indonesia
![Page 2: Multimedia Development Lifecycle](https://reader034.vdocuments.site/reader034/viewer/2022050904/547216a5b4af9fc30a8b4d6f/html5/thumbnails/2.jpg)
Multimedia Development Lifecycle (MDL) • Multimedia Development Life Cycle:
Define > Plan > Implement > Construct > Evaluate
• Define : • Client’s needs assessment : state the purpose • Identify Target Audience : audience assessment • Goals, objective, activities
• Planning : • Develop specification • Develop design strategy • Create wireframe
![Page 3: Multimedia Development Lifecycle](https://reader034.vdocuments.site/reader034/viewer/2022050904/547216a5b4af9fc30a8b4d6f/html5/thumbnails/3.jpg)
Multimedia Development Lifecycle (MDL) • Determine organizational structure • Design navigation and user interface • Select appropriate authoring medium and delivery system • Task, deliverables, milestones • Set definitive timelines for full production process
• Implement : • Proposal sign-off • Getting resource from client • Ensuring relevant personnel are available
![Page 4: Multimedia Development Lifecycle](https://reader034.vdocuments.site/reader034/viewer/2022050904/547216a5b4af9fc30a8b4d6f/html5/thumbnails/4.jpg)
Multimedia Development Lifecycle (MDL) • Construct :
• Create the multimedia elements and add the content • Authoring interaction • Preparing adjunct materials (user manuals) • Integrating media and code • Technical testing and subsequent alterations • Alpha, beta, release candidate one (RC1)/release candidate 2 (RC2) and
gold/master release production phases • Focus group and user testing and subsequent alterations • End user training • Handover presentation and demonstration
![Page 5: Multimedia Development Lifecycle](https://reader034.vdocuments.site/reader034/viewer/2022050904/547216a5b4af9fc30a8b4d6f/html5/thumbnails/5.jpg)
Multimedia Development Lifecycle (MDL) • Evaluate :
• Complete Usability/User Testing Report • Complete Effectiveness and Impact Report • Complete Extension Report • Undertake Evaluation as per the strategy previously outlined • Undertake developer only evaluation
![Page 6: Multimedia Development Lifecycle](https://reader034.vdocuments.site/reader034/viewer/2022050904/547216a5b4af9fc30a8b4d6f/html5/thumbnails/6.jpg)
DESIGNING MULTIMEDIA P420 - 1 CMLA Multimedia Presentation for Public Relations Week 2 Lecturing
![Page 7: Multimedia Development Lifecycle](https://reader034.vdocuments.site/reader034/viewer/2022050904/547216a5b4af9fc30a8b4d6f/html5/thumbnails/7.jpg)
Interface Design • Human interface
• Made for people • Is where a real person meets with interactive system • How does your system work with people • How do people work with your system
• Simple design is good design • People like nice surroundings • Design should communicate, not just dazzle
![Page 8: Multimedia Development Lifecycle](https://reader034.vdocuments.site/reader034/viewer/2022050904/547216a5b4af9fc30a8b4d6f/html5/thumbnails/8.jpg)
Interface Design • Object should visually mimic their function • Consistency is key • Stability is key • User should be in control
![Page 9: Multimedia Development Lifecycle](https://reader034.vdocuments.site/reader034/viewer/2022050904/547216a5b4af9fc30a8b4d6f/html5/thumbnails/9.jpg)
Susan Kare
![Page 10: Multimedia Development Lifecycle](https://reader034.vdocuments.site/reader034/viewer/2022050904/547216a5b4af9fc30a8b4d6f/html5/thumbnails/10.jpg)
Standard Interface Elements • Cursors
• Arrows, I-bars, drag handles, magnifying glass
![Page 11: Multimedia Development Lifecycle](https://reader034.vdocuments.site/reader034/viewer/2022050904/547216a5b4af9fc30a8b4d6f/html5/thumbnails/11.jpg)
Standard Interface Elements • Buttons
• Single-state, multi-state, reverting, non-reverting
![Page 12: Multimedia Development Lifecycle](https://reader034.vdocuments.site/reader034/viewer/2022050904/547216a5b4af9fc30a8b4d6f/html5/thumbnails/12.jpg)
Standard Interface Elements • Hyperlinks
• External and internal, with or without feedback
• User Input fields • Text boxes, check boxes, radio buttons
• Scroll Bars
![Page 13: Multimedia Development Lifecycle](https://reader034.vdocuments.site/reader034/viewer/2022050904/547216a5b4af9fc30a8b4d6f/html5/thumbnails/13.jpg)
User Initiated Reactions • Cursor Changes
• Tool changes, context related changes
• Button States • Rollover, rollout, pressed, unpressed
• Keyboard Input • Copy-paste, arrow keys
• Disjointed Rollovers • Rolling over one object which changes the content of appearance of
another
![Page 14: Multimedia Development Lifecycle](https://reader034.vdocuments.site/reader034/viewer/2022050904/547216a5b4af9fc30a8b4d6f/html5/thumbnails/14.jpg)
Authoring Vs. The Web • Standard HTML pages share common interface elements,
which have limited styling capabilities • Flash and shockwave pages are virtually limitless in their
capabilities for custom interface design • Authored interactive design can be Web Pages, CD-ROM,
Games, Desktop Applications
![Page 15: Multimedia Development Lifecycle](https://reader034.vdocuments.site/reader034/viewer/2022050904/547216a5b4af9fc30a8b4d6f/html5/thumbnails/15.jpg)
Standard Interface
![Page 16: Multimedia Development Lifecycle](https://reader034.vdocuments.site/reader034/viewer/2022050904/547216a5b4af9fc30a8b4d6f/html5/thumbnails/16.jpg)
Non-Standard Interface
![Page 17: Multimedia Development Lifecycle](https://reader034.vdocuments.site/reader034/viewer/2022050904/547216a5b4af9fc30a8b4d6f/html5/thumbnails/17.jpg)
Non-Standard Interface
![Page 18: Multimedia Development Lifecycle](https://reader034.vdocuments.site/reader034/viewer/2022050904/547216a5b4af9fc30a8b4d6f/html5/thumbnails/18.jpg)
CD-Rom Interface
![Page 19: Multimedia Development Lifecycle](https://reader034.vdocuments.site/reader034/viewer/2022050904/547216a5b4af9fc30a8b4d6f/html5/thumbnails/19.jpg)
Standard Vs. Non-Standard • Standard elements have the benefit of wide distribution –
you can assume many people will have used similar widgets before, but also presents a constrain designer
• Non-standard or custom elements have the benefit of
design freedom, but can become confusing for non-savy users
![Page 20: Multimedia Development Lifecycle](https://reader034.vdocuments.site/reader034/viewer/2022050904/547216a5b4af9fc30a8b4d6f/html5/thumbnails/20.jpg)
Standard Vs. Non-Standard • General rule: “Keep the principles of standard interface elements in mind when designing elements from scratch in director and flash”
![Page 21: Multimedia Development Lifecycle](https://reader034.vdocuments.site/reader034/viewer/2022050904/547216a5b4af9fc30a8b4d6f/html5/thumbnails/21.jpg)
CD-Rom Vs. The Web Contra : • Limited lifespan of authored content • High production and distribution cost • Constrained to traditional Software Development Lifecycle
(SDLC) • Cross-platform development can be pain in the neck
![Page 22: Multimedia Development Lifecycle](https://reader034.vdocuments.site/reader034/viewer/2022050904/547216a5b4af9fc30a8b4d6f/html5/thumbnails/22.jpg)
CD-Rom Vs. The Web Pro : • No bandwidth issues; can be used to distribute large files
like high quality DVD, Video, Games • Best of both worlds; can be used to access online data
and content • Access to local file system • Tangible product
![Page 23: Multimedia Development Lifecycle](https://reader034.vdocuments.site/reader034/viewer/2022050904/547216a5b4af9fc30a8b4d6f/html5/thumbnails/23.jpg)
Desktop Application
![Page 24: Multimedia Development Lifecycle](https://reader034.vdocuments.site/reader034/viewer/2022050904/547216a5b4af9fc30a8b4d6f/html5/thumbnails/24.jpg)
Design Style
• Symmetry
• Emphasis
• Contrast
![Page 25: Multimedia Development Lifecycle](https://reader034.vdocuments.site/reader034/viewer/2022050904/547216a5b4af9fc30a8b4d6f/html5/thumbnails/25.jpg)
Design Style
• Balance
• High Contrast
• Emphasis
![Page 26: Multimedia Development Lifecycle](https://reader034.vdocuments.site/reader034/viewer/2022050904/547216a5b4af9fc30a8b4d6f/html5/thumbnails/26.jpg)
Design Style
• Pattern Rhythm
• Emphasis
• Proportion
![Page 27: Multimedia Development Lifecycle](https://reader034.vdocuments.site/reader034/viewer/2022050904/547216a5b4af9fc30a8b4d6f/html5/thumbnails/27.jpg)
Page Types • Splash Page • Homepage, Main Page • Content Page, Information Page • Search Page • User Input • Archive Page, Listing Page • Sitemap • Interactive
![Page 28: Multimedia Development Lifecycle](https://reader034.vdocuments.site/reader034/viewer/2022050904/547216a5b4af9fc30a8b4d6f/html5/thumbnails/28.jpg)
Splash Page
![Page 29: Multimedia Development Lifecycle](https://reader034.vdocuments.site/reader034/viewer/2022050904/547216a5b4af9fc30a8b4d6f/html5/thumbnails/29.jpg)
Homepage or Main Page
![Page 30: Multimedia Development Lifecycle](https://reader034.vdocuments.site/reader034/viewer/2022050904/547216a5b4af9fc30a8b4d6f/html5/thumbnails/30.jpg)
Content or Information Page
![Page 31: Multimedia Development Lifecycle](https://reader034.vdocuments.site/reader034/viewer/2022050904/547216a5b4af9fc30a8b4d6f/html5/thumbnails/31.jpg)
Search Page
![Page 32: Multimedia Development Lifecycle](https://reader034.vdocuments.site/reader034/viewer/2022050904/547216a5b4af9fc30a8b4d6f/html5/thumbnails/32.jpg)
User Input Page
![Page 33: Multimedia Development Lifecycle](https://reader034.vdocuments.site/reader034/viewer/2022050904/547216a5b4af9fc30a8b4d6f/html5/thumbnails/33.jpg)
Common Layout Terms • Body
• Main content, text, images
• Header • Logo, illustration, page or company name
• Footer • Copyright and privacy information
• Menu • Simple, drop-down, expanding
• Sidebar • Related information, metadata, links, feeds
![Page 34: Multimedia Development Lifecycle](https://reader034.vdocuments.site/reader034/viewer/2022050904/547216a5b4af9fc30a8b4d6f/html5/thumbnails/34.jpg)
Common Layout Terms • Breadcrumbs
• Link trails to show navigation progress
• Pull Quotes • Highlighted, indented sentence or paragraph of interest
• Forms • Data entry elements, such as log in fields, search fields, email subscription
fields
![Page 35: Multimedia Development Lifecycle](https://reader034.vdocuments.site/reader034/viewer/2022050904/547216a5b4af9fc30a8b4d6f/html5/thumbnails/35.jpg)
Body
![Page 36: Multimedia Development Lifecycle](https://reader034.vdocuments.site/reader034/viewer/2022050904/547216a5b4af9fc30a8b4d6f/html5/thumbnails/36.jpg)
Header
![Page 37: Multimedia Development Lifecycle](https://reader034.vdocuments.site/reader034/viewer/2022050904/547216a5b4af9fc30a8b4d6f/html5/thumbnails/37.jpg)
Sidebar
![Page 38: Multimedia Development Lifecycle](https://reader034.vdocuments.site/reader034/viewer/2022050904/547216a5b4af9fc30a8b4d6f/html5/thumbnails/38.jpg)
Breadcrumb
![Page 39: Multimedia Development Lifecycle](https://reader034.vdocuments.site/reader034/viewer/2022050904/547216a5b4af9fc30a8b4d6f/html5/thumbnails/39.jpg)
Pull Quotes
![Page 40: Multimedia Development Lifecycle](https://reader034.vdocuments.site/reader034/viewer/2022050904/547216a5b4af9fc30a8b4d6f/html5/thumbnails/40.jpg)
SITE MAPS, NAVIGATION AND FLOWCHART
![Page 41: Multimedia Development Lifecycle](https://reader034.vdocuments.site/reader034/viewer/2022050904/547216a5b4af9fc30a8b4d6f/html5/thumbnails/41.jpg)
What are site maps for? • Graphical overview of the page structure of a site
• Show how pages link together • Linear • Hierarchial • Cobweb
![Page 42: Multimedia Development Lifecycle](https://reader034.vdocuments.site/reader034/viewer/2022050904/547216a5b4af9fc30a8b4d6f/html5/thumbnails/42.jpg)
Linear navigation
![Page 43: Multimedia Development Lifecycle](https://reader034.vdocuments.site/reader034/viewer/2022050904/547216a5b4af9fc30a8b4d6f/html5/thumbnails/43.jpg)
Hierarchical navigation
![Page 44: Multimedia Development Lifecycle](https://reader034.vdocuments.site/reader034/viewer/2022050904/547216a5b4af9fc30a8b4d6f/html5/thumbnails/44.jpg)
Cobweb navigation
![Page 45: Multimedia Development Lifecycle](https://reader034.vdocuments.site/reader034/viewer/2022050904/547216a5b4af9fc30a8b4d6f/html5/thumbnails/45.jpg)
Site map example
![Page 46: Multimedia Development Lifecycle](https://reader034.vdocuments.site/reader034/viewer/2022050904/547216a5b4af9fc30a8b4d6f/html5/thumbnails/46.jpg)
What are navigational flowchart? • Graphical representation of the user experience • Set of icons used to describe the way the user interacts with the site
• Also describe back-end processing • Form validation • Database lookups • Downloads
![Page 47: Multimedia Development Lifecycle](https://reader034.vdocuments.site/reader034/viewer/2022050904/547216a5b4af9fc30a8b4d6f/html5/thumbnails/47.jpg)
Thank You Leoni Rahmawati 2011