Revision 799549 of Designing Open Web Apps

<div class="summary">
<p>In this section, we'll introduce design and UX principles to incorporate into your Open Web Apps. In an effort to help you kickstart your project, we have included links to relevant examples and style guides.</p>
</div>

<h2 id="General_Web_app_design">General Web app design</h2>

<p>The items under this section apply generally to Web app design.</p>

<dl>
 <dt><a href="/en-US/Apps/Design/Planning">Planning</a></dt>
 <dd>The articles in this section provide information on planning a successful Web app, including high level planning ideas and general design principles.</dd>
 <dt><a href="/en-US/Apps/Design/UI_layout_basics">UI layout basics</a></dt>
 <dd>These articles provide guides and theory behind implementing effective layouts for Open Web Apps, including responsive design, flexible boxes, etc.</dd>
</dl>

<h2 id="Firefox_OS_app_design_resources">Firefox OS app design resources</h2>

<p>This section contains items that specifically relate to Firefox OS and Gaia app development.</p>

<dl>
 <dt><a href="/en-US/Apps/Design/Firefox_OS_building_blocks">Firefox OS Building Blocks</a></dt>
 <dd>The Firefox OS Building Blocks are reusable UI components (also called 'common controls') that reflect OS-wide design patterns. Building Blocks are used to create the interfaces of all <a href="https://developer.mozilla.org/en-US/Firefox_OS/Platform/Gaia">Gaia</a> default apps. You are free to make use of these components in your own Firefox OS apps, or general Web apps.</dd>
 <dt><a href="https://www.mozilla.org/en-US/styleguide/products/firefox-os/">Firefox OS Visual styleguide</a></dt>
 <dd>Our style guide for Firefox OS visual design, covering colours, typeface, backgrounds, app icons, and the design of specific UI elements.</dd>
 <dt><a href="/en-US/Apps/Design/Copy_styleguide">Firefox OS Copy styleguide</a></dt>
 <dd>This guide outlines the rules we follow for writing Firefox OS app copy, but can be used as a general guide to writing good copy for any app interfaces.</dd>
 <dt><a href="/en-US/Apps/Design/Firefox_OS_Design_asset_library">Firefox OS design asset library</a></dt>
 <dd>In this section you'll find design assets, artwork, graphic templates, fonts and other materials that will be helpful as you design Firefox OS/Gaia apps.</dd>
 <dt><a href="/en-US/Apps/Design/Firefox_OS_icon_font">Firefox OS icon font</a></dt>
 <dd>Firefox OS has its own icon font set available: this article explains how to use it in your own apps.</dd>
 <dt><a href="/en-US/Apps/Design/Firefox_OS_transitions">Firefox OS transitions</a></dt>
 <dd>A reference to some of the transitions used in Firefox OS to move between different states in apps, including animated GIFs demonstrating the animations used, plus code samples to show the CSS animation code needed to implement these animations.</dd>
 <dt><a href="/en-US/Apps/Design/Firefox_OS_in_Arabic">Firefox OS in Arabic</a></dt>
 <dd>A guide to the specific UX design implementation Firefox OS has in place for dealing with Arabic (and other RTL languages.)</dd>
 <dt><a href="/en-US/Apps/Design/Firefox_OS_TV_UX">Firefox OS TV UX</a></dt>
 <dd>Firefox OS for TVs also has some specific UX design considerations. This section of the docs outlines the basic metaphors and high level design used in the system and its apps, icons for TV, TV building block specifics, etc.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/Apps/Design/Firefox_OS_TV_User_Interface_Animation_Design" style="font-weight: bold;">Firefox OS TV User Interface &amp; Animation Design</a></dt>
 <dd>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 of a wide range of uses. Firefox OS for Television was designed not only to simplify the UI, but also to optimize interaction.</dd>
</dl>