juno visual design standards• as the user beings to scroll the site, the creative seamlessly fades...

4
VER 1.0 OCT 17, 2017 Cinema Ad STYLEGUIDE

Upload: others

Post on 11-Apr-2020

1 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Juno Visual Design Standards• As the user beings to scroll the site, the creative seamlessly fades into the background. • Intro video is capped at one time per user per day. After

VER 1.0 OCT 17, 2017

Cinema AdS T Y L E G U I D E

Page 2: Juno Visual Design Standards• As the user beings to scroll the site, the creative seamlessly fades into the background. • Intro video is capped at one time per user per day. After

VER 1.0 OCT 17, 20172

STYLEGUIDE: CINEMA AD

OVERVIEWThe "Cinema Ad" is a custom edge-to-edge video ad sponsorship opportunity across all breakpoints. It is perfect for advertisers looking to showcase eye-catching wide format video creative.

• Users are served large format muted 8 second teaser video just under the site navigation with the option to view a full-length video.

• As the user beings to scroll the site, the creative seamlessly fades into the background.

• Intro video is capped at one time per user per day. After the ad is capped, users will see a collapsed banner which can re-expand the video ad experience.

ES P N M E D I A K I T S P ECS :

Cinema Ad: http://www.espn.com/mediakit/US/espn/cinema-ad.html

Page 3: Juno Visual Design Standards• As the user beings to scroll the site, the creative seamlessly fades into the background. • Intro video is capped at one time per user per day. After

VER 1.0 OCT 17, 20173

STYLEGUIDE: CINEMA AD

• Size: 600x280 (scaled to 300x140)

• Type: Transparent PNG

• Strongly encourage simple logo and CTA as a contrast to the video/end card background

• Size:

XL/L/M: 5:2 ratio (1680x690)

S: 16:9 ratio (768x432)

• Type: JPG

• See comment A below

• Strongly encourage endcard still frame to be void of logos and text so that it does not compete with logo/CTA

• Size:

XL/L/M: 5:2 ratio (1680x690)

S: 16:9 ratio (768x432)

• Auto-start: :08 muted mp4 < 1MB

• User-initated: :30 or :60 mp4 with sound

• See comment A below

• For 5:2 ratio video, keep all key art clear of the bottom 90px (indicated in the green diagonal lines)

2

1

3

LOGO/CTA1

2

3

EXPANDED AD - KEY DESIGN ASSETS

STILL FRAME/END CARD

VIDEO

A SPECIAL NOTE

A

Page 4: Juno Visual Design Standards• As the user beings to scroll the site, the creative seamlessly fades into the background. • Intro video is capped at one time per user per day. After

VER 1.0 OCT 17, 20174

STYLEGUIDE: CINEMA AD

• Size:

XL: 1280x100

L: 970x66

M: 728x90

S: 320x50

• Client should provide banner PSD that our in-house team can manipulate to add the 'EXPAND TO WATCH" CTA.

• Client can design this or this can be created in-house but this is site-served.

• If only banner jpg files are provided, then we will use the standard 35x35 square button in top right of ad to re-expand ad.

BANNER UNIT1

COLLAPSED AD - BANNER UNIT

1

BANNER UNIT

A SPECIAL NOTE

A