Categories: Firefox OS

Drawl: A simple Firefox OS drawing app

Drawl is a simple drawing application for your Firefox OS phone. Users can use different brush styles, sizes and colors to draw on the canvas. They can then save the drawing to their Firefox OS Gallery app and share it with their friends.

Maureen Hanratty and I created the app through a simple collaboration process.

At first we came up with an idea for a collaborative drawing game. Stepping back we realized that, if we built a really solid drawing app it could be the foundation not only for our app but for tons of other cool drawing web apps. Maureen downloaded a bunch of apps and got a sense of what features and interactions worked well for drawing on a mobile phone. Through a series of sketches she honed in on a simple, straightforward UI for the app. To understand how the animations would work, she made a prototype in Keynote.

Maureen handed off the Keynote prototype, and I started to build the mobile web app. At first, I thought it would be great to build one app that could work across all mobile devices. But that became difficult because there are different hardware and design patterns across iOS, Android and Firefox OS. I decided to build the app just for Firefox OS. The app’s template is based off of Robert Nyman’s Boilerplate app.

After building the baseline template for Drawl, I started to create the artwork and icons for the app. I looked at the aesthetic and iconography for other drawing apps for reference. We wanted the canvas to be the focal interaction point for the user, so I made the artwork and icons stark and simple to allow the user to focus in on what they are drawing.

We want to build other apps on top of this drawing app. For instance, an Exquisite Corpse game, which you can play with friends could be great to build. We also want to get community members involved to build apps based on Drawl, submitting new brushes, color palettes, and of course taking our source code and building their own drawing based apps!

To download the app on your Firefox OS device, go here.

And if you’d like to contribute to the app (such as building apps using the drawing feature or adding new brush sets), go to the GitHub repo here and submit a Pull Request.

Happy Drawling!

4 comments on “Drawl: A simple Firefox OS drawing app”

  1. Caspy7 wrote on

    Here’s an idea.
    Connect with another player/collaborator and then there are timed increments for one player to draw while the other player waits and then drawing control switches.
    This might fit into a few different forms.
    – just for fun to see what you make, riffing off each other to make something fun, funny or artistic – optionally provide a theme or word
    – some sort of win, lose or draw game with multiple players on a team who are guessing a word or phrase. This could be done in a group setting or with isolated friends on their phones.
    – same as above but each drawer gets only *one* cycle to draw relying that the next player sees where it’s going

    You would of course communicate to the ‘waiter’ that drawing control is locked as well as show a countdown timer. Alternatively, black out the waiter’s view of the canvas so once they get control it’s a surprise and they have to take it it quickly and adapt.

    (Perhaps this is something along the lines of what you were already thinking.)

    1. Aaron wrote on

      Hi Caspy7, that’s a great idea! We will add it to the GitHub repo in Issues. Thanks!

    2. mhanratty wrote on

      Thanks for the feedback and ideas Caspy! One of the drawing apps we plan to build is an exquisite corpse app called Exquisite Monster. It is based on a drawing game the Surrealists played called Exquisite corpse ( One play draws the head of the monster, passes it off the next player to draw the body and the last player draws the legs. No one sees what the other person has drawn until the end. I have a very rough keynote prototype if you’d like to take a look and give some feedback:

      I like your idea of adding a counter to add to the excitement. Definitely follow the Github project and keep in touch with your thoughts and feedback. If you want to turn some of your ideas to sketches or prototypes we’d love to see them too! Just post them here or add a issue to Github.

  2. Willy wrote on

    I found this example about Exquisite Corpse