mozilla
Your Search Results

    Designing Open Web Apps

    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.

    General Web app design

    The items under this section apply generally to Web app design.

    Planning
    The articles in this section provide information on planning a successful Web app, including high level planning ideas and general design principles.
    UI layout basics
    These articles provide guides and theory behind implementing effective layouts for Open Web Apps, including responsive design, flexible boxes, etc.

    Firefox OS app design resources

    This section contains items that specifically relate to Firefox OS and Gaia app development.

    Firefox OS Building Blocks
    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 Gaia default apps. You are free to make use of these components in your own Firefox OS apps, or general Web apps.
    Firefox OS Visual styleguide
    Our style guide for Firefox OS visual design, covering colours, typeface, backgrounds, app icons, and the design of specific UI elements.
    Firefox OS Copy styleguide
    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.
    Firefox OS design asset library
    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.
    Firefox OS icon font
    Firefox OS has its own icon font set available: this article explains how to use it in your own apps.
    Firefox OS transitions
    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.
    Firefox OS in Arabic
    A guide to the specific UX design implementation Firefox OS has in place for dealing with Arabic (and other RTL languages.)
    Firefox OS TV UX
    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.
    Firefox OS TV User Interface & Animation Design
    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.