New Balsamiq stencil makes sketching Firefox OS apps a breeze

I recently had the privilege to spend some time working on features for Firefox OS - the new open source, web-based smartphone operating system from our partners at Mozilla. Some of my work involved sketching out a big number of screens. The application I use for this type of work - Balsamiq (you should use it as well!) - allows users to create stencils with reusable UI elements, so I created one for Firefox OS. Then I realized that since this OS is so new and relatively unknown, app designers could use this stencil for sketching out their own app ideas for it. So I posted it online for you guys to download.

But why should you develop Firefox OS apps in the first place? And why should you use a stencil in the design process?

Why Firefox OS?

There are 3 main reasons why you should consider developing an app for Firefox OS:

  1. New platform
    The birth of a new operating system is a unique opportunity. A whole new ecosystem, with no clear winner in any vertical. The “Wazes” and “Instagrams” of the OS do not yet exist, so newcomers have a real chance to take the lead!

  2. New users
    Firefox OS will be distributed in territories that are virtually untapped by existing mobile platforms. These are developing markets in South America and East Europe, which have relatively low penetration of smartphones. Firefox OS will be shipped on low-cost devices and aggressively marketed to acquire a big chunk of first-time smartphone users. This means that many of the big brands have no significant advantage with these users over new ones!

  3. No need to learn a new programming language
    Firefox OS is completely web-based. If you already know HTML, CSS and Javascript, you’re good to go. Moreover, if you already have a web app, adjusting it for Firefox OS will be a piece of cake.

From both a business and a social perspective, developing apps for Firefox OS is a good idea. If you have an idea that might be big in these conditions, now is the time to act.

Why conventions?

In the realm of product design, conventions are design patterns that are repeated on many products. Think about white text fields and a magnifying glass for search bars, or putting important navigation links at the top of a website. Conventions are used to reduce cognitive effort and help users get familiar with your product more quickly. You can find other creative representations of these functionalities, but if you want to make it easier for new user to learn your product (especially if you have other unique features that require learning), you’re better off with sticking to these conventions.

At the birth of a new platform, conventions are essential. Because users are still not skilled with the platform and can’t handle too many nuances, it’s advised that new apps follow the operating system’s convention in their own design as well. Take a look at some of the first prominent iOS apps that came out and were introduced at Apple’s 2008 WWDC. They all look like an integral part of the iOS. Most of these apps have since changed their design to better reflect their brand. That’s OK, because many iOS users are now more experienced with it and can deal with new interfaces. But at the first year or two of a new platform, app developers should follow its conventions carefully.

Luckily, Mozilla did a great job with publicizing its UI guidelines. At Building Firefox OS, you can find all of the platform’s building blocks, coupled with PSD files and live code. These are great for the last stages of the app development process, but not for the early ideation and design stages. For these, Balsamiq is much better.

Why Balsamiq?

Balsamiq is the tool I use for sketching out quick interface ideas. It’s great for the first stages of product ideation, in which speed of generating rough interface sketches is key. The app comes with a stencil of web and iOS UI controllers, which you can just drag to your canvas to quickly assemble your screen. For other platforms, users can create their own stencils, or download stencils others created from the community marketplace.

Balsamiq is a great tool for the early ideation phases. It’s cheap (only $79 for the desktop version), easy to use, and has plug-ins for other work applications you might be using (Google Drive, Jira, Confluence and more). If you’re not happy with your current sketching tool, I suggest you check Balsamiq out.

What are you waiting for? Download!

If you’re already using Balsamiq, and decided to develop an app for Firefox OS, make sure to download our Firefox OS stencil for Balsamiq for easier, convention-driven sketching. My stencil contains all of Firefox OS’s building blocks, which makes it a breeze to sketch apps that adhere to the platform’s conventions. And who knows? Your app might just be the next big thing for millions of Firefox OS users.