All Collections
Website and App Development
Design guide - Assets for CTV
Design guide - Assets for CTV

Asset needed and layout styles

Anjana avatar
Written by Anjana
Updated over a week ago

To ensure a seamless and visually appealing streaming experience for your viewers, we require specific assets from you. Below are the key elements you need to provide:

Image Aspect Ratio and Dimensions:

  • 16:9 - 1920 x 1080 pixels

  • 4:3 - 1440 x 1080 pixels

  • 3:4 - 1080 x 1440 pixels

  • 1:1 - 1080 x 1080 pixels

⚠️ Note: Having thumbnails in all these ratios ensures optimal display across a variety of devices and screen sizes.

Theme:

Choose a theme that aligns with the identity of your content.

In this document, I've explained the defaults based on Hybrid Theme

Theme Presets for Different Content:

Select theme presets based on the type of content you plan to showcase. We have presets available for:

  • Movie Content

  • Series Content

  • EPG / Live TV Content

⚠️ Note: Theme presets enhance the visual appeal of your app and create a consistent look and feel.

Let's understand what we need for each of the component

1. Nav Bar

This is the top navigation bar on your TV app that enables your users to navigate to different pages of your app

Ensure that your Nav bar does not have more than 6 items to avoid clutter. We also recommend naming the menu items within 10 characters.

2. Carousel

The Carousel is a dynamic feature that engages viewers with visually appealing content. Ensure that images adhere to the 16:9 aspect ratio for optimal display.

Default Carousel for Hybrid Theme

Carousel Layout 2 for connected TVs

Carousel Layout 3 for connected TVs

3. Preview Pane

The Preview Pane helps viewers to get a quick overview of the selected content. Having high-quality images and informative details enhances the user experience.

Details that can be Displayed:

  • Title: Name of the video

  • Title Overline (Category): Category of the content (e.g., Movie, Horror, etc.).

  • Description: A brief and compelling description of the content that is provided as video description

  • Subline:

    • Published Year: The year when the content was released.

    • Language: Language of the content.


​4. Horizontal Listing

The Horizontal Listing widget gives users a dynamic display of your content. To make it visually appealing, we need specific assets and details for customization. Here's what we require:

Content Thumbnails:

  • High-resolution images of each content item in 16:9, 3:4, and 1:1 aspect ratios.

  • Ensure the images are of top quality to enhance the visual appeal and size optimized for quick loading.

Details that can be Displayed (below the thumbnails):

  • Title: Name of the content (video/show/playlist).

  • Overline: Select the details to be displayed (e.g., Video name, Duration, Rating, Release Date, Publish date, Show Name, Category name).
    ⚠️ Note: Any two details to be highlighted in the Overline section.

  • Subline:Select the details to be displayed (e.g., Video name, Duration, Rating, Release Date, Publish date, Show Name, Category name)
    ⚠️ Note: Any two details to be highlighted in the Subline section.

⚠️ Note: There are three layouts available with horizontal listing (16:9, 3:4, and 1:1), allowing you to showcase content to your users to browse easily.

Card Sizes

By using the Card-Sizes in your CTV app, you can present horizontal listings in different layouts, enhancing their visual appearance. For the 16:9 variations, including Small, Medium, and Large

Small Card

Medium Card
(Default for Hybrid Theme)

Large Card

5. EPG (Electronic Program Guide)

Channel Logos: We will need logos for each channel to be added to the EPG.


Here is how it will look

6. Detail Page - Video/ Movie / Show/ Season Page

For the Detail pages we need high-resolution 16:9 preview images.

Note: The preview image is associated with the content, eg, thumbnail of a video.

Video/Movie Detail Page

Show/Season Page

7. Video Player

Here is a preview of how our video player looks on connected TV apps

Did this answer your question?