Revision 699131 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>
</dl>
<dl>
 <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>
</dl>