We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Designing and building apps Redirect 1

This page is not complete.

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. Here we will look at general patterns and design techniques that work for open web apps, including Firefox OS applications.

Note: the articles in this section of the docs cover graphics and UX in 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.

Design guidelines

Start by planning your app.
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.
Graphics for responsive sites
Ideas to keep in mind when designing graphics for responsive sites and applications.
Content styleguide
A guide to choosing effective fonts, writing good copy, and creating good image content for Open Web Apps.
Firefox OS styleguide
Styleguide for Firefox OS apps.
Firefox OS Icon styleguide
Designing a good application icon.

Design patterns and assets

Small screen design patterns
Guides to effective component design patterns that work on small screen apps, including Firefox OS.
Responsive navigation patterns
How do you make a UI that looks and works as great on a smartphone as it does on the desktop? Learn how to design UIs that change to fit your user's screen.
Design asset library
Graphical assets for helping design the visuals of Open Web Apps, including PSD files.

App layout

The building blocks of responsive design
Learn the basics of responsive design, an essential topic for modern app layout.
Responsive design versus adaptive design
Demystifying the terms "responsive" and "adaptive", and how they relate.
Mobile first
Often when creating responsive application layouts, it makes sense to create the mobile layout as the default, and build wider layouts on top.
Flexible boxes
Flexbox is a very useful CSS feature for flexible, responsive layouts.


Document Tags and Contributors

Last updated by: Sheppy,