This week, I worked on creating interface mockups for my ownCloud camera backup app for Firefox OS. To make these mock-ups, I used Pencil, an open-source tool for GUI prototyping that has builds available for Mac, Windows, and Linux. (I actually installed it as a Firefox extension.) Pencil was suggested to me by several different ownCloud contributors, and I've been very pleased with it so far. The drag-and-drop editor is quite intuitive. The only frustrating part of the application is the clipart browser, which crashes Firefox repeatedly and doesn't allow image resizing. Thankfully, copying and pasting images works seamlessly.

Pencil interface screenshot

I quickly found that I was prone to unnecessary perfectionism when it came to making low-resolution mock-ups. As a detail-oriented person, it was difficult to me to let go of the idea of aesthetic cohesion and focus on blocking out the largest, most prominent elements of the design. A few people suggested I might benefit from using "sketchy" UI elements, like this set (included with Pencil), to help offset the unneccesary level of detail I was tempted to include in the first set of mock-ups.

Sketchy interface elements in Pencil

I'm sure this is elementary to many designers — Balsamiq's mockup tools include similar elements, and I've discovered that many designers purposefully use Comic Sans for their lorem ipsum text — but actively lo-fi aesthetics were a new concept to me.

I've posted thumbnails of my current mockups (as of July 13) below, but feel free to click through to the full GitHub issue if you'd like to see older or newer versions or offer critique. (Many thanks to Jan, Alessandro, Joshua, and Mike for helping me demystify the prototyping process.)

Login screen mockup Home screen mockup