Drawing an Android mockup with Inkscape and GIMP

First stop on my journey into mobile app development is creating a basic graphical user interface (GUI) for the MP3 player app. The GUI needs neither to be useful nor slick, not even functional. The only requirement is, that it must execute on a real phone. That should give some insights into GUI construction with the Android SDK.

Programming a user interface is not very complicated, especially if the GUI is mostly static and uses stock controls. Visual GUI construction tools, like the one that comes with the Android SDK, enable designers to layout the user interface without having to write a single line of code and leave it to the programmer to bring their vision to life. In fact an adept designer can rearrange the layout right before the eyes of the customers to meet their requirements—If he is proficient with the tool!
For a beginner these tools are still to complicated. In fact, even designers might shun them for the very same reason and confine themselves to all-purpose graphical tools like Adobe Photoshop or specialized tools for mockup design.

The mockup the designer draws might look identical to the actual application the user sees, but they are in fact structured quiet differently. The designer stacks various shapes, bitmaps and chunks of text on a grid. And though he arranges these elements in relation to one another, the relation remains implicit in the design. Each element is fixed in position and size. And while the same can be done when implementing a user interface, it is deprecated by many platforms. The reason is that unlike the real program a GUI mockup needs not be functional, adapt to different display proportions or resolutions, and need not accommodate variable data, like text of varying length. It must never execute on a computer. They merely aid negotiating an appropriate screen layout with the various stakeholders. It is okay that they are only an illusion.
In a computer program the relation of the user interface elements need be represented explicitly. This makes using visual GUI construction kits different from graphical software, and more complicated.

Since I have never programmed a user interface on the Android platform, nor did know whether there are (free) GUI construction tools (there are!), I decided to draw a mockup of the MP3 player app first. The main view of the player ought to look something like this:

Mockup for a MP3 player app.

I never prototyped an user interface before, that is why it took me a while to draw the mockup. With hindsight it was not a very clever, productive, or even sensible idea to go for a photo-realistic mockup.
Nonetheless it was educating in many ways. Below you will read about the tools used to draw this mockup.

In my last posting I wrote about tools for drawing mockups, and you might ask yourself «why did he not use one of them instead of going for GIMP and Inkscape?» The simple reason is, that I created the mockup before I tested these tools. And still I would prefer those two over a specialized application because they are standard open source tools and widely available.

GIMP—The GNU Image Manipulation Program

In my first attempt to mock up the MP3 player interface I chose GIMP because I would work mainly with bitmaps. Look at the figure above. It consist of the Android status bar and the application name next to the little robot icon. They are just a portion of a screenshot I took from the Android emulator. To get them I merely created a new Eclipse project on my Fedora desktop named «Music Player». The compact disc is derived from a photo on Wikipedia. The player buttons are part of the official mockup templates provided by Google. The rest—text labels and gradients—can be made with three clicks in GIMP. The smartphone frame never made it into the GIMP mockup, because I ditched GIMP when I was approximately this far:

Not all works as well as bitmap manipulation in GIMP.

The crux with GIMP is rearrangement. GIMP describes images as a set of layers, each layer drawing something on top of the others. Graphical operations, e.g. strokes of a brush, manipulate a layer but are not individual entities that can be changed later. That means, anything you plan to move or change in the future must be in a separate layer. But layers cannot be grouped or easily rearranged (except their stacking). Playfully shifting the interface elements around is out of the question with GIMP. You have to know in advance where every element has its place. Go into a team meeting with a GIMP mockup and be prepared to sweat: «Would it not look better if we swapped the text labels with media controls? Would you please, John?»

Gimp is at its best when preparing the individual bitmap templates of your mockup, e.g. the buttons and images. It is less suited for arranging them into a mockup. And it is a disaster if you need to rearrange things. The freshly released version 2.8 might mend some of these pains.

Inkscape to the rescue

Inkscape is a very powerful open source vector graphic suite. It can do all the things needed to draw a perfect mockup, and much more. The last is not necessarily a blessing. Not without reason are the specialized mockup drawing applications nothing but radically simplified vector drawing suites plus a library of ready-made user interface elements.
That sets the agenda: which are the essential layout functions needed and how are they invoked, and how to compensate for the missing template libraries?

The essential functions for mockup drawing are: placing, moving and re-sizing bitmap or vector objects, plus  stacking, grouping, and arranging them in relation to one another. Placing image objects is pretty obviously done via the menu entry «File > Import…». Next to it is an option to directly import from the Open Clip Art Library. Moving and re-sizing is done by dragging the the object or the arrow handles on its edge with the mouse. Position and size can also be changed by entering coordinates or measures in the top toolbar, which is great for pixel-precise working. Stacking is realized either with layers (from the «Layer» menu) or raising and lowering  individual objects (from the «Object» menu). Multiple object can be selected by holding the SHIFT-key and then be grouped (CTRL-G). Inkscape has powerful alignment functions. The alignment panel can be shown by pressing «SHIFT-CTRL-A». It contains a selection box for controlling to which reference object the objects shall be aligned. Unfortunately the current release 0.48 of Inkscape offers no smart alignment feature similar to all the specialized mockup applications, i.e. it will not generate guide lines to neighboring objects when you drag an object around. Fixed, page-wide guide lines are also a bit hidden. To create them, click on either ruler and drag a new guide line into position.
You will many find excellent tutorials for Inkscape on the internet.

Only a fraction of the many functions Inkscape offers are needed for drawing a  GUI mockup.

The easiest way to imitate the template libraries of a mockup software is to collect all the interface elements you repeatedly need in a separate document. Then copy and paste the desired elements into your active drawing.
There are a few collections of ready-made interface elements on the internet. In fact, Google provides a complete set of controls, icons, color tables, and fonts for Android 4 GUI prototyping. It even contains phone and a tablet outlines. Unfortunately the stencils and are available only in proprietary formats, or as a rather badly composed PNG-bitmap. At least it is possible for Inkscape to import the icon collection, which is in Adobe Illustrator format, but all the icons will be stacked in one spot. It would be nice to have SVG graphics instead. Olof Brickarp converted some of the core icons to SVG. They are nice but do not exactly match the Android Holo look. For prototyping, this hardly matters.

Conclusion

Free and open source all-purpose graphic processing software is well suited for drawing GUI mockups. The lack of free, ready-made, scalable template collections is a big barrier, though. The designer has to either content himself with bitmap graphics, which might be okay unless print publication is required, or hunt and collect the internet, or to draw the templates himself. The last option is not too hard to archive as long as no photo-realistic look is desired.