She saysdigiprodcrsetools2 23_sep_2011

2,138
-1

Published on

Published in: Business, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,138
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
17
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

She saysdigiprodcrsetools2 23_sep_2011

  1. 1. Digital Production Course: Solutions, Resources, Documents and Tools 09.23.11 CHRIS BERGER @BERGSMonday, October 10, 2011
  2. 2. Design CompsMonday, October 10, 2011
  3. 3. Design CompsMonday, October 10, 2011
  4. 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 ExperienceMonday, October 10, 2011
  5. 5. Monday, October 10, 2011
  6. 6. Monday, October 10, 2011
  7. 7. Interactive ExperienceMonday, October 10, 2011
  8. 8. Planning & BuildingMonday, October 10, 2011
  9. 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 examplesMonday, October 10, 2011
  10. 10. SOFTWARE •Aninteractive system that supports a User ExperienceMonday, October 10, 2011
  11. 11. Monday, October 10, 2011
  12. 12. SOFTWARE (on the web) •Browser •Application •ServerMonday, October 10, 2011
  13. 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. 14. SOFTWARE (Evolution) PAGE STAGEMonday, October 10, 2011
  15. 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 hardwareMonday, October 10, 2011
  16. 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 tabletsMonday, October 10, 2011
  17. 17. Monday, October 10, 2011
  18. 18. Monday, October 10, 2011
  19. 19. Monday, October 10, 2011
  20. 20. Monday, October 10, 2011
  21. 21. Monday, October 10, 2011
  22. 22. Monday, October 10, 2011
  23. 23. Monday, October 10, 2011
  24. 24. Monday, October 10, 2011
  25. 25. Monday, October 10, 2011
  26. 26. Monday, October 10, 2011
  27. 27. Monday, October 10, 2011
  28. 28. PLANNING •Why you need to plan (a lot!): The People, Documents, and Tools you need to map out an experienceMonday, October 10, 2011
  29. 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. 30. Digital Planning Architects Documentation Interactive Experience Code & Asset integration, and Tools & Services Coders hostMonday, October 10, 2011
  31. 31. Phases - Lifecycle Project Plan Discovery Define Design Build Alpha -> Beta ->Gold QA TestingMonday, October 10, 2011
  32. 32. Planning Arsenal Documents, People/ Solutions Tools & Resources Services The Production MatrixMonday, October 10, 2011
  33. 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. 34. Planning the experience •Creative Development •Functionality •Technology •User ExperienceMonday, October 10, 2011
  35. 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 RequirementsMonday, October 10, 2011
  36. 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, SQLMonday, October 10, 2011
  37. 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, SQLMonday, October 10, 2011
  38. 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 AnalyticsMonday, October 10, 2011
  39. 39. Monday, October 10, 2011
  40. 40. Lifecycle/Timing •Scheduling Philosophy •Phases •Project SetupMonday, October 10, 2011
  41. 41. Phases - Documents Project Plan - Schedule Functional & Technical Requirements/ Site Map & Wire Frames Design Comps, Copy Deck, Style Guide Code Development, API integration QA TestingMonday, October 10, 2011
  42. 42. Phases - Resources Producer Technical Director UX, TD, CT UX, ID, CT FE Coders BE Coders BE Coders Testers TestersMonday, October 10, 2011
  43. 43. Monday, October 10, 2011
  44. 44. Gantt Chart ScheduleMonday, October 10, 2011
  45. 45. Project PlanMonday, October 10, 2011
  46. 46. Project PlanMonday, October 10, 2011
  47. 47. Project PlanMonday, October 10, 2011
  48. 48. Project PlanMonday, October 10, 2011
  49. 49. Primary Scope DocumentsMonday, October 10, 2011
  50. 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 LINKMonday, October 10, 2011
  51. 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. 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. 53. PRODUCING •What and how the People, Documents, and Tools need to work together to create the experienceMonday, October 10, 2011
  54. 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 AnalyticsMonday, October 10, 2011
  55. 55. Site MapMonday, October 10, 2011
  56. 56. Site MapMonday, October 10, 2011
  57. 57. Flow Chart - Lamp working?Monday, October 10, 2011
  58. 58. Flow Chart - Driving a CarMonday, October 10, 2011
  59. 59. Flow Chart Flow ChartMonday, October 10, 2011
  60. 60. WireFramesMonday, October 10, 2011
  61. 61. WireFramesMonday, October 10, 2011
  62. 62. VisioMonday, October 10, 2011
  63. 63. Building/Coding/ Asset Interation •HTML PRODUCTION: Aptana, Eclipse, DreamWeaver •FLASH PRODUCTION: Flash •API Integration: CodaMonday, October 10, 2011
  64. 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, retestMonday, October 10, 2011
  65. 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 ServersMonday, October 10, 2011
  66. 66. How Hosting Works register.com Rackspace www name servers ISP: AT&T BrowserMonday, October 10, 2011
  67. 67. FTP: CyberDuck FTP - cyberduckMonday, October 10, 2011
  68. 68. Hosting: RackspaceMonday, October 10, 2011
  69. 69. BasecampMonday, October 10, 2011
  70. 70. BugzillaMonday, October 10, 2011
  71. 71. Google AnalyticsMonday, October 10, 2011
  72. 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 efficientlyMonday, October 10, 2011
  73. 73. Appendix: Production Menu Matrix!Monday, October 10, 2011
  74. 74. Monday, October 10, 2011
  75. 75. Monday, October 10, 2011
  76. 76. Monday, October 10, 2011
  77. 77. Monday, October 10, 2011
  78. 78. Monday, October 10, 2011
  79. 79. Monday, October 10, 2011
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×