![\"01_Home\"](\"https:\/\/blog.mozilla.org\/ux\/files\/2015\/04\/01_Home.jpg\")
<\/a><\/p>\nUser Interface Design<\/h4>\n
Responsive<\/strong><\/p>\n The controls are designed in code (SVG) and will scale to any screen size without the need for new bitmap graphics. The UI is responsive, it works across devices of all shapes and sizes, from small screen watches to giant screen TVs. The UI components are created in SVG by using simple flat circles. We minimized the use of gradients and reduced shadows as much as possible, but made sure that the controls can be identified distinctly.<\/p>\n Style<\/strong><\/p>\n Why a circle? We chose to use the circular shape of our Firefox logo as a source of inspiration. Circles have free movement (they naturally roll), shading and lines can enhance this sense of movement within the circle. Circles are warm, humane, comforting and natural. Their movement suggest energy and power. Their completeness suggests infinity, unity, and harmony. You\u2019ll see the circle used throughout the designs of the components, especially in the animations.<\/p>\n Customizable<\/strong><\/p>\n By changing a color, shape or style of an animation, the controls can be customized to suit any brand need. All controls are all well designed and created as CSS components allowing for effortless customization.<\/p>\n Groundwork<\/strong><\/p>\n A great way to make your animations move in a more lifelike manner is to vary the rate at which the object moves. Animation should imitate the world that we live in. So, it\u2019s important to ensure that the pace of movements within your animations, making sure they reflect the real world.<\/p>\n Positioning \/ Scaling \/ Rotating<\/p><\/div>\n Motion easing will create a more natural look when applied to positions, rotations, deformations, or scale. This will add acceleration and deceleration to the motion, and can make the experience much more playful and delightful.<\/p>\n Responsive<\/strong><\/p>\n Motion should be responsive and intuitive. It should react in a way that reassures the user, rather than surprises or confuses them. The reaction of the UI, to a users actions, should be corresponding and comprehensible.<\/p>\n Personality<\/strong><\/p>\n The most obvious principle is that any motion or animation should be of the highest standard possible. We animated and applied liquid motion to the main launchers (TV, Apps, Devices, and Dashboard) resulting in motion as the user selects each one of them. To users, this bespoke motion is truly delightful allowing for further engagement.<\/p>\n Orientation<\/strong><\/p>\n Motion should help ease the user through the experience. It should establish the \u201cphysical space\u201d of the UI by the way objects appear on and off the screen, or establish the user’s focus. It should aid the flow of actions, giving clear guidance through the navigation model. Here in our TV home design, we used scaled motion to guide the users through which objects are selected, and keep the user orientated within the interaction path.<\/p>\n Subtlety is key when designing the motion to UI. Motion should be used to help the user stay focused, therefore restraint is needed as the design is used as an accent to the interaction design and should not dominate the experience.<\/p>\n For more information and guides about Firefox OS TV, please refer to the session\u00a0TVs and connected devices<\/a><\/em> and find other links for relevant articles below.<\/p>\n I hope you enjoyed this post about how we designed Firefox OS TV. If you have any feedback or ideas to help Firefox OS Design Team improve ourselves, please leave a comment.<\/p>\n \u2500 By Scott Wu, Firefox OS UX designer<\/p>\n <\/p>\n","protected":false},"excerpt":{"rendered":" Introduction The approach to designing Firefox OS for Television is fundamentally different from phones or tablets. It requires rethinking of how experiences are structured and how to fulfill the needs … Read more<\/a><\/p>\n","protected":false},"author":1173,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24660,9600],"tags":[298,625],"coauthors":[],"_links":{"self":[{"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/posts\/3770"}],"collection":[{"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/users\/1173"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/comments?post=3770"}],"version-history":[{"count":0,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/posts\/3770\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/media?parent=3770"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/categories?post=3770"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/tags?post=3770"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/coauthors?post=3770"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"\"](\"https:\/\/blog.mozilla.org\/ux\/files\/2015\/04\/02_design_responsive1.jpg\")
<\/a><\/p>\n![\"\"](\"https:\/\/blog.mozilla.org\/ux\/files\/2015\/04\/03_design_style1.jpg\")
<\/a><\/p>\n![\"\"](\"https:\/\/blog.mozilla.org\/ux\/files\/2015\/04\/04_design_customize1.jpg\")
<\/a><\/p>\nDesign in Animations<\/h4>\n
![\"Positioning](\"https:\/\/blog.mozilla.org\/ux\/files\/2015\/04\/05_Ease_sample1.gif\")
<\/a>![\"06_Delete_card\"](\"https:\/\/blog.mozilla.org\/ux\/files\/2015\/04\/06_Delete_card.gif\")
<\/a><\/p>\n![\"07_Intro_cards\"](\"https:\/\/blog.mozilla.org\/ux\/files\/2015\/04\/07_Intro_cards.gif\")
<\/a><\/p>\n![\"08_Select_cards\"](\"https:\/\/blog.mozilla.org\/ux\/files\/2015\/04\/08_Select_cards.gif\")
<\/a><\/p>\nLess is more<\/h4>\n