DIGITAL SIGNAGE CONTENT STRATEGIES FOR SAVVY INTEGRATORS

J I M N I S TA CREATIVE DIRECTOR CREATING DIGITAL SIGNAGE CONTENT

1.Content Categories 2.Content Strategy 3.Project Quote ABOUT ME Dynamic data- Connections to Motion graphics, driven HTML5 APIs to automate filming and content. content. editing.

CREATIVE AND DEVELOPMENT 1 2 3

The Idea. The Investment. The Content.

IT’S ABOUT ‘THE CONTENT’ YOUR 3 STEPS TO SELL CONTENT SERVICES

1 2 3

Categorize it Strategize it Quote it “What are you using this “What’s your goal with “Can your do this sign for?” this screen?” yourself? What’s your budget?” WHAT IS CONTENT? Informational Digital Bulletin Boards / Corporate Communication Wayfinding / Directories Menus Donor Walls TYPES OF SIGNAGE

Advertising Digital Posters Outdoor / DOOH TYPES OF CONTENT

Type Overview Creative Tools Skill Sets Digital Poster Image / Slides Adobe CC (Illustrator / Graphic Design Photoshop) PowerPoint

HTML5 Templates Menus / Directories / Visual Studio, Adobe CC, Graphic Design & Programming Etc with editable fields Dreamweaver

Motion Graphics Animated Videos , Animation & Video Premiere Video Production Filmed and Edited Adobe After Effects, Video Production Videos Premiere Interactive Touch Screen Content Some CMS, Adobe CC, Graphic Design, Animation & Intuilab Programming Data / Experiential Mobile, Online, Data Adobe CC, Programming All of the Above Connected Tools DIGITAL SIGNAGE CONTENT IS EVOLVING.

DS 1.0 DS 2.0 Simple Slides Data Driven Applications DO IT YOURSELF? DO IT FOR ME? CONTENT STRATEGY - WHAT’S THE GOAL? CONTENT STRATEGY.

What’s the sign for? Digital Menu, Employee Breakrooms, Interactive Donor Walls.

What’s the goal? Educate, inform, streamline, sell more, communicate better…

What’s the playlist We want our breakroom signs to go to cable TV at lunch time. and daypart?

What’s the content? Slides, Videos, HTML5 Templates, Data-Driven content.

Who’s going to do it? Creative and Setup - In-house, our agency, we need help!

What’s the timeline? Walk before you run? Can it be phased.

Who’s going to In-house, our agency, we need help! maintain it? QUOTE IT. WHAT’S THE ONE THING EVERY DIGITAL SIGN HAS? ONGOING REVENUE

Item Markup / Add-On Custom Content Development 25-100% markup creative services Basic Annual Support $25 - $75 per player / per year Enhanced Support $200+ per player / per year Content Maintenance $500+ per month HOW IT’S MADE TOOLS I USE EVERY DAY.

Visuals: Adobe Graphics – Illustrator / Photoshop Creative Cloud Front End Programming / Interactive – Dreamweaver (CC) Subscription. Video – After Effects

Back End / Advanced . Coding:

Stock libraries: BigStock, Pond5. DIGITAL POSTER / GRAPHIC DESIGN WORKFLOW

Sketching / Layout Graphic Design in Adobe CC / Content Upload/Scheduling PowerPoint within your CMS PROGRAMMING / INTERACTIVE / HTML5 / EXPERIENTIAL WORKFLOW

Wireframe Development User Interface Design Programming Deployment and Testing MOTION GRAPHICS WORKFLOW

Storyboarding Design & Asset Gathering Editing & Animation Upload & Schedule to CMS VIDEO PRODUCTION WORKFLOW

Storyboarding Filming / Production Editing / Post Production Upload & Schedule to CMS REAL WORLD EXAMPLE – BEFORE & AFTER LA GALAXY / STUBHUB CENTER DIGITAL MENUS

1.0 – PowerPoint Slides 2.0 – Multi Zone/User, Data-Driven DIGITAL SIGNAGE CONTENT ‘1.0’

1. Entire Layout is built in PowerPoint 2. Client Manages 38 unique Slides 3. Changing a price involves editing file in PowerPoint then uploading to CMS DIGITAL SIGNAGE CONTENT ‘2.0’

Data Driven Video/ Data Driven Menu Image Menu

Messaging

Multi Zone Layout with different content creators supplying creative for different zones. DIGITAL SIGNAGE CONTENT ‘2.0’

Edit Pricing Fields in Cloud CMS

Multi Zone Layout Unique Departments Control Different Zones. F&B manages Menu Content, Marketing manages Ads/Videos MANY CREATIVE DISCIPLINES IN ONE DIGITAL MENU

Coders write Graphic Designers JavaScript/HTML5 to Create the Overall import Live Data into Layout layout

Front End convert design to CSS

Animators Create Video Ads REAL WORLD EXAMPLE – HTML5 WAYFINDING TEMPLATE HTML5 WAYFINDING TEMPLATE – HOW IT’S MADE.

Overall Layout Designed in , then converted to CSS/HTML5 in Dreamweaver.

Programmers write HTML5/Javascript to pull office listing content from online database.

Client uploads Excel or edits names in cloud CMS.

Maps designed in Adobe Illustrator, converted to SVG and coded to include room information so rooms highlight when clicked. HTML5 CONTENT WORKFLOW – WIREFRAME/SKETCH

Tools Used: Map Area Event listings Pen/Paper Adobe Illustrator WebEx

Ticker Roughly Map out Zones, Discuss Content Scheduling. Allows for Rapid Prototyping during a WebEx.

Show Clients Examples from other projects. HTML5 CONTENT WORKFLOW - DESIGN

Tools Used: Adobe Illustrator Client Style Guide, Logos & Artwork

Begin Designing layouts, creating several options for the client to review.

Gather Assets – Logos, Maps, Floorplans, etc. HTML5 CONTENT WORKFLOW - PROGRAMMING

Tools Used: Adobe Dreamweaver Microsoft VisualStudio

Begin Coding Front End: JavaScript, CSS, HTML5 Back End: C# for backend HTML5 CONTENT WORKFLOW – DEPLOYMENT & TESTING

Tools Used: Media Players / CMS

For Some players, like BrightSign we simply copy a URL or collected HTML5 files onto the player for testing.

All players handle HTML5 slightly differently – testing and debugging is key! HTML5 TEMPLATES – HOW THEY WORK.

• Layout is built in Code and Locked down. End Clients can edit data, not design. • Editing is done in a browser, uploading Excel files, or with a live data connection. • Complex solutions, Initial Setup is difficult, but updating is EASY. REAL WORLD EXAMPLE – EXPERIENTIAL

• New Year’s Eve – Times Square Billboard • Real-time Text-to-Screen allowing NYE attendees to send their pictures to the screen. • Participants saw their images and received text messages back from the screen. PROJECT COMPONENTS

• Graphic / Visual Design • Motion Graphic Design • HTML5 / JavaScript Coding • Texting platform API connections • and Programming • Cloud image management • Real-time Image Manipulation • Digital Media Player / CMS programming HOW IT’S MADE

• Graphic Designers: Illustrator / Photoshop • Motion Designers: After Effects • Front End Coders: Dreamweaver • Back End Coders: Visual Studio • System Admin/IT: Azure / Amazon AWS • Moderation Workflow: Amazon mTurk • Web Developers: Dreamweaver MAKE IT LOOK GREAT. GET IN TOUCH

• [email protected] • linkedin.com/in/jimnista/