Designing the 10-Foot User Interface

Dec 13, 2017

In this project, I designed the user interface of a TV platform for a client.

Unlike desktop / mobile devices, users interact with TVs differently. They usually sit far away from the TV screen and use a remote to control the TV app. Designing for TV, therefore, has its own unique challenges. While designing this UI, the following were taken into account and special design decisions were made.

Dark Background vs Light Background

A TV screen is much larger and brighter than a display of a desktop / mobile device, and A light background in a TV app will be too harsh for the viewer’s eyes. Because of this, a dark background color is used to ensure the UI will be comfortable to look at when displayed on a TV.

Safe Area

Contents near the edge of a TV screen have the risk of being cut off due to overscanning. To avoid this, all important UI elements are placed inside the safe area, which is 90% of the width and height.

Immersive Experience

The purpose of this app is to provide entertainment to the user. To help the user relax and engage in the movie that he likes to play, hero images bleed off the screen to create an immersive experience. Gradients and the outer glow effect are also used to soften the edges and to further communicate relaxation.


Font sizes have been adjusted to ensure that text is readable from a distance. Since reading is more difficult on a TV screen, lengthy paragraphs are trimmed by default in the UI.

*All movie posters / logos in this design are properties of the respective owners and used here for demo purposes only.

Leave a Reply