Designing for tv

BEST PRACTICES & SPECIFICATIONS

OVERLAY DESIGN & EXECUTION

LAYOUT &
PLACEMENT
Overlays can be any shape and size and
can be placed anywhere on the TV screen
using the following guidelines:

! Ensure the overlay does not cover any

key messaging/visuals or legal
language.

! Keep all typography legible in the 10’ TV

experience.

! Design the layout to be clearly visible

against the background (both light and
dark) by creating depth and contrast.

10/3/18
20
CONFIDENTIAL
OVERLAY DESIGN & EXECUTION

COMPONENTS
& ASSETS
Main components for overlays are listed
below (export all images in JPG format or
PNG format if transparency is required).

! Close Button

! CTA Button

! Background/Main Art CLOSE BUTTON CTA BUTTON MAIN

Closes overlay and Main “Call to Action” button, launches siderail BACKGROUND
can be placed application and squeezes commercial down. IMAGE
anywhere on or Use clear, concise and engaging language Main image,
near the main art for optimal user experience (include normal typically exported as
(include normal & and focus states). a PNG with
focus states). transparency and
no close or CTA
buttons included.

Normal Focus Normal State Focus State

State State

10/3/18
21
CONFIDENTIAL
 X Button
Closes siderail

SIDERAIL DESIGN & EXECUTION

components
Info Button
Displays how & why
siderail appeared

Main components for siderails are listed

below (export all images in JPG format or
PNG format if transparency is required).

! Info & Close Button (HTML generated,

can customize background color, font
color, and stroke display and color)

! Background/Main Art
Mobile Entry
! Mobile Entry (HTML generated, can Form for Mobile # CTA BUTTON MAIN
customize font color & size, and mobile Privacy Policy Sends the user the BACKGROUND
Displays user privacy IMAGE
entry line color) policy text message.
Use clear and concise Main image,
! CTA Button (Can be HTML generated or for optimal user includes imagery
image based) experience (include and messaging,
normal and focus typically exported
! Message & Data Rates/ Privacy Policy states if using as a JPEG.
(HTML generated, can customize font images). Can be Do not include top
color and size) HTML generated. “I” and ”x” buttons,
CTA Button phone entry, CTA
* Mobile Entry, CTA Button, Message & Data button, and
Rates/Privacy Policy spacing relative to one Message & Data
Normal State Rates/Privacy
another is not customizable
Policy.

Focus State

10/3/18
24
CONFIDENTIAL
 WITH HEADER WITHOUT HEADER
SIDERAIL DESIGN & EXECUTION

dimensions
423 x 76 px
HEADER (If Used)

423 x 1004 px
BODY (with header) 423 x 1080 px
BODY (with header)

Overall siderail dimensions are 423 x 1080

px, with the following components:

! Header: 423 x 76 px and is not required 560 px 635 px

Recommended Recommended
maximum distance maximum distance
! Body: from top of body to from top of body to
phone input field to phone input field to
! 423 x 1004 px (w/ Header) allow for keypad allow for keypad
display (635 px from display.
! 423 x 1080 px (w/o Header) top of header).

! Call to Action Button: Maximum width of

370 px and maximum height of 70 px.

! Phone Entry Field: Recommended

maximum distance from top of the body 370 x 70 px 370 x 70 px
is 560 px (w/header) or 635 px (w/o MAX CTA SIZE MAX CTA SIZE
header). This allows for the keypad and
Privacy Policy link to be fully visible
during phone entry.

* PSD templates can be provided for

reference

10/3/18
25
CONFIDENTIAL
THANK YOU