Android GUI Prototyping

Introduction

In the world of application development many may found that earlier prototyping can help a lot. "Show your ideas at the beginning and be sure that you will get proper feedback from the customer, collect it and build great software" this is a simple rule that helps a lot in my day-to-day activities. I know several kinds of the prototypes but the most difficult is always a GUI.

What the customer expects? How to place various elements on screen? What is required and what is optional? How to organize dialogs? How to show customer the GUI without implementing it? We try to solve today all that questions in our public effort - Android GUI Prototyping Stencil for Visio.

User interface become more sophisticated and tolerant at the same time to the user input but it does not make life easier to the developer. We are code warriors, we not always design skilled persons, however we know how to recognize professional work among others.

Our stencil is a good professional help for everyone who want to develop something innovative on Google Android Platform. By using it for making own applications professional and user friendly. By using it you help customers to understand what they will get at the end of the development at the initial stage of the project. Be sure their feedback will save your time significantly.

Screenshots

Android Original	Stencil Prototype

Terms of use

• Please, specify in all documents produced with help of our stencil reference to us; it can be a simple phrase, like: "UI was designed with help of ArtfulBits Android GUI Prototyping Stencil" somewhere in the document or simple reference in about box of the final application. Thanks.

• If you have a fix or have suggestion that will help all of us, please don't hesitate to send a note to our android team. We will be happy to update stencil ASAP :)

Installation and Usage

• Using of this stencil require Microsoft Visio 2003 or higher;

• Download the stencil archive from our web site;

• Unpack the archive and place files from it into folder on your choice;

• Start Visio and select required type of diagram (Windows XP User Interface is preferable);

• File --> Shapes --> Open stencil…

• Select previously downloaded stencil in the dialog for open. Press OK.

• You are now ready for GUI prototyping!

Usage notes

• Instead of images/icons for the buttons we use Wingdings font symbols. We found them fitting very nice for prototyping. Also, we will appreciate any help in finding more fonts like Wingdings for community. Send us a message with the link to the font and we will update this page with it!

• To edit complex controls, like: image buttons, context menus, tab controls use double click;

• Looks like Calibri is a default font for Android UI, but Arial & Arial Narrow fonts also make weather on several screens;

• Frames sizes are in inches, but they are accurate - we use DPI metric for transforming inches to pixels;

• We intentionally don't want to make elements 100% the same as Android has. Two reasons:

• Do not allow to produce fake screens for community - our prototypes must be recognizable between others;

• This is prototyping!!! The prototye will not be the same as the final UI screen;

Roadmap

Version 1.2: in 2 weeks - estimation: 27/10/2008; more controls will be added, fixes to the found issues during those 2 weeks; increased usability; will make style and feel more accurate;

Version 1.1: in few days – estimation: 17/10/2008; more controls and sample will be added;

Controls: List view, progress bar, auto complete, checked text view, digital clock, date picker, chronometer, grid view, map view, Media controller, multi auto complete, rating bar, scroll view, seek bar, time picker, Two line List items, Web view, zoom controls.

13/10/2008: Version 1.0: initial set of controls and element for Android GUI design. Into archive attached sample Visio document with several default screens from Android phone.

Supported controls: 4 different resolutions and orientation frames, application header, battery status & 3G tools, white & black background, labels, checkbox, radio button, button, image button, ON/OFF toggle button, Pickers (Month, Date, Year), star button, editor box, password editor box, directory mark, analog clock, phone editor, tab control, combo box, Image gallery, context menu with black & white themes, calculator pad with black & white themes, Dialup controls, Dialog window, Date picker dialog.