An important part of making your app a success is building an attractive and consistent user experience (UX). This means making the user interface intuitive and easy to understand, while also making it appealing to the eye. Ideally, your interface should also be as consistent as possible with other apps the user encounters on a day-to-day basis (although, of course, the degree to which this applies will vary depending on the type of app you're creating).
User experience documentation
- All UX wireframes, mock-ups and visual assets are now stored in Box. The main directory is called "Firefox OS UX." The folders you should refer to are:
- User Experience building blocks
- Commonly used user interface elements and how they should look and function in typical Firefox OS apps. Please visit our public Firefox OS UX > Guidelines directory on Box for the latest common controls, building blocks, transitions, menus, dialogs, typography, colors and more.
- Design asset library
- A library of downloadable design assets you can use to help speed the development of your user interface.
- Design patterns
- Documentation about workflow design patterns to help you create a consistent user experience for workflows in your apps. Please visit our public directory on Box for the latest patterns work at:
- Firefox OS style guide
- A guide to how things should look and feel, including the rules for app icons, the preferred style for how text should look in buttons and other user interface elements, and standard terminology.
Getting help from the community
You need help on a UX-related problem and can't find the solution in the documentation?
- Consult the web apps forum:
- Consult the layout forum, which covers CSS and HTML:
- Ask your question on the Mozilla IRC channel: #openwebapps