Please note, this is a STATIC archive of website developer.mozilla.org from November 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.
Archive of obsolete content
Your Search Results

    Graphics and UX

    When creating Open Web Apps, you need to give a lot of consideration to the look and feel, user experience and workflow of your applications. In previous parts of this material we looked at application planning and flexible layouts for applications, and in this section we will go further, looking at both general patterns and design techniques that work for Open Web Apps, and specific techniques and assets that will help you put together great-looking Firefox OS apps that match the experience of the device's default applications.

    Note: the articles in this section of the docs cover graphics and UX in a large amount of detail, including links to relevant examples and assets. If you are just searching for a library of assets and samples, BuildingFirefoxOS is a good place to go.

    High level app design concepts

    Design principles
    A useful list of general design principles to start with.
    Installed app considerations
    High level considerations particular to installed Open Web App UX.
    Graphic design for responsive sites
    Ideas to keep in mind when designing graphics for responsive sites and applications.
    Grid design approaches   

    Design guides and resources

    Design patterns
    Guides to effective design patterns that work on small screen apps, including Firefox OS.
    Building blocks
    A library of components for use in Open Web Apps, including usage guides, assets, and HTML, CSS and JavaScript code snippets.
    Typography and content
    A guide to choosing effective fonts, and writing good content, for Open Web Apps.
    Colors
    Color palettes for Firefox OS apps, and general color scheme advice for Open Web Apps
    Iconography
    Designing a good application icon, and icon usage best practices.

    Drawing and animating

    CSS transforms
    CSS transforms let you rotate, scale, and zoom HTML content, taking advantage of hardware acceleration where available, all without relying on JavaScript code.
    CSS transitions
    CSS transitions let you animate changes to your CSS. Once a transition effect is configured, changes to your CSS occur over a period of time instead of instantaneously. This makes it possible to easily and efficiently create a wide variety of visual effects in your apps.
    CSS animations
    CSS animations let you animate changes to your document on a more fundamental level, using keyframes to precisely configure the animation effect. This also lets you create looping animation effects rather than effects that happen just once, as is the case with transitions, all without relying on JavaScript.
    HTML canvas
    The HTML <canvas> element provides a 2D graphics workspace for you to draw in. This is extremely useful for many purposes, including 2D games.
    WebGL
    WebGL is a Web-friendly version of OpenGL ES, which lets your app offer hardware accelerated 3D graphics.
    SVG
    Scalable Vector Graphics (SVG) is a technology that lets you draw graphics using vectors instead of bitmapped images. This is great for scalability, presenting diagrams and charts, and for high-quality, scalable user interfaces.
     
    Tools for app developers
    Technology reference documentation
    Getting help from the community

    If you still aren't sure how to do what you're trying to get done, feel free to join the conversation!

    Don't forget about the netiquette...

     

    Document Tags and Contributors

    Tags: 
     Contributors to this page: chrisdavidmills, dkocho4
     Last updated by: dkocho4,