Overview
To provide flexible and engaging user experiences across Connected TV (CTV) and desktop web apps, several layout design templates are available. Each layout is designed to suit different content types and user interaction patterns. Below is a comprehensive overview of each layout, including their features and customization capabilities.
Choosing a layout
When choosing a layout, consider the type of content, the desired user interaction, and the overall branding goals of your platform. All layouts support logo customization, enabling you to maintain visual consistency with your brand identity. Where applicable, experiment with background types and preview options to enhance user engagement and elevate your app's design.
Standard Grid
Description: A versatile and commonly used layout, the Standard Grid presents content in a structured, scrollable carousel format. Ideal for general-purpose content discovery, it supports multiple rows and categories.
Best Use Case: Perfect for displaying diverse content libraries, such as movies, TV shows, or mixed media collections.
Customization Options:
-
Custom Logo: Yes
-
Background Options:
-
Default solid color
-
Gradient (custom hex codes for top and bottom)
-
Image
-
Video (MP4 format, 5 seconds max duration)
-
-
Thumbnail Orientation: Auto-detect, Landscape, Portrait, Square
Spotlight
Description: The Spotlight layout enhances user engagement through interactive previews. When users hover over or focus on a content tile, dynamic metadata, images, or video previews are triggered.
Best Use Case: Ideal for showcasing featured content or new releases with interactive previews that entice users to explore further.
Customization Options:
-
Custom Logo: Yes
-
Preview Options:
-
Show metadata preview
-
Show image preview
-
Play video preview
-
-
Thumbnail Orientation: Auto-detect, Landscape, Square
Jumbo Grid
Description: A visually impactful layout that emphasizes larger thumbnails within the carousel rows, allowing content imagery to stand out more prominently.
Best Use Case: Suitable for platforms where visual storytelling and bold presentation are important, such as premium video streaming or curated collections.
Customization Options:
-
Custom Logo: Yes
-
Background Options: Default, Gradient, Image, Video (5 sec MP4)
-
Thumbnail Orientation: Auto, Landscape, Portrait, Square
Detail View
Description: Offers a scrollable interface that focuses on detailed content presentation. This layout supports larger thumbnails and in-depth metadata, enhancing content discovery through immersive browsing.
Best Use Case: Excellent for deep catalogs or niche genres where users may want to explore more information before making a selection.
Customization Options:
-
Custom Logo: Yes
-
Background Options: Default, Gradient, Image, Video (5 sec MP4)
-
Thumbnail Orientation: Auto, Landscape, Portrait, Square
Full Screen
Description: This layout displays selected media at the bottom of the screen, while a navigable list is presented above. It is ideal for focused content selection experiences.
Best Use Case: Useful for showcasing a single series or themed collection where the main media needs to stay in view during navigation.
Customization Options:
-
Custom Logo: Yes
-
Preview Options:
-
Show metadata preview
-
Show image preview
-
Play video preview
-
-
Thumbnail Orientation: Auto, Landscape, Portrait, Square
Hero Slider
Description: Enhances the first row of content with significantly larger imagery, emphasizing high-priority or flagship content.
Best Use Case: Great for landing pages or homepage takeovers where featured content should dominate user attention.
Customization Options:
-
Custom Logo: Yes
-
Background Options: Default, Gradient, Image, Video (5 sec MP4)
-
Thumbnail Orientation: Auto, Landscape, Portrait, Square
Episodes
Description: An organized presentation of episodic content using a playlist-style interface. It provides clarity and continuity for serialized content.
Best Use Case: Optimized for TV shows, web series, and other serial content where navigation through episodes is essential.
Customization Options:
-
Custom Logo: Yes
-
Background Options: Default, Gradient, Image, Video (5 sec MP4)
-
Thumbnail Orientation: Auto, Landscape, Portrait, Square
Highlight
Description: Crafts visually stunning, above-the-fold experiences using rich media, often featuring large-format imagery or video to engage users immediately upon entry.
Best Use Case: Ideal for marketing campaigns, seasonal promotions, or exclusive releases that need eye-catching visuals right at the top of the interface.
Customization Options:
-
Custom Logo: Yes
-
Background Options: Default, Gradient, Image, Video (5 sec MP4)
-
Thumbnail Orientation: Auto, Landscape, Portrait, Square