Wireframe Sketcher & Android

From a project management perspective it is a good practice to have UI Mockups designed before the real implementation starts. With the UI Mockups having ready, you can discuss with the customer if that is going to satisfy the real needs, and you can also discuss inside your development team, if the UI implementation is feasible or not. If you can settle those things before the implementation, you can save huge amount of refactoring, that usually starts with statements like "This takes too much space on screen, can we have it on a separate screen?", which may also have a large impact on the application architecture. This lesson is also valid for the world of Android development, where the Wireframe Sketcher with its Android stencil set is a perfect tool for fast and informative UI Mockup drawing.

Wireframe Sketcher is an Eclipse plugin, which allows you to have also the UI drawing tool integrated right into your development environment. A new perspective called "Sketching" is introduced in Eclipse, which you can use while you are drawing your UI Mockups. A special panel called "Palette" is opened opened up, which contains the default set of stencils that you can use on your screens. The new plugin supports two file types, the screen and the story. As the name suggests, the former can be used to contain the screens themselves, while the latter can be used to build up screen sequences forming a linear representation of screens following each other.

But let us examine the screen drawing first in detail. As we already mentioned, the Palette lists all general purpose stencils that can be dropped on the screen. The stencils are divided into 5 categories, which include Containers, Input, Text, Layout and Annotations. The general purpose means, this stencil set contains all commonly used UI elements, that are available on almost all UI environments. This also means, that they have a pretty plain look, so they can fit all UI concepts regardless of the OS or other target environment. However, the display properties of the stencils can be easily customized, so it is also easy to build up UI specific to different systems. Those properties include font type, color and background color, font size and alignment in general, but it is also common to have a handy set of other properties with which you can control the special attributes of the different stencils. For example you can define the selected tab on a Tab Container, or you can also control the position of the scrollbars.

Besides the standard stencils, there are some other special purpose stencils available for download, like the stencil set for Android. It includes almost all the basic UI elements of Android, or if you do not find one, you can of course pick from the standard set. The Android stencils are mainly grouped stencils, with which you can ungroup to break down and modify the settings of each.

When placed on the sketching area, it is really easy to work with the stencils. List formats are automatically converted into special formats, for example tabs can be simply defined with a comma separated list, where each element in the list will be converted into a separate tab. Besides that, aligning the stencils to each other is also like a dream with the automatically displayed guidelines, which show up when you reach the same vertical or horizontal line as any other component on the screen.

When the time comes to publish your stories or screens, you can either make a full screen presentation right from Eclipse, or you can export them to PDFs, and share the files in the way you want.

Besides all the great features of the Wireframe Sketcher tool, there is still room for improvements. For example it is not yet possible to put the Android specific stencils into the "Palette" area, you can only open the Android stencil set as a screen object, and copy&paste the stencil you want to use. On one hand however this does not really affect the usability of the tool too much, and on the other hand the developer of the tool has promised, that this will be a new feature in the next release. An other feature I missed was the advanced story handling, because in a story you can only have one linear sequence of screens. For the first try I wanted to make a tree of screens, that branches at specific screen elements, like buttons or tabs. Maybe this will also be available in the future.

To sum up things, Wireframe Sketcher is really an amazing tool, which you can use super easy to build Android specific User Interfaces without leaving your development environment, and publish them either as a presentation on screen or as PDF files.