{"id":4379,"date":"2016-11-09T15:38:49","date_gmt":"2016-11-09T15:38:49","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=4379"},"modified":"2020-12-13T22:16:02","modified_gmt":"2020-12-13T22:16:02","slug":"designing-for-television","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/designing-for-television\/","title":{"rendered":"Designing for Television &#8211; TV Ui design"},"content":{"rendered":"<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><script type=\"application\/ld+json\"> {\n  \"@context\": \"https:\/\/schema.org\",\n  \"@type\": \"WebPage\",\n  \"headline\": \"\n            Designing for Television - TV UI's - Marvel Blog        \",\n  \"about\": [\n    {\"@type\": \"Thing\",\"name\": \"Designing\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/Design\"}, \n    {\"@type\": \"Thing\",\"name\": \"Television\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/Television\"}, \n    {\"@type\": \"Thing\",\"name\": \"Tv\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/Television_show\"}\n  ],\n  \"mentions\": [\n    {\"@type\": \"Thing\",\"name\": \"Smart TVs\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/Smart_TV\"}, \n    {\"@type\": \"Thing\",\"name\": \"CRT\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/Cathode-ray_tube\"}, \n    {\"@type\": \"Thing\",\"name\": \"Roku\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/Roku\"}, \n    {\"@type\": \"Thing\",\"name\": \"Playstation\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/PlayStation\"}, \n    {\"@type\": \"Thing\",\"name\": \"Xbox\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/Xbox\"}, \n    {\"@type\": \"Thing\",\"name\": \"ingredients\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/Ingredient\"}, \n    {\"@type\": \"Thing\",\"name\": \"technology\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/Technology\"}\n  ]\n}\n<\/script><\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">An introduction to the basic ingredients of a TV UI<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Welcome to the new <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/en.wikipedia.org\/wiki\/Golden_Age_of_Television_%282000s%E2%80%93present%29\" target=\"_blank\" rel=\"noopener noreferrer\">Golden Age<\/a> of television. Not only is there more great television being produced than ever before, but we also have more choice in how we watch our favorite shows. And while we can access these shows anywhere and anytime through our computers, phones, and tablets, televisions themselves still maintain a special place in the home of many.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">But we\u2019re no longer limited to a remote and cable box to control our TVs; we\u2019re using Smart TVs, or streaming from set-top boxes like Roku and Apple TV, or using video game consoles like Xbox and Playstation. And each of these devices allows a user interface that\u2019s much more powerful than your old-fashioned on-screen guide.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"Design for TV requires a unique set of considerations\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">When compared to computers and even mobile phones, designing for TV UI is still a relatively new area. It\u2019s also a fundamentally different platform. Design for TV requires a unique set of considerations, including screen size and distance, technical constraints, and context of use.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">This will be the first part of a series that digs into how to start thinking about interfaces for TV. We\u2019ll also be focusing specifically on the gamepad as an input device, and the basics of using the <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Gamepad_API\/Using_the_Gamepad_API\" target=\"_blank\" rel=\"noopener noreferrer\">Gamepad API<\/a>. In Part 2, we show how you can <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/this-also\/designing-for-television-part-2-f31793e7d2e9#.8ko5hkufp\" target=\"_blank\" rel=\"noopener noreferrer\">prototype your TV UIs &amp; controllers together<\/a>.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">The Display<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>How televisions are different from computers, phones and tablets<\/em><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The first TVs on the market were made of cathode ray tubes (CRT), a clunky technology that produced inconsistent images across TV sets. This issue was particularly bad along the edges of the screen, so to compensate, CRT TVs were subject to <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/en.wikipedia.org\/wiki\/Overscan\" target=\"_blank\" rel=\"noopener noreferrer\">overscan<\/a>. With overscan, the image itself is enlarged slightly so the edges are outside the bounds of the viewing area.<\/p>\n<div id='gallery-1' class='gallery galleryid-4379 gallery-columns-1 gallery-size-large'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Stranger-Things-Netflix.png'><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"675\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Stranger-Things-Netflix.png\" class=\"attachment-large size-large\" alt=\"stranger-things-netflix\" aria-describedby=\"gallery-1-4381\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Stranger-Things-Netflix.png 1200w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Stranger-Things-Netflix-600x338.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Stranger-Things-Netflix-768x432.png 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-1-4381'>\n\t\t\t\t\u00a9 All Rights Reserved, Netflix\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Because broadcasters anticipated some of the image being clipped, they wanted to avoid any critical information being shown too close to the edge of the screen. Historically, there was a <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">title safe area<\/strong> in which text would display with no distortion, and an <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">action safe area<\/strong> where the image could be safely displayed.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">For <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.engadget.com\/2010\/05\/27\/hd-101-overscan-and-why-all-tvs-do-it\/\" target=\"_blank\" rel=\"noopener noreferrer\">silly and convoluted reasons<\/a>, overscan still exists on HDTVs. The current recommendation is to <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">set at least a 5% margin<\/strong> to define a general <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">safe area<\/strong> and to keep all TV UI within these bounds. However, this percentage is flexible; <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/developer.android.com\/design\/tv\/style.html\" target=\"_blank\" rel=\"noopener noreferrer\">Google<\/a> keeps their safe area narrow, while <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/developer.apple.com\/tvos\/human-interface-guidelines\/visual-design\/\" target=\"_blank\" rel=\"noopener noreferrer\">Apple\u2019s<\/a> is more generous. We often find ourselves adjusting the safe area as we build our layout grids.<\/p>\n<div id='gallery-2' class='gallery galleryid-4379 gallery-columns-1 gallery-size-large'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Safe-Area.png'><img loading=\"lazy\" decoding=\"async\" width=\"1400\" height=\"787\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Safe-Area.png\" class=\"attachment-large size-large\" alt=\"safe-area\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Safe-Area.png 1400w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Safe-Area-600x337.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Safe-Area-768x432.png 768w\" sizes=\"auto, (max-width: 1400px) 100vw, 1400px\" \/><\/a>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">To start, let\u2019s set up our canvas using the standard HDTV dimensions: <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">1920 x 1080 pixels<\/strong> with <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">60px top and bottom margins<\/strong> and <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">90px side margins<\/strong>. We\u2019ll touch on 4k later.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Navigation<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>How directional input shapes TV interfaces<\/em><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Hardware often defines design patterns. On mobile, tabs emerged as a navigation pattern given the small yet tall screen size. On TVs, the wide yet squat canvas lends itself to long rows of content that maximize the amount of content visible. Like tabs on mobile, this pattern has become commonplace on most TV streaming UIs.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"Hardware often defines design patterns.\"<\/p><\/span><\/blockquote>\n<div id=\"attachment_4386\" style=\"width: 810px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-4386\" class=\"size-full wp-image-4386\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2016\/11\/TV-Streaming-UIs.png\" alt=\"tv-streaming-uis\" width=\"800\" height=\"450\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/TV-Streaming-UIs.png 800w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/TV-Streaming-UIs-600x338.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/TV-Streaming-UIs-768x432.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><p id=\"caption-attachment-4386\" class=\"wp-caption-text\">Clockwise from top left: Netflix TV app, Hulu Plus on Playstation, iTunes Store on Apple TV, AMC on Apple TV<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Likewise, the majority of TV UIs (with the exception of the incredibly cute and frustrating <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.youtube.com\/watch?v=hYQ7Hja_Teo\" target=\"_blank\" rel=\"noopener noreferrer\">LG Bean Bird<\/a>) are controlled by a <em>D-pad<\/em>, short for directional pad. Whether on a remote or a gamepad, the D-pad limits navigation to four directions: up, down, left and right. This makes a <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">grid<\/strong> the natural UI structure for TV applications.<\/p>\n<div id=\"attachment_4387\" style=\"width: 810px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-4387\" class=\"size-full wp-image-4387\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2016\/11\/Apple-TV-and-HBO.png\" alt=\"apple-tv-and-hbo\" width=\"800\" height=\"908\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Apple-TV-and-HBO.png 800w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Apple-TV-and-HBO-529x600.png 529w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Apple-TV-and-HBO-768x872.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><p id=\"caption-attachment-4387\" class=\"wp-caption-text\">Apple TV (top) uses a shadow and z-axis position for its cursor, while HBO GO (bottom) uses a blue stroke<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The other critical element in TV UIs is the <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">cursor<\/strong>. Without touch or a mouse, users must navigate to the element they want to select. A cursor highlights the currently selected element and moves as the D-pad input changes. Applications often use borders, shadows, z-axis, or some combination of these to signal the selected state. Every item on the screen must be reachable by the cursor, and it should always be clear where the cursor can move next.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">For our prototype, let\u2019s recreate a typical TV UI layout with one horizontal row of content. We\u2019ll add our cursor state to the first item.<\/p>\n<div id='gallery-3' class='gallery galleryid-4379 gallery-columns-1 gallery-size-large'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Typical-TV-UI.png'><img loading=\"lazy\" decoding=\"async\" width=\"1400\" height=\"787\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Typical-TV-UI.png\" class=\"attachment-large size-large\" alt=\"typical-tv-ui\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Typical-TV-UI.png 1400w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Typical-TV-UI-600x337.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Typical-TV-UI-768x432.png 768w\" sizes=\"auto, (max-width: 1400px) 100vw, 1400px\" \/><\/a>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Input<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>How people interact with TVs beyond remotes<\/em><\/p>\n<div id='gallery-4' class='gallery galleryid-4379 gallery-columns-1 gallery-size-large'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/TV-Remotes.png'><img loading=\"lazy\" decoding=\"async\" width=\"1500\" height=\"722\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/TV-Remotes-1500x722.png\" class=\"attachment-large size-large\" alt=\"tv-remotes\" aria-describedby=\"gallery-4-4389\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/TV-Remotes-1500x722.png 1500w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/TV-Remotes-600x289.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/TV-Remotes-768x370.png 768w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/TV-Remotes.png 1600w\" sizes=\"auto, (max-width: 1500px) 100vw, 1500px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-4-4389'>\n\t\t\t\tFrom left to right: Logitech Harmony, Samsung Smart TV, Apple TV, Roku, Amazon Fire TV\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Most TVs and streaming devices rely on some form of remote control. Some platforms are experimenting with voice input, while others, such as the new Apple TV, also use touch input. However, as more streaming services bring their apps to gaming platforms, people are also increasingly using gamepads to navigate TV UIs. Video game consoles are powerful, multi-purpose devices, and here at the studio, we\u2019ve become interested in how best to design and prototype with this hardware.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Navigating with a gamepad provides a number of advantages. In addition to a D-pad, gamepads also have thumbsticks which provide the standard four directional movement, as well as more nuanced diagonal movement. Thumbsticks are faster and more responsive than D-pads, particularly for those who play video games.<\/p>\n<div id='gallery-5' class='gallery galleryid-4379 gallery-columns-1 gallery-size-medium'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Game-Controllers.png'><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"338\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Game-Controllers-600x338.png\" class=\"attachment-medium size-medium\" alt=\"game-controllers\" aria-describedby=\"gallery-5-4390\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Game-Controllers-600x338.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Game-Controllers-768x432.png 768w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Game-Controllers.png 800w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-5-4390'>\n\t\t\t\tAn Xbox One controller (L) and a Playstation 4 controller (R)\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">There are some standard conventions shared across platforms, like the Select and Back buttons which share the same position across controllers. Each platform also has its own established conventions. On Xbox, the triggers provide a \u201cPage Up\u201d and \u201cPage Down\u201d control while the bumpers are used to tab between content views. There are also a number of \u201cpower user\u201d buttons on each platform that more experienced gamers would be familiar with.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"Context is important when designing for the living room.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">However, context is important when designing for the living room. While there may be a primary user who plays video games and is very familiar with the controller, living room devices are ultimately shared devices. We can expect other users less familiar with a gamepad to be using a console for entertainment. For core functionality, <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">it\u2019s best to stick with the standard button conventions<\/strong>.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Typography<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>Reading an interface from 10 feet away<\/em><\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"Typography can become especially tricky in 10-ft experiences. When in doubt, go larger. \"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Imagine you\u2019re sitting on the couch, watching a show on your TV. It\u2019s pretty easy to see the action happening, but what happens when the end credits begin playing? Or a menu pops up?<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">TV apps are often referred to as <em>10-ft experiences<\/em>, a term that refers to a common distance between you and your television. Given this distance, we need to treat a UI a bit differently than we would on web or mobile. UIs should be less dense and design elements should be larger so they can be read from across a room.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Typography can become especially tricky in 10-ft experiences. When in doubt, go larger. Bump up both the size and weight of your type. We\u2019ve found 18px to be the smallest readable size and only appropriate for nonessential labels, like an eyebrow tag. For our design, we\u2019ve set the <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">titles at 92px<\/strong> and the <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">body text at 24px<\/strong>.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"UIs should be less dense and design elements should be larger so they can be read from across a room.\"<\/p><\/span><\/blockquote>\n<div id='gallery-6' class='gallery galleryid-4379 gallery-columns-1 gallery-size-large'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Typography.png'><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"675\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Typography.png\" class=\"attachment-large size-large\" alt=\"typography\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Typography.png 1200w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Typography-600x338.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Typography-768x432.png 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/a>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The key to good typography on TV is to <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">test constantly<\/strong>. Thin, small type on your monitor will look clean and crisp, but once on a TV it may appear blown out or become unintelligible. We define our font sizes early in our process by building a test mock and testing type on a TV screen.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Color<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>Understanding the limits of a TV display<\/em><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The color gamut on HDTVs is more limited than that of your computer monitor. This means that while designing, you\u2019ll have access to a larger range of color than will display properly on a TV. Different makes and models of TVs vary widely when it comes to brightness, display and other settings. Like type, <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">color should be tested early and often<\/strong> on TVs.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"Like type, color should be tested early and often on TVs.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">There are a few guidelines to follow as you begin designing: <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Avoid pure white<\/strong>, as the bright light is harsh on the eyes. Also <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">take care with gradients and deep blurs<\/strong>, as the limited color range can cause banding to appear. To finish our prototype design, we\u2019ll set our background color to #EEE and hide our safe area and guides.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"The color gamut on HDTVs is more limited than that of your computer monitor.\"<\/p><\/span><\/blockquote>\n<div id='gallery-7' class='gallery galleryid-4379 gallery-columns-1 gallery-size-large'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Colour-for-TV.png'><img loading=\"lazy\" decoding=\"async\" width=\"1400\" height=\"787\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Colour-for-TV.png\" class=\"attachment-large size-large\" alt=\"colour-for-tv\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Colour-for-TV.png 1400w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Colour-for-TV-600x337.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Colour-for-TV-768x432.png 768w\" sizes=\"auto, (max-width: 1400px) 100vw, 1400px\" \/><\/a>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">4K Future<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>Preparing for the next generation<\/em><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Unlike mobile phones, most consumers don\u2019t upgrade their TVs on a regular cycle. So while more and more 4K-capable TVs are being produced, we\u2019re still designing for a market that is overwhelmingly limited to 1080p.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Eventually this will change, and much like accounting for different screen sizes in mobile design, designers will soon be designing for TV at 2x. In addition to better picture quality, the greater pixel density means sharper and more legible type and UI.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Perhaps the most promising development for UIs designed at 4K will be an <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">increased color range and depth<\/strong>. Current HDTVs use a color profile named Rec. 709 which provides a fairly limited range of color. A new profile, Rec. 2020, was developed for 4K TVs and provides a larger color range.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"Perhaps the most promising development for UIs designed at 4K will be an increased color range and depth.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<div id=\"attachment_4393\" style=\"width: 460px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-4393\" class=\"size-full wp-image-4393\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2016\/11\/UHDVT-vs-HDTV-Colour-Gamuts-.png\" alt=\"uhdvt-vs-hdtv-colour-gamuts\" width=\"450\" height=\"540\" \/><p id=\"caption-attachment-4393\" class=\"wp-caption-text\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/dot-color.com\/2012\/12\/04\/so-you-bought-a-4k-tv-now-where-is-the-4k-content\/rec2020-vs-rec709-001\/\">Source<\/a><\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">However, more important than the range is the color depth. Most current HDTVs provide 8-bit color. This means there are 256 shades of each RGB color channel available for a total of 16.78 million possible colors. New 4K TVs with 10-bit or higher color and will provide at least 1,024 shades of each color channel, making possible over 1 billion colors. With a greater color depth, banding on gradients and blurs won\u2019t be visible, providing designers with more opportunities to use color and manipulate photo assets.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Prototyping<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>The most important part of designing for anything<\/em><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Now that we have our basic design, we\u2019re ready to begin prototyping. <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/this-also\/designing-for-television-part-2-f31793e7d2e9#.lk85qjmcm\" target=\"_blank\" rel=\"noopener noreferrer\">Check out part 2<\/a> where we explain the basics of prototyping navigation behavior with a gamepad controller using the Gamepad API and some basic HTML\/CSS\/JS.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Here are some additional resources to start designing your own UI:<\/strong><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.dropbox.com\/s\/s5cjvi6z5d6w1qb\/TV_UI_Template.psd?dl=0\" target=\"_blank\" rel=\"noopener noreferrer\">Download Examples (PSD)<\/a><br \/>\n<a class=\"link link--blue fontWeight-4\"href=\"https:\/\/developer.apple.com\/tvos\/human-interface-guidelines\/\" target=\"_blank\" rel=\"noopener noreferrer\">tvOS Human Interface Guidelines<\/a><br \/>\n<a class=\"link link--blue fontWeight-4\"href=\"https:\/\/developer.android.com\/design\/tv\/index.html\" target=\"_blank\" rel=\"noopener noreferrer\">Designing for Android TV<\/a><br \/>\n<a class=\"link link--blue fontWeight-4\"href=\"https:\/\/developer.amazon.com\/public\/solutions\/devices\/fire-tv\/docs\/design-and-user-experience-guidelines\" target=\"_blank\" rel=\"noopener noreferrer\">Amazon Fire TV Design and User Experience Guidelines<\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>This post was originally published on <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/this-also\/designing-for-television-part-1-54508432830f#.jm0qpr8t5\" target=\"_blank\" rel=\"noopener noreferrer\">This Also's Medium<\/a>.<\/em><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>Did you know that Marvel supports Apple TV prototypes? Find out more <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/marvel-for-apple-tv-v2\/\">here<\/a>.<\/em><\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Further reading:<\/h3>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/marvelapp.com\/blog\/marvel-for-apple-tv-v2\/\" target=\"_blank\" rel=\"noopener noreferrer\">Marvel for Apple TV<\/a><\/li>\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/marvelapp.com\/blog\/2018s-ux-designer-salary-forecast\/\" target=\"_blank\" rel=\"noopener noreferrer\">2018's UX Designer Salary Forecast<\/a><\/li>\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/marvelapp.com\/blog\/35-great-ios-ui-kits\/\" target=\"_blank\" rel=\"noopener noreferrer\">35 Great iOS UI Kits<\/a><\/li>\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/marvelapp.com\/blog\/intro-color-theory\/\" target=\"_blank\" rel=\"noopener noreferrer\">An Intro to Color Theory<\/a><\/li>\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/marvelapp.com\/blog\/crash-course-ui-design\/\" target=\"_blank\" rel=\"noopener noreferrer\">A Crash Course in UI Design<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>An introduction to the basic ingredients of a TV UI Welcome to the new Golden Age of television. Not only is there more great television being produced than ever before, but we also have more choice in how we watch our favorite shows. And while we can access these shows anywhere and anytime through our computers, phones, and tablets, televisions&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/marvelapp.com\/blog\/designing-for-television\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":63,"featured_media":4380,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-4379","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-viewpoint"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"description\" content=\"An introduction to the basic ingredients of a TV UI and what to consider when designing for the home and variety of technology involved.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/marvelapp.com\/blog\/designing-for-television\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Designing for Television - TV UI&#039;s\" \/>\n<meta property=\"og:description\" content=\"An introduction to the basic ingredients of a TV UI and what to consider when designing for the home and variety of technology involved.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marvelapp.com\/blog\/designing-for-television\/\" \/>\n<meta property=\"og:site_name\" content=\"Marvel Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/marvelapp\" \/>\n<meta property=\"article:published_time\" content=\"2016-11-09T15:38:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-13T22:16:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Designing-for-TV.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"800\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:site\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"7 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/marvelapp\",\"https:\/\/www.instagram.com\/marvelapp\/\",\"https:\/\/www.linkedin.com\/company\/marvel-app\/\",\"https:\/\/twitter.com\/marvelapp\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/marvelapp.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/designing-for-television\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Designing-for-TV.png\",\"width\":2000,\"height\":800,\"caption\":\"designing-for-tv\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/marvelapp.com\/blog\/designing-for-television\/#webpage\",\"url\":\"https:\/\/marvelapp.com\/blog\/designing-for-television\/\",\"name\":\"Designing for Television - TV UI's\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/designing-for-television\/#primaryimage\"},\"datePublished\":\"2016-11-09T15:38:49+00:00\",\"dateModified\":\"2020-12-13T22:16:02+00:00\",\"description\":\"An introduction to the basic ingredients of a TV UI and what to consider when designing for the home and variety of technology involved.\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/marvelapp.com\/blog\/designing-for-television\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/marvelapp.com\/blog\/designing-for-television\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/designing-for-television\/#webpage\"},\"author\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/3bf22862ef58d310e419ae08c27a627e\"},\"headline\":\"Designing for Television &#8211; TV Ui design\",\"datePublished\":\"2016-11-09T15:38:49+00:00\",\"dateModified\":\"2020-12-13T22:16:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/designing-for-television\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/designing-for-television\/#primaryimage\"},\"articleSection\":\"Viewpoint\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/marvelapp.com\/blog\/designing-for-television\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/3bf22862ef58d310e419ae08c27a627e\",\"name\":\"Molly Lafferty\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/270c0e72db9e009b627359c94f4602aa4cf28e94afb27c29bfa9747a1cf86008?s=96&d=mm&r=g\",\"caption\":\"Molly Lafferty\"},\"description\":\"Product and UI motion designer in NYC. Design director at This Also. Follow me on Medium.\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/4379","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/users\/63"}],"replies":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/comments?post=4379"}],"version-history":[{"count":0,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/4379\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media\/4380"}],"wp:attachment":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media?parent=4379"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/categories?post=4379"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/tags?post=4379"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}