she saysdigiprodcrsetools2 23_sep_2011
TRANSCRIPT
Digital Production Course: Solutions, Resources, Documents and Tools09.23.11
CHRIS BERGER@BERGS
Monday, October 10, 2011
Design Comps
Monday, October 10, 2011
Design Comps
Monday, October 10, 2011
•Microsite and mash-up
•Always on Destination
•User Generated Content
•Google Maps API
•HTML/Ajax
•Flash
•Facebook Connect API
•Twitter Auth API
•User Experience
Red Bull Street Art
Monday, October 10, 2011
Monday, October 10, 2011
Monday, October 10, 2011
Interactive Experience
Monday, October 10, 2011
Planning &Building
Monday, October 10, 2011
•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
Digital Production: the Role of the Producer
Monday, October 10, 2011
SOFTWARE•An interactive system that supports a User Experience
Monday, October 10, 2011
Monday, October 10, 2011
SOFTWARE (on the web)
•Browser
•Application
•Server
Monday, October 10, 2011
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
SOFTWARE (Evolution)
PAGE STAGE
Monday, October 10, 2011
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
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
Monday, October 10, 2011
Monday, October 10, 2011
Monday, October 10, 2011
Monday, October 10, 2011
Monday, October 10, 2011
Monday, October 10, 2011
Monday, October 10, 2011
Monday, October 10, 2011
Monday, October 10, 2011
Monday, October 10, 2011
Monday, October 10, 2011
PLANNING•Why you need to plan (a lot!): The People, Documents, and Tools you need to map out an experience
Monday, October 10, 2011
Producer vs. PM Producer
•Producer: Works out of Lead Agency to Manage Specialist Agency
•Project Manager: Works out of Specialist Agency, manages specific resources and tasks... (and Lead Agency)
Monday, October 10, 2011
Interactive Experience
Documentation
Code & Asset integration, and
host
Architects
Coders
Digital Planning
Tools & Services
Monday, October 10, 2011
Phases - LifecycleProject Plan
Discovery
Define
Design
Build
QA Testing
Alpha -> Beta ->Gold
Monday, October 10, 2011
SolutionsDocuments,
Tools &Services
People/Resources
The Production Matrix
Planning Arsenal
Monday, October 10, 2011
SolutionsR
esou
rces
Scope [time & cost]
•Banners/Stnd
•Mobile apps
•Tablet apps
•Microsites/Flash
•OS widgets/apps•Digital Installations
•Digital Systems/Platforms
•Microsites/NOFLASH
•Banners/Rich
$5-40K $20-200K $100K - $250K $200 and up6 weeks 6 months and upTime:
Cost:
Monday, October 10, 2011
Planning the experience
•Creative Development
•Functionality
•Technology
•User Experience
Monday, October 10, 2011
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
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
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
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
Monday, October 10, 2011
Lifecycle/Timing
•Scheduling Philosophy
•Phases
•Project Setup
Monday, October 10, 2011
Phases - DocumentsProject 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
Phases - ResourcesProducer
Technical Director
UX, TD, CT
UX, ID, CT
FE Coders
BE CodersBE Coders
TestersTesters
Monday, October 10, 2011
Monday, October 10, 2011
Gantt Chart Schedule
Monday, October 10, 2011
Project Plan
Monday, October 10, 2011
Project Plan
Monday, October 10, 2011
Project Plan
Monday, October 10, 2011
Project Plan
Monday, October 10, 2011
Primary Scope Documents
Monday, October 10, 2011
•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
Functional Requirements
Monday, October 10, 2011
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
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
PRODUCING•What and how the People, Documents, and Tools need to work together to create the experience
Monday, October 10, 2011
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
Site Map
Monday, October 10, 2011
Site Map
Monday, October 10, 2011
Flow Chart - Lamp working?
Monday, October 10, 2011
Flow Chart - Driving a Car
Monday, October 10, 2011
Flow ChartFlow Chart
Monday, October 10, 2011
WireFrames
Monday, October 10, 2011
WireFrames
Monday, October 10, 2011
Visio
Monday, October 10, 2011
Building/Coding/Asset Interation
•HTML PRODUCTION: Aptana, Eclipse, DreamWeaver•FLASH PRODUCTION: Flash•API Integration: Coda
Monday, October 10, 2011
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
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
How Hosting Works
Rackspace
register.com
www nameservers
Browser
ISP: AT&T
Monday, October 10, 2011
FTP - cyberduckFTP: CyberDuck
Monday, October 10, 2011
Hosting: Rackspace
Monday, October 10, 2011
Basecamp
Monday, October 10, 2011
Bugzilla
Monday, October 10, 2011
Google Analytics
Monday, October 10, 2011
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
Appendix: Production Menu Matrix!
Monday, October 10, 2011
Monday, October 10, 2011
Monday, October 10, 2011
Monday, October 10, 2011
Monday, October 10, 2011
Monday, October 10, 2011
Monday, October 10, 2011