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.
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 the 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!
- Added special stencil with Android icons for easier style and feel creation.
- 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.
- Note, this is just prototyping! The prototype will not be the same as the final UI screen.
Roadmap
xx/xx/xxxx. Version 2.0. Android XML layout/form generation.
26/03/2010. Version 1.4: Included stencil for business charts prototyping. Visual
experience is based on aiCharts library graphics. Added Widgets stencils: landscape and
portrait orientation. Different widget size support: 1x1, 2x2, 3x3, 4x1, 4x4.
02/07/2009. Version 1.3: Updated controls list according to latest Android Cupcake release. Added: tray icon elements,
5 different soft keyboards. Improved double click behavior of several elements.
28/05/2009. Version 1.2: Updated controls list according to latest Android Cupcake release. Also applied many small
fixes.
Added controls: Virtual Keyboard, horizontal scroll frame, wizard buttons, disabled check box;
17/10/2008. Version 1.1: more controls and samples added; Added new stencil - Android GUI Icons. Now you can use for
prototyping Icons from Android SDK. That gives more style and feel of Android.
Additional supported 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, Volume Control.
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, Dial-up controls,
Dialog window, Date picker dialog.
