Week 2 Lecturing P420 - 1 CMLA Multimedia Presentation for Public Relations Swiss German University Indonesia (13 September 2011)

1. MULTIMEDIA
DEVELOPMENT
LIFECYCLE (MDL)
Week 2
P420 - 1 CMLA
Multimedia Presentation
for Public Relations
Swiss German University Indonesia

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

3. 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

4. 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

5. 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

6. DESIGNING
MULTIMEDIA
P420 - 1 CMLA
Multimedia Presentation
for Public Relations
Week 2 Lecturing

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

8. Interface Design
• Object should visually mimic their function
• Consistency is key
• Stability is key
• User should be in control

9. Susan Kare

10. Standard Interface Elements
• Cursors
• Arrows, I-bars, drag handles, magnifying glass

11. Standard Interface Elements
• Buttons
• Single-state, multi-state, reverting, non-reverting

12. Standard Interface Elements
• Hyperlinks
• External and internal, with or without feedback
• User Input fields
• Text boxes, check boxes, radio buttons
• Scroll Bars

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

14. 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

15. Standard Interface

16. Non-Standard Interface

17. Non-Standard Interface

18. CD-Rom Interface

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

20. Standard Vs. Non-Standard
• General rule:
“Keep the principles of standard interface elements
in mind when designing elements from scratch in director
and flash”

21. 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

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

23. Desktop Application

24. Design Style
• Symmetry
• Emphasis
• Contrast

25. Design Style
• Balance
• High
Contrast
• Emphasis

26. Design Style
• Pattern
Rhythm
• Emphasis
• Proportion

27. Page Types
• Splash Page
• Homepage, Main Page
• Content Page, Information Page
• Search Page
• User Input
• Archive Page, Listing Page
• Sitemap
• Interactive

28. Splash Page

29. Homepage or Main Page

30. Content or Information Page

31. Search Page

32. User Input Page

33. 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

34. 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

35. Body

36. Header

37. Sidebar

38. Breadcrumb

39. Pull Quotes

40. SITE MAPS, NAVIGATION
AND FLOWCHART

41. What are site maps for?
• Graphical overview of the page structure of a site
• Show how pages link together
• Linear
• Hierarchial
• Cobweb

42. Linear navigation

43. Hierarchical navigation

44. Cobweb navigation

45. Site map example

46. 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

47. Thank You
Leoni Rahmawati 2011