She saysdigiprodcrsetools2 23_sep_2011

79
Digital Production Course: Solutions, Resources, Documents and Tools 09.23.11 CHRIS BERGER @BERGS Monday, October 10, 2011

Transcript of She saysdigiprodcrsetools2 23_sep_2011

Page 1: She saysdigiprodcrsetools2 23_sep_2011

Digital Production Course: Solutions, Resources, Documents and Tools09.23.11

CHRIS BERGER@BERGS

Monday, October 10, 2011

Page 2: She saysdigiprodcrsetools2 23_sep_2011

Design Comps

Monday, October 10, 2011

Page 3: She saysdigiprodcrsetools2 23_sep_2011

Design Comps

Monday, October 10, 2011

Page 4: She saysdigiprodcrsetools2 23_sep_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

Page 5: She saysdigiprodcrsetools2 23_sep_2011

Monday, October 10, 2011

Page 6: She saysdigiprodcrsetools2 23_sep_2011

Monday, October 10, 2011

Page 7: She saysdigiprodcrsetools2 23_sep_2011

Interactive Experience

Monday, October 10, 2011

Page 8: She saysdigiprodcrsetools2 23_sep_2011

Planning &Building

Monday, October 10, 2011

Page 9: She saysdigiprodcrsetools2 23_sep_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

Page 10: She saysdigiprodcrsetools2 23_sep_2011

SOFTWARE•An interactive system that supports a User Experience

Monday, October 10, 2011

Page 11: She saysdigiprodcrsetools2 23_sep_2011

Monday, October 10, 2011

Page 12: She saysdigiprodcrsetools2 23_sep_2011

SOFTWARE (on the web)

•Browser

•Application

•Server

Monday, October 10, 2011

Page 13: She saysdigiprodcrsetools2 23_sep_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

Page 14: She saysdigiprodcrsetools2 23_sep_2011

SOFTWARE (Evolution)

PAGE STAGE

Monday, October 10, 2011

Page 15: She saysdigiprodcrsetools2 23_sep_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

Page 16: She saysdigiprodcrsetools2 23_sep_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

Page 17: She saysdigiprodcrsetools2 23_sep_2011

Monday, October 10, 2011

Page 18: She saysdigiprodcrsetools2 23_sep_2011

Monday, October 10, 2011

Page 19: She saysdigiprodcrsetools2 23_sep_2011

Monday, October 10, 2011

Page 20: She saysdigiprodcrsetools2 23_sep_2011

Monday, October 10, 2011

Page 21: She saysdigiprodcrsetools2 23_sep_2011

Monday, October 10, 2011

Page 22: She saysdigiprodcrsetools2 23_sep_2011

Monday, October 10, 2011

Page 23: She saysdigiprodcrsetools2 23_sep_2011

Monday, October 10, 2011

Page 24: She saysdigiprodcrsetools2 23_sep_2011

Monday, October 10, 2011

Page 25: She saysdigiprodcrsetools2 23_sep_2011

Monday, October 10, 2011

Page 26: She saysdigiprodcrsetools2 23_sep_2011

Monday, October 10, 2011

Page 27: She saysdigiprodcrsetools2 23_sep_2011

Monday, October 10, 2011

Page 28: She saysdigiprodcrsetools2 23_sep_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

Page 29: She saysdigiprodcrsetools2 23_sep_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

Page 30: She saysdigiprodcrsetools2 23_sep_2011

Interactive Experience

Documentation

Code & Asset integration, and

host

Architects

Coders

Digital Planning

Tools & Services

Monday, October 10, 2011

Page 31: She saysdigiprodcrsetools2 23_sep_2011

Phases - LifecycleProject Plan

Discovery

Define

Design

Build

QA Testing

Alpha -> Beta ->Gold

Monday, October 10, 2011

Page 32: She saysdigiprodcrsetools2 23_sep_2011

SolutionsDocuments,

Tools &Services

People/Resources

The Production Matrix

Planning Arsenal

Monday, October 10, 2011

Page 33: She saysdigiprodcrsetools2 23_sep_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

Page 34: She saysdigiprodcrsetools2 23_sep_2011

Planning the experience

•Creative Development

•Functionality

•Technology

•User Experience

Monday, October 10, 2011

Page 35: She saysdigiprodcrsetools2 23_sep_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

Page 36: She saysdigiprodcrsetools2 23_sep_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

Page 37: She saysdigiprodcrsetools2 23_sep_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

Page 38: She saysdigiprodcrsetools2 23_sep_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

Page 39: She saysdigiprodcrsetools2 23_sep_2011

Monday, October 10, 2011

Page 40: She saysdigiprodcrsetools2 23_sep_2011

Lifecycle/Timing

•Scheduling Philosophy

•Phases

•Project Setup

Monday, October 10, 2011

Page 41: She saysdigiprodcrsetools2 23_sep_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

Page 42: She saysdigiprodcrsetools2 23_sep_2011

Phases - ResourcesProducer

Technical Director

UX, TD, CT

UX, ID, CT

FE Coders

BE CodersBE Coders

TestersTesters

Monday, October 10, 2011

Page 43: She saysdigiprodcrsetools2 23_sep_2011

Monday, October 10, 2011

Page 44: She saysdigiprodcrsetools2 23_sep_2011

Gantt Chart Schedule

Monday, October 10, 2011

Page 45: She saysdigiprodcrsetools2 23_sep_2011

Project Plan

Monday, October 10, 2011

Page 46: She saysdigiprodcrsetools2 23_sep_2011

Project Plan

Monday, October 10, 2011

Page 47: She saysdigiprodcrsetools2 23_sep_2011

Project Plan

Monday, October 10, 2011

Page 48: She saysdigiprodcrsetools2 23_sep_2011

Project Plan

Monday, October 10, 2011

Page 49: She saysdigiprodcrsetools2 23_sep_2011

Primary Scope Documents

Monday, October 10, 2011

Page 50: She saysdigiprodcrsetools2 23_sep_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

Page 51: She saysdigiprodcrsetools2 23_sep_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

Page 52: She saysdigiprodcrsetools2 23_sep_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

Page 53: She saysdigiprodcrsetools2 23_sep_2011

PRODUCING•What and how the People, Documents, and Tools need to work together to create the experience

Monday, October 10, 2011

Page 54: She saysdigiprodcrsetools2 23_sep_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

Page 55: She saysdigiprodcrsetools2 23_sep_2011

Site Map

Monday, October 10, 2011

Page 56: She saysdigiprodcrsetools2 23_sep_2011

Site Map

Monday, October 10, 2011

Page 57: She saysdigiprodcrsetools2 23_sep_2011

Flow Chart - Lamp working?

Monday, October 10, 2011

Page 58: She saysdigiprodcrsetools2 23_sep_2011

Flow Chart - Driving a Car

Monday, October 10, 2011

Page 59: She saysdigiprodcrsetools2 23_sep_2011

Flow ChartFlow Chart

Monday, October 10, 2011

Page 60: She saysdigiprodcrsetools2 23_sep_2011

WireFrames

Monday, October 10, 2011

Page 61: She saysdigiprodcrsetools2 23_sep_2011

WireFrames

Monday, October 10, 2011

Page 62: She saysdigiprodcrsetools2 23_sep_2011

Visio

Monday, October 10, 2011

Page 63: She saysdigiprodcrsetools2 23_sep_2011

Building/Coding/Asset Interation

•HTML PRODUCTION: Aptana, Eclipse, DreamWeaver•FLASH PRODUCTION: Flash•API Integration: Coda

Monday, October 10, 2011

Page 64: She saysdigiprodcrsetools2 23_sep_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

Page 65: She saysdigiprodcrsetools2 23_sep_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

Page 66: She saysdigiprodcrsetools2 23_sep_2011

How Hosting Works

Rackspace

register.com

www nameservers

Browser

ISP: AT&T

Monday, October 10, 2011

Page 67: She saysdigiprodcrsetools2 23_sep_2011

FTP - cyberduckFTP: CyberDuck

Monday, October 10, 2011

Page 68: She saysdigiprodcrsetools2 23_sep_2011

Hosting: Rackspace

Monday, October 10, 2011

Page 69: She saysdigiprodcrsetools2 23_sep_2011

Basecamp

Monday, October 10, 2011

Page 70: She saysdigiprodcrsetools2 23_sep_2011

Bugzilla

Monday, October 10, 2011

Page 71: She saysdigiprodcrsetools2 23_sep_2011

Google Analytics

Monday, October 10, 2011

Page 72: She saysdigiprodcrsetools2 23_sep_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

Page 73: She saysdigiprodcrsetools2 23_sep_2011

Appendix: Production Menu Matrix!

Monday, October 10, 2011

Page 74: She saysdigiprodcrsetools2 23_sep_2011

Monday, October 10, 2011

Page 75: She saysdigiprodcrsetools2 23_sep_2011

Monday, October 10, 2011

Page 76: She saysdigiprodcrsetools2 23_sep_2011

Monday, October 10, 2011

Page 77: She saysdigiprodcrsetools2 23_sep_2011

Monday, October 10, 2011

Page 78: She saysdigiprodcrsetools2 23_sep_2011

Monday, October 10, 2011

Page 79: She saysdigiprodcrsetools2 23_sep_2011

Monday, October 10, 2011