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 MicrosoftВ® 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 (MicrosoftВ® 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.
