Overview
Mobile app experiences rely heavily on layout design to optimize screen space, usability, and visual engagement. Below is a comprehensive guide to the available layout templates for mobile apps, including descriptions, ideal use cases, and customization capabilities.
Note: In the Full Screen layout, thumbnails are displayed at full width and centered within their cells. As cell height is proportional to screen height, some cropping of images may occur to maintain visual balance.
Consideration
Each layout has been designed with user engagement and content variety in mind. Choosing the right layout depends on the type of content being featured, the preferred user interaction style, and your branding objectives. Logos and titles can be toggled to maintain a clean aesthetic, while thumbnail orientation flexibility ensures your visuals appear as intended across devices.
Standard Grid
Description: A familiar and intuitive layout featuring a grid of videos arranged in horizontal carousels. Users can scroll vertically through rows and horizontally within each row.
Best Use Case: Ideal for showcasing a broad range of video content organized by categories or genres.
Customization Options:
-
Custom Logo: Yes
-
Options: Hide Title
-
Thumbnail Orientation: Auto, Landscape, Portrait, Square
Full Tile
Description: This layout emphasizes a single item per row by stretching thumbnails across the full width of the screen, improving focus and content visibility.
Best Use Case: Best for featured content or immersive browsing, where user attention is drawn to one item at a time.
Customization Options:
-
Custom Logo: Yes
-
Options: Hide Title
-
Thumbnail Orientation: Auto, Landscape, Portrait
Square Tile
Description: Similar to Full Tile but emphasizes square aspect ratios. Offers improved visibility and interactivity, particularly on touchscreen devices.
Best Use Case: Great for content that benefits from a balanced visual layout, such as music albums, series episodes, or game selections.
Customization Options:
-
Custom Logo: Yes
-
Options: Hide Title
-
Thumbnail Orientation: Auto, Landscape, Portrait, Square
List
Description: Displays content in a vertically stacked format, with a thumbnail alongside text. Offers a clean, minimal browsing experience.
Best Use Case: Best suited for users looking to quickly scan through content titles and descriptions, such as news articles or podcast episodes.
Customization Options:
-
Custom Logo: Yes
-
Options: Hide Title
-
Thumbnail Orientation: Auto, Landscape, Portrait
Mosaic
Description: An adaptive grid that supports multiple thumbnail orientations simultaneously, offering a dynamic and varied display of content.
Best Use Case: Useful for mixed media libraries with diverse content formats and aspect ratios.
Customization Options:
-
Custom Logo: Yes
-
Options: Hide Title
-
Thumbnail Orientation: Auto, Landscape, Portrait
Full Cards
Description: Similar in visual hierarchy to Full Tile but the content tiles are narrower and do not extend across the full width of the screen.
Best Use Case: Great for maintaining a card-style layout while keeping content visually contained and organized.
Customization Options:
-
Custom Logo: Yes
-
Options: Hide Title
-
Thumbnail Orientation: Auto, Landscape, Portrait, Square
Square Cards
Description: A compact and stylized version of Square Tile. Square Cards don’t stretch the screen width, enabling more tiles to be visible at once.
Best Use Case: Ideal for densely packed content libraries where maximizing visible items is a priority.
Customization Options:
-
Custom Logo: Yes
-
Options: Hide Title
-
Thumbnail Orientation: Auto, Landscape, Portrait, Square
Full Screen
Description: Showcases content using full-width images and places metadata directly beneath each image, making use of the entire screen real estate.
Best Use Case: Best for immersive, editorial-style experiences and featured collections.
Customization Options:
-
Custom Logo: Yes
-
Options: Hide Title
-
Thumbnail Orientation: Auto, Landscape, Portrait
Image Chooser
Description: Presents a list of screen-wide images for user selection. Highly visual and engaging.
Best Use Case: Perfect for visually driven selections like channel categories, genres, or featured content.
Customization Options:
-
Custom Logo: Yes
-
Options: Hide Title
-
Thumbnail Orientation: Auto, Landscape, Portrait
Text Chooser
Description: A simplified version of the Image Chooser that displays only text-based metadata options for selection.
Best Use Case: Useful for non-visual browsing such as settings menus, preference selections, or low-bandwidth environments.
Customization Options:
-
Custom Logo: Yes
-
Options: Hide Title
-
Thumbnail Orientation: Auto, Landscape, Portrait
Hero Slider
Description: Highlights the first content row with larger thumbnails, making it the primary visual focus, while subsequent rows follow standard carousel formatting.
Best Use Case: Ideal for promoting high-priority or newly released content at the top of the home screen.
Customization Options:
-
Custom Logo: Yes
-
Options: Hide Title
-
Thumbnail Orientation: Auto, Landscape, Portrait, Square
Simple Grid
Description: A vertical-only feed of content tiles. Users scroll up and down to browse, with no horizontal carousel navigation.
Best Use Case: Streamlined for users accustomed to traditional mobile feeds like social or news apps.
Customization Options:
-
Custom Logo: Yes
-
Options: Hide Title
-
Thumbnail Orientation: Auto, Landscape, Portrait
Squared
Description: A compact variation of the Square Cards layout, optimized to display a greater number of content tiles within a single view.
Best Use Case: Perfect for dense content displays like collections, playlists, or large catalogs.
Customization Options:
-
Custom Logo: Yes
-
Options: Hide Title
-
Thumbnail Orientation: Square