mozilla
검색 결과

    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.