16:9 tile in the first "Trending Now" row below the Home Screen Hero

Discover Tile Overview

Discover Tile - Static
Dimensions Min 320px x 180px, Max 848px x 477px
Maximum File Size 300 KB
File Type JPG, PNG (no transparency)
App Badge Safe Zone Refrain from messaging/logos approx. 70px from the right and 26px from the bottom - this may be covered by an app logo, dependent on deeplink

Discover Tile - Video
Maximum File Size 20 MB
File Type
MP4, FPS: 24, Max Video Bitrate: 5.0 mbps
Video Codec
H.264/AVC MPEG-4 part 10 / 4 or less reference frames
Video Length
Max 15s
Miscellaneous
  • No letterboxing
  • Audio is not allowed

Miscellaneous Notes
Avoid
  • Adding a dark gradient and/or a full block of color behind the title art.
  • Using excessive text/logos on the Discover Tile.
  • Placing text copy/logo/Title Art at the bottom right of the tile — it will be blocked by app logo overlay.
  • Adding solid-color border or gradient-color border around the artwork.
  • Adding CTA buttons in the tile image
  • Using solid black (hex code #000000) as background color. A suggested hex code color to replace black is #121111.

Gradient or Block of Color Behind Title Art
Image has a dark gradient and/or a full block of color added behind the title art.

Incorrect Example   ✘

Correct Example   Green Check Mark

Incorrect - Discover Tile - Gradient Correct - Discover Tile - Gradient



Excessive Text/Logos
Image has an excessive amount of text/logo on the tile and can cause readability issues for the user.

Incorrect Example   ✘

Correct Example   Green Check Mark

Incorrect - Discover Tile - Text/Logo Correct - Discover Tile - Text/Logo



Text/Logo/Title Art at Bottom Right Corner
Image has text/logo/title art at the bottom right corner of the tile. It will be blocked by app badge overlay.

Incorrect Example   ✘

Correct Example   Green Check Mark

Incorrect - Discover Tile - Bottom Right Correct - Discover Tile - Bottom Right



Mimic Platform UI: Border
Image has a border around the artwork which can mimic a focus state causing confusion for the user.

Incorrect Example  ✘

Correct Example  Green Check Mark

Incorrect - Discover Tile - Border Correct- Discover Tile - Border



Mimic Platform UI: CTA Button
Image has a CTA button in the tile image which can cause consistency issues with our platform and can be confusing for the user.

Incorrect Example  ✘

Correct Example  Green Check Mark

Incorrect - Discover Tile - CTA Correct- Discover Tile - CTA



Mimic Platform UI: Solid Black Background
Image uses a solid black (hex code #000000) background which makes content blend with VIZIO UI. A suggested hex code color to replace black is #121111.

Incorrect Example  ✘

Correct Example  Green Check Mark

Incorrect - Discover Tile - Black BG Correct- Discover Tile - Black BG



Missing Title/Text
Imagery with no context. When the tile is not in focus, user will not know what the tile relates to at a glance.

Incorrect Example  ✘

Correct Example  Green Check Mark

Incorrect - Discover Tile - Missing text/logo Correct- Discover Tile - Missing text/logo



Videos with Letterboxing
Videos that do not fill the banner tile space (black bars on the sides) creates less viewing space.

Incorrect Example  ✘

Correct Example  Green Check Mark

Incorrect - Discover Tile - Letterbox Correct- Discover Tile - Letterbox

On this page