Design Principles

Apple products are known for connecting people with content. This feeling of connection is expected from Apple TV, even though it isn't a device that you hold or touch directly. In many households, Apple TV sits in the living room, bringing people together for entertainment and conversation.

Apple TV is a unique platform with unique design requirements. Whether you’re building a game, a streaming media app, or a utility for the home, keep the following principles in mind as you imagine your app’s identity.

Connected

The Siri Remote lets people interact with content across the room through fluid, familiar gestures—a flick of the wrist, tapping, swiping, and clicking. Leverage the remote's touch surface, accelerometer, and gyroscope to connect people with your content in a delightful and engaging manner.

Clear

Apple TV apps should feel natural and intuitive. Users should instinctively know what to do and where they are at all times. Use the provided layout grids, keep text legible at a distance, and avoid cluttering your interface with unnecessary visual adornments.

Apple TV uses a focus model for navigation. People use the remote to move through interface elements such as movie posters, apps, or buttons, highlighting each item as they come to it. An element is considered focused or in focus when the user highlights the item, but has not clicked it. Make it clear at a distance when something is in focus. Implement expected button behavior so it’s impossible to get lost during navigation—clicking an item with the remote takes you deeper into an app’s hierarchy, pressing Menu always takes you back.

Immersive

Beautiful, edge-to-edge artwork engulfs people in a rich, cinematic experience. Focusing on a piece of content elevates it, and the touch surface of the remote makes you feel like you're touching the screen, as on an iOS device. Sound is used throughout the system to enhance the visual experience. Strive for a sense of immersion through engaging content, subtle and fluid animations, awe-inspiring imagery, and captivating audio.


Apps

tvOS provides development frameworks for building riveting games, utilities, and other apps that run natively on Apple TV. If you’re familiar with iOS app design, you already know much of what you need to know. Most of the same interface elements and development frameworks exist in tvOS. However, creating a stunning cinematic experience that works well on a television screen and with a remote has its own unique design considerations.

Full screen app

Help people feel connected to your app through the remote. In iOS, the user sees and touches the same device. On Apple TV, the user sees the screen across the room while touching the remote in their hand. Look for opportunities to connect people with your app through the device they touch—the remote.

Consider the user's distance from the screen. Design interface elements appropriately, so they’re legible, easy to find, and aren’t overwhelmed by background images or adjacent items. Make sure it’s always clear what’s in focus and what happens as a result of actions taken on the remote.

Create a shared experience. People often enjoy TV in a communal environment. Consider how your app can appeal to a group, as well as what happens if the user is a different person each time your app is launched.

For information about developing apps, see App Programming Guide for tvOS.


Home Screen

The Apple TV Home screen shows the installed apps. The user navigates through a grid of app icons, selects one, and clicks to launch it.

Apple TV home screen showing Top Movies and App Icon Grid

Your app’s icon on the Home Screen is a chance to tell your app’s story and build an emotional connection. Your app’s icon should make a great first impression, so design one that’s unique, affecting, and memorable.

For design guidelines, see App Icon in Icons and Images.


Top Shelf

The top shelf is a content showcase area above the top row of apps on the Apple TV Home screen. The user can decide which apps are in the top row. When one of these apps is brought into focus, the top shelf displays featured content specific to that app.

App Store showing a Scrolling Inset Banner

The top shelf is a unique opportunity for your app to highlight new, featured, or useful content and let the user jump directly to it. For example, when the App Store is in focus, banners highlight notable new apps. When the iTunes TV Shows app is in focus, people see a row of featured shows. Focusing on and clicking a TV show goes right to the related product page in the app. Pressing the Play/Pause button on the remote while a show is in focus begins media playback for the show.

For featured content design guidelines, see Top Shelf in Icons and Images.


Focus and Parallax

On Apple TV, an icon, image, button, or other interface element is considered to be in focus when it’s the currently highlighted element. As an element comes into focus, it’s gently elevated to the foreground and sways playfully in response to subtle movements of a finger on the touch surface of the remote. As this occurs, illumination is applied to the item, making its surface appear to shine. After a period of inactivity, out-of-focus content dims while the focused element grows even larger. These effects work together to maintain a connection with people sitting on the couch. They provide a sense of clarity and context, reinforcing what’s in focus.

Parallax is a subtle visual effect used throughout the system to convey depth and dynamism when an element is in focus. Through image layering, transparency, scaling, and motion, parallax produces a 3D effect with a sense of realism and vitality. Image layering to support the parallax effect is a requirement for your app icon and is supported for dynamic top shelf content on the Home screen. Image layering is strongly encouraged anywhere that focusable, image-based content resides in your app.

For more information on focus, see Focus and Selection. Learn how to design images for parallax in Layered Images. For developer guidance on focus and parallax, see App Programming Guide for tvOS.