{"id":1430,"date":"2012-09-24T10:41:10","date_gmt":"2012-09-24T14:41:10","guid":{"rendered":"http:\/\/blog.mozilla.org\/ux\/?p=1430"},"modified":"2019-04-02T11:28:17","modified_gmt":"2019-04-02T15:28:17","slug":"mozcamp-warsaw-design-principles-behind-firefox-os-ux","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/ux\/2012\/09\/mozcamp-warsaw-design-principles-behind-firefox-os-ux\/","title":{"rendered":"MozCamp Warsaw: Design Principles Behind Firefox OS UX"},"content":{"rendered":"<p><a href=\"http:\/\/blog.mozilla.org\/ux\/2012\/09\/mozcamp-warsaw-design-principles-behind-firefox-os-ux\/mozilla-mozcamp-firefox-os-001\/\" rel=\"attachment wp-att-1431\"><img decoding=\"async\" loading=\"lazy\" class=\"alignleft size-large wp-image-1431\" title=\"mozilla-mozcamp-firefox-os.001\" src=\"http:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.001-600x480.jpg\" alt=\"\" width=\"600\" height=\"480\" srcset=\"https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.001-600x480.jpg 600w, https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.001-252x201.jpg 252w, https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.001.jpg 1280w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>This is the presentation I gave at MozCamp Warsaw earlier this month. Many people have been asking for it, so it made sense to create a post about it, and give a bit more context the slides.<\/p>\n<p>&nbsp;<\/p>\n<h1>Rewind to MWC 2012&#8230;<\/h1>\n<p><a href=\"http:\/\/blog.mozilla.org\/ux\/2012\/09\/mozcamp-warsaw-design-principles-behind-firefox-os-ux\/mozilla-mozcamp-firefox-os-003\/\" rel=\"attachment wp-att-1432\"><img decoding=\"async\" loading=\"lazy\" class=\"alignleft size-large wp-image-1432\" title=\"mozilla-mozcamp-firefox-os.003\" src=\"http:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.003-600x480.jpg\" alt=\"\" width=\"600\" height=\"480\" srcset=\"https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.003-600x480.jpg 600w, https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.003-252x201.jpg 252w, https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.003.jpg 1280w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>It all started like a &#8220;skunks works&#8221; project, we had a few people working on many parts&#8230; I was contributing a few hours a week, and Josh Carpenter @joshcarpenter was tasked on penning the entire UX with the Visual Design in about a week for the MWC demo, which is a near impossible feat! But our showing at MWC was success&#8230;<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"http:\/\/blog.mozilla.org\/ux\/2012\/09\/mozcamp-warsaw-design-principles-behind-firefox-os-ux\/mozilla-mozcamp-firefox-os-004\/\" rel=\"attachment wp-att-1433\"><img decoding=\"async\" loading=\"lazy\" class=\"alignleft size-large wp-image-1433\" title=\"mozilla-mozcamp-firefox-os.004\" src=\"http:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.004-600x480.jpg\" alt=\"\" width=\"600\" height=\"480\" srcset=\"https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.004-600x480.jpg 600w, https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.004-252x201.jpg 252w, https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.004.jpg 1280w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>Since both of our teams were small and had strengths in different areas it only made sense to partner up for v.1 of the OS.<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"http:\/\/blog.mozilla.org\/ux\/2012\/09\/mozcamp-warsaw-design-principles-behind-firefox-os-ux\/mozilla-mozcamp-firefox-os-005\/\" rel=\"attachment wp-att-1434\"><img decoding=\"async\" loading=\"lazy\" class=\"alignleft size-large wp-image-1434\" title=\"mozilla-mozcamp-firefox-os.005\" src=\"http:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.005-600x480.jpg\" alt=\"\" width=\"600\" height=\"480\" srcset=\"https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.005-600x480.jpg 600w, https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.005-252x201.jpg 252w, https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.005.jpg 1280w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>At this point (April 2012) with this new partnership I wanted to create a realignment of the visual design. (At the time this identity map made sense but as we proceed forward, it will be refined post v.1). Working with the UX team on where we want to take the visual design of all our products the following themes emerged:<\/p>\n<ul>\n<li>Shapes which are Bold, Geometric but with hints of organic softness.<\/li>\n<li>UI that communicates a sense of handcrafted design.<\/li>\n<li>Design that is minimal, effective and intuitive but doesn&#8217;t feel soulless; has warmth.<\/li>\n<\/ul>\n<p>Much like various versions of Firefox, the overall concept here is premium and of quality, but not because its expensive. Good quality design should be accessible to masses much like our products. Our strong focus is on high quality and distinctive design in the marketplace.<\/p>\n<p>&nbsp;<\/p>\n<h1>Design Philosophy (DNA)<\/h1>\n<p><a href=\"http:\/\/blog.mozilla.org\/ux\/2012\/09\/mozcamp-warsaw-design-principles-behind-firefox-os-ux\/mozilla-mozcamp-firefox-os-008\/\" rel=\"attachment wp-att-1457\"><img decoding=\"async\" loading=\"lazy\" class=\"alignleft size-large wp-image-1457\" title=\"mozilla-mozcamp-firefox-os.008\" src=\"http:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.008-600x480.jpg\" alt=\"\" width=\"600\" height=\"480\" srcset=\"https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.008-600x480.jpg 600w, https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.008-252x201.jpg 252w, https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.008.jpg 1280w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<h4><\/h4>\n<h4><\/h4>\n<h4>Common elements in every application:<\/h4>\n<ul>\n<li>Familiar Layout\n<ul>\n<li>Top Header which contains a backward navigation button (back, cancel or menu) on the left side of the screen, screen title to show the user where they are (left justified) and up to 2 action buttons often allowing for forward progression within the application<\/li>\n<li>Bottom Toolbar containing up to 5 action icons<\/li>\n<\/ul>\n<\/li>\n<li>Magazine Like Layout: emphasis on typography and we wanted to make each app like it was type set by a human so we opted to go for a strong left alignment rather than mindlessly center aligning everything. This magazine like layout translates to images as well, many of them are strategically cropped to best suit their purpose in the application.<\/li>\n<li>Bold Colour to better appeal to our launch audience through the communication of warmth and confidence.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><a href=\"http:\/\/blog.mozilla.org\/ux\/2012\/09\/mozcamp-warsaw-design-principles-behind-firefox-os-ux\/mozilla-mozcamp-firefox-os-010\/\" rel=\"attachment wp-att-1436\"><img decoding=\"async\" loading=\"lazy\" title=\"mozilla-mozcamp-firefox-os.010\" src=\"http:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.010-600x480.jpg\" alt=\"\" width=\"600\" height=\"480\" \/><\/a><\/p>\n<p><em>(Diagram thanks to Ian Barlow @ibarlow).<\/em> Layering of content has been a comment UI element sense in <a title=\"Firefox for Mobile\" href=\"http:\/\/www.mozilla.org\/en-US\/mobile\/\" target=\"_blank\">Firefox for Mobile<\/a>, we&#8217;re bring this element into Firefox OS in full force.<\/p>\n<p>Content for user consumption is on the top level, settings are always found beneath.<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"http:\/\/blog.mozilla.org\/ux\/2012\/09\/mozcamp-warsaw-design-principles-behind-firefox-os-ux\/mozilla-mozcamp-firefox-os-009\/\" rel=\"attachment wp-att-1435\"><img decoding=\"async\" loading=\"lazy\" class=\"alignleft size-large wp-image-1435\" title=\"mozilla-mozcamp-firefox-os.009\" src=\"http:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.009-600x480.jpg\" alt=\"\" width=\"600\" height=\"480\" srcset=\"https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.009-600x480.jpg 600w, https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.009-252x201.jpg 252w, https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.009.jpg 1280w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>You can see how the header navigation and layering of visual design come together in this example. The user presses the menu button on the top left hand corner, the menu slides out from beneath the content. Since the menu doesn&#8217;t progress the user further in the app it slides from the left.<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"http:\/\/blog.mozilla.org\/ux\/2012\/09\/mozcamp-warsaw-design-principles-behind-firefox-os-ux\/mozilla-mozcamp-firefox-os-012\/\" rel=\"attachment wp-att-1437\"><img decoding=\"async\" loading=\"lazy\" class=\"alignleft size-large wp-image-1437\" title=\"mozilla-mozcamp-firefox-os.012\" src=\"http:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.012-600x480.jpg\" alt=\"\" width=\"600\" height=\"480\" srcset=\"https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.012-600x480.jpg 600w, https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.012-252x201.jpg 252w, https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.012.jpg 1280w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>In the Firefox browser example the tabs are more of a menu, so they are depicted beneath the content since they allow the user to progress forward in the app, they slide out from the right.<\/p>\n<p>These left &lt;&gt; right transitions create a natural path for discoverability.<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"http:\/\/blog.mozilla.org\/ux\/2012\/09\/mozcamp-warsaw-design-principles-behind-firefox-os-ux\/mozilla-mozcamp-firefox-os-013\/\" rel=\"attachment wp-att-1438\"><img decoding=\"async\" loading=\"lazy\" class=\"alignleft size-large wp-image-1438\" title=\"mozilla-mozcamp-firefox-os.013\" src=\"http:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.013-600x480.jpg\" alt=\"\" width=\"600\" height=\"480\" srcset=\"https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.013-600x480.jpg 600w, https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.013-252x201.jpg 252w, https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.013.jpg 1280w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>Many applications have a distinct character visually catered to their use, with a list layout, focused on quick triage of content.<\/p>\n<ul>\n<li>Productivity applications create a sense of an office; bright with an emphasis on typographic content.<\/li>\n<li>Media applications create a more theatric (dark) experience with emphasis on graphical content rather than text.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><a href=\"http:\/\/blog.mozilla.org\/ux\/2012\/09\/mozcamp-warsaw-design-principles-behind-firefox-os-ux\/mozilla-mozcamp-firefox-os-014\/\" rel=\"attachment wp-att-1439\"><img decoding=\"async\" loading=\"lazy\" class=\"alignleft size-large wp-image-1439\" title=\"mozilla-mozcamp-firefox-os.014\" src=\"http:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.014-600x480.jpg\" alt=\"\" width=\"600\" height=\"480\" srcset=\"https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.014-600x480.jpg 600w, https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.014-252x201.jpg 252w, https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.014.jpg 1280w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>Media content varies per application, so aim here was to create a foundational grid which would work with each content type.<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"http:\/\/blog.mozilla.org\/ux\/2012\/09\/mozcamp-warsaw-design-principles-behind-firefox-os-ux\/mozilla-mozcamp-firefox-os-015\/\" rel=\"attachment wp-att-1440\"><img decoding=\"async\" loading=\"lazy\" class=\"alignleft size-large wp-image-1440\" title=\"mozilla-mozcamp-firefox-os.015\" src=\"http:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.015-600x480.jpg\" alt=\"\" width=\"600\" height=\"480\" srcset=\"https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.015-600x480.jpg 600w, https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.015-252x201.jpg 252w, https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.015.jpg 1280w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>Our media applications have the following characteristics&#8230;<\/p>\n<ul>\n<li>Content is King while chrome is a distraction therefore, it is minimized.<\/li>\n<li>Asymmetrical layout (left alignment)<\/li>\n<li>Limited, if any skeuomorphic textures and graphic effects as they are deemed a distraction<\/li>\n<li>Any elements non essential for communication should be secondary<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><a href=\"http:\/\/blog.mozilla.org\/ux\/2012\/09\/mozcamp-warsaw-design-principles-behind-firefox-os-ux\/mozilla-mozcamp-firefox-os-016\/\" rel=\"attachment wp-att-1441\"><img decoding=\"async\" loading=\"lazy\" class=\"alignleft size-large wp-image-1441\" title=\"mozilla-mozcamp-firefox-os.016\" src=\"http:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.016-600x480.jpg\" alt=\"\" width=\"600\" height=\"480\" srcset=\"https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.016-600x480.jpg 600w, https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.016-252x201.jpg 252w, https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.016.jpg 1280w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>The aim of imagery is to add value not clutter. Rather than having a gray note graphic for missing album art, we created custom painting inspired placeholders for missing album art. In the productivity apps rather than having a missing contact image silhouette icon which creates noise (where emphasis should be on typography), no contact graphic appears.<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"http:\/\/blog.mozilla.org\/ux\/2012\/09\/mozcamp-warsaw-design-principles-behind-firefox-os-ux\/mozilla-mozcamp-firefox-os-017\/\" rel=\"attachment wp-att-1442\"><img decoding=\"async\" loading=\"lazy\" class=\"alignleft size-large wp-image-1442\" title=\"mozilla-mozcamp-firefox-os.017\" src=\"http:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.017-600x480.jpg\" alt=\"\" width=\"600\" height=\"480\" srcset=\"https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.017-600x480.jpg 600w, https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.017-252x201.jpg 252w, https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.017.jpg 1280w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>Apps outside of the core media and productivity suite have distinct identities. Our aim was to balance sophistication with the approachability skeuomorphic design brings, textures are subtle and forms are stylized. A variety in bright highlight colours bring warmth and soul to each application.<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"http:\/\/blog.mozilla.org\/ux\/2012\/09\/mozcamp-warsaw-design-principles-behind-firefox-os-ux\/mozilla-mozcamp-firefox-os-018\/\" rel=\"attachment wp-att-1443\"><img decoding=\"async\" loading=\"lazy\" class=\"alignleft size-large wp-image-1443\" title=\"mozilla-mozcamp-firefox-os.018\" src=\"http:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.018-600x480.jpg\" alt=\"\" width=\"600\" height=\"480\" srcset=\"https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.018-600x480.jpg 600w, https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.018-252x201.jpg 252w, https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.018.jpg 1280w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>For v.1 our feature set had to be focused&#8230; but we felt wallpapers and allowing users to customize them was something that we had to include. The user has access to their full app grid or can live on the homescreen, their wallpaper (most likely being of their favorite person(s) or place) in full view.<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"http:\/\/blog.mozilla.org\/ux\/2012\/09\/mozcamp-warsaw-design-principles-behind-firefox-os-ux\/mozilla-mozcamp-firefox-os-019\/\" rel=\"attachment wp-att-1444\"><img decoding=\"async\" loading=\"lazy\" class=\"alignleft size-large wp-image-1444\" title=\"mozilla-mozcamp-firefox-os.019\" src=\"http:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.019-600x480.jpg\" alt=\"\" width=\"600\" height=\"480\" srcset=\"https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.019-600x480.jpg 600w, https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.019-252x201.jpg 252w, https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.019.jpg 1280w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>Examples of various Firefox OS elements. Strong emphasis on Typography<br \/>\nFamiliarity (Firefox browser similar to Android version), Iconic Shapes but most importantly variety.<\/p>\n<p>&nbsp;<\/p>\n<h1>Iconography<\/h1>\n<p><a href=\"http:\/\/blog.mozilla.org\/ux\/2012\/09\/mozcamp-warsaw-design-principles-behind-firefox-os-ux\/mozilla-mozcamp-firefox-os-020\/\" rel=\"attachment wp-att-1445\"><img decoding=\"async\" loading=\"lazy\" class=\"alignleft size-large wp-image-1445\" title=\"mozilla-mozcamp-firefox-os.020\" src=\"http:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.020-600x480.jpg\" alt=\"\" width=\"600\" height=\"480\" srcset=\"https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.020-600x480.jpg 600w, https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.020-252x201.jpg 252w, https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.020.jpg 1280w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>Peter La @ArtofPeterLa came up with this concept for the application icons: &#8220;Free the Web.&#8221; The icons would placed on a plate but some of them would break out to enforce the concept. We initially thought about using a square plate but the circle form created a unique opportunity to own a shape not common on any major OS, this would give Firefox a more distinct appearance.<br \/>\nWe use a variety of plates, with certain colours suited better for certain application types:<\/p>\n<ul>\n<li>phone related: green<\/li>\n<li>media related: blue<\/li>\n<li>productivity related: orange<\/li>\n<li>settings and utilities: gray<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><a href=\"http:\/\/blog.mozilla.org\/ux\/2012\/09\/mozcamp-warsaw-design-principles-behind-firefox-os-ux\/mozilla-mozcamp-firefox-os-021\/\" rel=\"attachment wp-att-1446\"><img decoding=\"async\" loading=\"lazy\" class=\"alignleft size-large wp-image-1446\" title=\"mozilla-mozcamp-firefox-os.021\" src=\"http:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.021-600x480.jpg\" alt=\"\" width=\"600\" height=\"480\" srcset=\"https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.021-600x480.jpg 600w, https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.021-252x201.jpg 252w, https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.021.jpg 1280w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>The overall concept for the action icons revolved around Friendly + Confident<\/p>\n<ul>\n<li>Mature Forms with emphasis on confidence through selective cropping<\/li>\n<li>Curvature should be small (tight) to communicate a sense of polish and approachability, but not overt to appear childish or cartoony<\/li>\n<li>Geometric curvature is favored over organic, but the ideal would have mixture of two (geometric without feeling stiff)<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><a href=\"http:\/\/blog.mozilla.org\/ux\/2012\/09\/mozcamp-warsaw-design-principles-behind-firefox-os-ux\/mozilla-mozcamp-firefox-os-022\/\" rel=\"attachment wp-att-1447\"><img decoding=\"async\" loading=\"lazy\" class=\"alignleft size-large wp-image-1447\" title=\"mozilla-mozcamp-firefox-os.022\" src=\"http:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.022-600x480.jpg\" alt=\"\" width=\"600\" height=\"480\" srcset=\"https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.022-600x480.jpg 600w, https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.022-252x201.jpg 252w, https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.022.jpg 1280w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>Currently we have over 100 icon metaphors&#8230;<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"http:\/\/blog.mozilla.org\/ux\/2012\/09\/mozcamp-warsaw-design-principles-behind-firefox-os-ux\/mozilla-mozcamp-firefox-os-023\/\" rel=\"attachment wp-att-1448\"><img decoding=\"async\" loading=\"lazy\" class=\"alignleft size-large wp-image-1448\" title=\"mozilla-mozcamp-firefox-os.023\" src=\"http:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.023-600x480.jpg\" alt=\"\" width=\"600\" height=\"480\" srcset=\"https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.023-600x480.jpg 600w, https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.023-252x201.jpg 252w, https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.023.jpg 1280w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>Colour has always been an important part of Firefox, especially the colour orange. We tried various concepts of application but in the end using only orange as a high colour did not work, so it has been reserved as an accent with its heaviest use in the productivity applications&#8217; header. We used blue as highlight colour instead for the following reasons:<\/p>\n<ul>\n<li>Complements the Firefox orange beautifully<\/li>\n<li>The majority of the human population prefer blue<\/li>\n<\/ul>\n<p>There was also an opportunity to speak to the partnership with Telefonica by choosing a blue hue which aligns to their brand colour.<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"http:\/\/blog.mozilla.org\/ux\/2012\/09\/mozcamp-warsaw-design-principles-behind-firefox-os-ux\/mozilla-mozcamp-firefox-os-024\/\" rel=\"attachment wp-att-1449\"><img decoding=\"async\" loading=\"lazy\" class=\"alignleft size-large wp-image-1449\" title=\"mozilla-mozcamp-firefox-os.024\" src=\"http:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.024-600x480.jpg\" alt=\"\" width=\"600\" height=\"480\" srcset=\"https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.024-600x480.jpg 600w, https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.024-252x201.jpg 252w, https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.024.jpg 1280w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>YES! All will be converted to CSS in one common library. We expect to support the developer &amp; design community with a robust set of building blocks which will be released sometime before the OS goes to market and will be found on our new style guide website: <a href=\"http:\/\/www.mozilla.org\/en-US\/styleguide\/\" target=\"_blank\">http:\/\/www.mozilla.org\/en-US\/styleguide\/<\/a><\/p>\n<p>&nbsp;<\/p>\n<h1>Typography<\/h1>\n<p><a href=\"http:\/\/blog.mozilla.org\/ux\/2012\/09\/mozcamp-warsaw-design-principles-behind-firefox-os-ux\/mozilla-mozcamp-firefox-os-026\/\" rel=\"attachment wp-att-1450\"><img decoding=\"async\" loading=\"lazy\" class=\"alignleft size-large wp-image-1450\" title=\"mozilla-mozcamp-firefox-os.026\" src=\"http:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.026-600x480.jpg\" alt=\"\" width=\"600\" height=\"480\" srcset=\"https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.026-600x480.jpg 600w, https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.026-252x201.jpg 252w, https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.026.jpg 1280w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>This is the Firefox logo, it uses Meta (like much of Mozilla&#8217;s brand) which was designed over 2 decades ago by <a title=\"Erik Spiekermann\" href=\"http:\/\/en.wikipedia.org\/wiki\/Erik_Spiekermann\" target=\"_blank\">Erik Spiekermann<\/a> who intended it to be a \u201ccomplete antithesis of Helvetica,\u201d which he found \u201cboring and bland. Meta as great as it is, was designed for a print environment and due to licensing restrictions can not be freely distributed&#8230;<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"http:\/\/blog.mozilla.org\/ux\/2012\/09\/mozcamp-warsaw-design-principles-behind-firefox-os-ux\/mozilla-mozcamp-firefox-os-027\/\" rel=\"attachment wp-att-1451\"><img decoding=\"async\" loading=\"lazy\" class=\"alignleft size-large wp-image-1451\" title=\"mozilla-mozcamp-firefox-os.027\" src=\"http:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.027-600x480.jpg\" alt=\"\" width=\"600\" height=\"480\" srcset=\"https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.027-600x480.jpg 600w, https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.027-252x201.jpg 252w, https:\/\/blog.mozilla.org\/ux\/files\/2012\/09\/mozilla-mozcamp-firefox-os.027.jpg 1280w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<h1><\/h1>\n<h1><\/h1>\n<p>A few of our friends at Telefonica worked with Erik in the past which lead to an opportunity to work with him again on a typeface for the Firefox OS. So, it only made sense to create a digitally evolved version of our favorite typeface with increased legibility at small sizes and a more contemporary feel. More information on this project will come in the near future for now, above is a sample&#8230;<\/p>\n<p>&nbsp;<\/p>\n<h1>Sound Design<\/h1>\n<p>During the MozCamp presentation I played some samples, since then those have been revised, so a preview of the suite will be seen in a future blog post. However I can speak about the overall art direction which revolves around 3 themes a contemporary baseline inline with the overall visual theme of the OS and 2 variations on it. The first variation is much more relaxed, casual and soothing to contrast with its polar opposite, a sound theme that is direct, loud and more on the professional side.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is the presentation I gave at MozCamp Warsaw earlier this month. Many people have been asking for it, so it made sense to create a post about it, and &hellip; <a class=\"go\" href=\"https:\/\/blog.mozilla.org\/ux\/2012\/09\/mozcamp-warsaw-design-principles-behind-firefox-os-ux\/\">Read more<\/a><\/p>\n","protected":false},"author":144,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9591,246,4498,24660,9577,9600],"tags":[],"coauthors":[306191],"_links":{"self":[{"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/posts\/1430"}],"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\/144"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/comments?post=1430"}],"version-history":[{"count":0,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/posts\/1430\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/media?parent=1430"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/categories?post=1430"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/tags?post=1430"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/coauthors?post=1430"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}