She saysdigiprodcrsetools2 23_sep_2011
2 likes3,314 views
The document discusses digital production and provides guidance on planning, building, and producing digital projects. It covers topics like software development, digital advertising, planning documents and tools, the project lifecycle and team roles, and quality assurance testing. Production best practices emphasized include collaborating with experts, reverse engineering similar projects, and verifying technical feasibility before designing experiences.
![Solutions
•Digital Systems/Platforms
Resources
•Microsites/Flash
•Microsites/NOFLASH
•Tablet apps
•OS widgets/apps •Mobile apps
•Digital Installations
•Banners/Rich
•Banners/Stnd
Time: 6 weeks 6 months and up
Cost: $5-40K $20-200K $100K - $250K $200 and up
Scope [time & cost]
Monday, October 10, 2011](https://image.slidesharecdn.com/shesaysdigiprodcrsetools223sep2011-111108130020-phpapp02/85/She-saysdigiprodcrsetools2-23_sep_2011-33-320.jpg)
She saysdigiprodcrsetools2 23_sep_2011
- 1. Digital Production Course: Solutions, Resources, Documents and Tools 09.23.11 CHRIS BERGER @BERGS Monday, October 10, 2011
- 2. Design Comps Monday, October 10, 2011
- 3. Design Comps Monday, October 10, 2011
- 4. Red Bull Street Art •Microsite and mash-up •Always on Destination •User Generated Content •Google Maps API •HTML/Ajax •Flash •Facebook Connect API •Twitter Auth API •User Experience Monday, October 10, 2011
- 5. Monday, October 10, 2011
- 6. Monday, October 10, 2011
- 7. Interactive Experience Monday, October 10, 2011
- 8. Planning & Building Monday, October 10, 2011
- 9. Digital Production: the Role of the Producer •SOFTWARE AS CONCEPT: Base understanding of software development, examples. • PLANNING: Timing,Teams, Documents • PRODUCING: Ensure collaboration and coordination of all UX, Design, Assets, and Code - Tools and Documentation examples Monday, October 10, 2011
- 10. SOFTWARE •Aninteractive system that supports a User Experience Monday, October 10, 2011
- 11. Monday, October 10, 2011
- 12. SOFTWARE (on the web) •Browser •Application •Server Monday, October 10, 2011
- 13. SOFTWARE (Client and Server) •Browser Displays Code •Client Side = Front End: HTML, FLASH •Server Side = Back End - Data, Data Processing, WWW Server OS and Hosting (ISP) Monday, October 10, 2011
- 14. SOFTWARE (Evolution) PAGE STAGE Monday, October 10, 2011
- 15. SOFTWARE Objects + Connectivity •Objects in a Browser or Applications •Connectivity to internet + •Display and Data •APIs = (Application Programming Interface) - objects talk to eachother, and share functionality •Objects on a device •SDK (Software Developer Kit) applications talk to device hardware Monday, October 10, 2011
- 16. What Is Digital Advertising? •Banners (Polite and Rich) •Interactive and Video •Websites (Basic, Dynamic, Enterpise) •Microsites, Facebook Tabs, Youtube Channels •Applications (Web based, Mobile) •Facebook Applications, iPhone & iPad Applications, Android and windows phones and tablets Monday, October 10, 2011
- 17. Monday, October 10, 2011
- 18. Monday, October 10, 2011
- 19. Monday, October 10, 2011
- 20. Monday, October 10, 2011
- 21. Monday, October 10, 2011
- 22. Monday, October 10, 2011
- 23. Monday, October 10, 2011
- 24. Monday, October 10, 2011
- 25. Monday, October 10, 2011
- 26. Monday, October 10, 2011
- 27. Monday, October 10, 2011
- 28. PLANNING •Why you need to plan (a lot!): The People, Documents, and Tools you need to map out an experience Monday, October 10, 2011
- 29. Producer vs. PM Producer •Producer: Works out of Lead Agency to Manage Specialist Agency •ProjectManager: Works out of Specialist Agency, manages specific resources and tasks... (and Lead Agency) Monday, October 10, 2011
- 30. Digital Planning Architects Documentation Interactive Experience Code & Asset integration, and Tools & Services Coders host Monday, October 10, 2011
- 31. Phases - Lifecycle Project Plan Discovery Define Design Build Alpha -> Beta ->Gold QA Testing Monday, October 10, 2011
- 32. Planning Arsenal Documents, People/ Solutions Tools & Resources Services The Production Matrix Monday, October 10, 2011
- 33. Solutions •Digital Systems/Platforms Resources •Microsites/Flash •Microsites/NOFLASH •Tablet apps •OS widgets/apps •Mobile apps •Digital Installations •Banners/Rich •Banners/Stnd Time: 6 weeks 6 months and up Cost: $5-40K $20-200K $100K - $250K $200 and up Scope [time & cost] Monday, October 10, 2011
- 34. Planning the experience •Creative Development •Functionality •Technology •User Experience Monday, October 10, 2011
- 35. Planning: Feasibility Philosophy •Translate Creative Concept •Producer Collaborate with experts to reverse engineer experiences, and verify requirements are possible •Always source existing similar examples •Agree on What it does: Functional Requirements Monday, October 10, 2011
- 36. Team •Associate Producer •Producer •Sr. Producer •Exec. Producer •Art Director •Copy Writer •Information Architect •Interactive Strategist •Creative Technologist •Interaction Designer •Technology Engineer •Front End coder HTML, HTML5, xHTML, ajax, ruby on rails, etc. •Front End coder ASPx •Front End coder FL •Front End Coder animation FL •Back-end Coder - PHP, asp, js, flash, Objective C., etc. •Back-end Coder Data - MySQL, SQL Monday, October 10, 2011
- 37. Team •Associate Producer •Producer •Sr. Producer •Exec. Producer •Art Director •Copy Writer •Information Architect •Interactive Strategist •Creative Technologist •Interaction Designer •Technology Engineer •Front End coder HTML, HTML5, xHTML, ajax, ruby on rails, etc. •Front End coder ASPx •Front End coder FL •Front End Coder animation FL •Back-end Coder - PHP, asp, js, flash, Objective C., etc. •Back-end Coder Data - MySQL, SQL Monday, October 10, 2011
- 38. Process Tools & Svcs •Project Plans/Gantt Charts: MS Project (PC only), Merlin (mac) •SITE MAPS: Visio (PC only) •WIRE FRAMES:Axure (mac/pc) •HTML PRODUCTION: Coda, Aptana, Eclipse, DreamWeaver •Social platform Dashboards: Facebook, Youtube •FLASH PRODUCTION: Flash •ONLINE PROJECT COLLABORATION: Extranet - BaseCamp •CENTRALIZED QA TESTING TOOL: Jira, Bugzilla •SITE/DATA HOSTING: Dreamhost, Rackspace •SITE ANALYTICS: Omniture, Google Analytics Monday, October 10, 2011
- 39. Monday, October 10, 2011
- 40. Lifecycle/Timing •Scheduling Philosophy •Phases •Project Setup Monday, October 10, 2011
- 41. Phases - Documents Project Plan - Schedule Functional & Technical Requirements/ Site Map & Wire Frames Design Comps, Copy Deck, Style Guide Code Development, API integration QA Testing Monday, October 10, 2011
- 42. Phases - Resources Producer Technical Director UX, TD, CT UX, ID, CT FE Coders BE Coders BE Coders Testers Testers Monday, October 10, 2011
- 43. Monday, October 10, 2011
- 44. Gantt Chart Schedule Monday, October 10, 2011
- 45. Project Plan Monday, October 10, 2011
- 46. Project Plan Monday, October 10, 2011
- 47. Project Plan Monday, October 10, 2011
- 48. Project Plan Monday, October 10, 2011
- 49. Primary Scope Documents Monday, October 10, 2011
- 50. Functional Requirements •How a particular experience functions, what a system is supposed to accomplish •A typical functional requirement will contain a unique name and number, a brief summary, and a rationale. This information is used to help the reader understand why the requirement is needed, and to track the requirement through the development of the system. •EG: Video Player: FF, RW, PAUSE, PLAY, REPLAY, SCRUB, FULL SCREEN, FEATURE LINK Monday, October 10, 2011
- 51. Technical Requirements •How a system is supposed to accomplish the functional requirements •A typical Technical requirement will contain a unique name and number, and a description of the technical criteria for a particular funciton •EG: The dimensions of the site are a minimum of 1024x768, but should elegantly accommodate for larger browser windows up to 1440x900. Monday, October 10, 2011
- 52. Functional & Technical Specifications •How a particular experience functions, what a system is supposed to accomplish •a specification is a document that clearly and accurately describes the essential technical requirements for items, materials, or services including the procedures by which it can be determined that the requirements have been met. Specifications help avoid duplication and inconsistencies, allow for accurate estimates of necessary work and resources, act as a negotiation and reference document for engineering changes, provide documentation of configuration, and allow for consistent communication among those responsible for the eight primary functions of Systems Engineering. They provide a precise idea of the problem to be solved so that they can efficiently design the system and estimate the cost of design alternatives. They provide guidance to testers for verification (qualification) of each technical requirement. Monday, October 10, 2011
- 53. PRODUCING •What and how the People, Documents, and Tools need to work together to create the experience Monday, October 10, 2011
- 54. Process Tools, Docs & Svcs •Project Plans/Gantt Charts: MS Project (PC only), Merlin (mac) •SITE MAPS: Visio (PC only) •WIRE FRAMES:Axure (mac/pc) •HTML PRODUCTION: Aptana, Eclipse, DreamWeaver •FLASH PRODUCTION: Flash •ONLINE PROJECT COLLABORATION: Extranet - BaseCamp •FTP CLIENT: Cyber Duck •CENTRALIZED QA TESTING TOOL: Jira, Bugzilla •SITE/DATA HOSTING: Dreamhost, Rackspace •SITE ANALYTICS: Omniture, Google Analytics Monday, October 10, 2011
- 55. Site Map Monday, October 10, 2011
- 56. Site Map Monday, October 10, 2011
- 57. Flow Chart - Lamp working? Monday, October 10, 2011
- 58. Flow Chart - Driving a Car Monday, October 10, 2011
- 59. Flow Chart Flow Chart Monday, October 10, 2011
- 60. WireFrames Monday, October 10, 2011
- 61. WireFrames Monday, October 10, 2011
- 62. Visio Monday, October 10, 2011
- 63. Building/Coding/ Asset Interation •HTML PRODUCTION: Aptana, Eclipse, DreamWeaver •FLASH PRODUCTION: Flash •API Integration: Coda Monday, October 10, 2011
- 64. Site Testing: Quality Assurance •Quality Assurance Plan: Mirrors Functional and Technical Specs •Uses wireframes as a guide •Cycles with site Builds •Online Bug Tracking Tool protocol - Bugs, identify, describe, assign, resolve, retest Monday, October 10, 2011
- 65. Hosting Specification •Defines where and how the site will be hosted •Comply with Client digital governance •Feasibility of project depends on hosting restrictions •Ownership of Domain Names and Name Servers Monday, October 10, 2011
- 66. How Hosting Works register.com Rackspace www name servers ISP: AT&T Browser Monday, October 10, 2011
- 67. FTP: CyberDuck FTP - cyberduck Monday, October 10, 2011
- 68. Hosting: Rackspace Monday, October 10, 2011
- 69. Basecamp Monday, October 10, 2011
- 70. Bugzilla Monday, October 10, 2011
- 71. Google Analytics Monday, October 10, 2011
- 72. Take away Pointers •Collaborate with experts to plan and produce •Reverse engineer similar whenever possible •Invention: No solution is the same, but there are lots of similarities. •Verify: It’s OK if it’s never been done, it’s NOT OK if it can’t be •Tools enable resources to create a better experience more efficiently Monday, October 10, 2011
- 73. Appendix: Production Menu Matrix! Monday, October 10, 2011
- 74. Monday, October 10, 2011
- 75. Monday, October 10, 2011
- 76. Monday, October 10, 2011
- 77. Monday, October 10, 2011
- 78. Monday, October 10, 2011
- 79. Monday, October 10, 2011