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
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.
7. Video Player
Here is a preview of how our video player looks on connected TV apps