Designing for Apple TV

tvOS

To design for Apple TV you need to consider different elements, like the App Store icon, top shelf banner and more. When designing for Apple TV you need to consider three aspects: Connected, Clear and Immersive.

Layout

There are different things you need to consider when you are designing for Apple TV. Like optimizing your assets for big screens, to giving some padding to your designs regarding the edges of the screen and the use of grids. Apple made available different assets that you can use for Sketch and Photoshop.

Grids

When you are designing for the Apple TV, you also need to consider the different type grids. There are five different types of column grid: three, four, five, six and seven-column grid.

Siri Remote

You can find Siri as part of any Apple's platform. On the Apple TV, you can activate it from the remote and you can use it to access different content, to interact with home kit and more.

Gaming

Arcade is one of the integral parts of the Apple TV ecosystem and even Apple made it possible to connect the most popular gaming controllers to Apple TV. Like that, you can have an immersive experience playing a game on Apple TV. So, when you are designing for Apple TV you need to consider the interaction with these controllers.

Color

Color is very important for an immersive experience, you need to choose a limited color palette that can match with your app logo and your branding. Apple also recommends to test your colors in HD and 4K TVs, in various display levels and in dark mode.

Typography

When you are designing for Apple TV you can use SF Pro in the variable font format. Apple recommends that when using the system font, we need to keep in mind text legibility, accessibility and that the text elements are legible at a distance.

Parallax Previewer

The Parallax Previewer App helps you to see your artwork and it gives a glare of how your App icon will look on the Apple TV. You can download the App and the Photoshop plug-in for free.

Preview your work in Parallax Preview

Let's go to Figma or your favorite design tool, and create a frame sized 1280 x 770.

Let's add style to our frame. We will change its background color to a linear gradient. Change the color of the upper end to #AD5EFF and the lower end to #1B0565.

Next, we will place our logo in the middle of the frame. Make sure to center it horizontally and vertically.

Then let's export our frame to PNG.

Lastly, open parallax previewer, drag and drop our PNG image on the left side bar. Make sure that on the right sidebar, you select the options Size to Fit and Default Background from the Artwork Size. You can hover over the artwork and you will see how the image will wave from left to right.

Conclusion

Designing for Apple TV is still a new environment for many designers. It has different UX patterns and external interfaces we need to consider. There are even many undiscovered and new ways to interact with the TV. In the future, we might even see AR and VR interacting with TV.