These days, we’re doing more mobile design at Beacon 16, and our usual suite of design shapes, stencils, and templates weren’t cutting it.

Despite regular aspersions cast from the rest of the design community, I still like to use Visio for my early wireframes and mockups — Visio is fast, interactively accurate, and accessible to the non-designers with whom I collaborate. (Visio 2010 is especially slick.)

Absent a great Visio iPhone stencil to download, I’ve decided to create one.

(Compare the mockup to the screen it’s describing.)

While these shapes are individually pretty rudimentary (no interactive SmartShapes in this version), the collection should be relatively comprehensive. And while the stencil can’t lay out every design possible with an iPhone, it provides a foundation that should make it much faster for getting ideas out of your brain and onto paper, leaving you to customize only the truly interesting UI components.

The following shapes are included in Version 1. (Please leave suggestions for improvements or additions in the comments.)

• iPhone
• Navigation bar
• Buttons: Blue, back, gray, light blue, Round Rectangle
• Search bar
• Browser bar
• List Group label
• List icons: detail, more, move, delete
• List item
• Grouped list items
• Group label
• Tab Bar: 4- and 5-tab configurations
• Various list item text shapes
• Segmented control
• Keyboard
• Action Sheet (with accompanying buttons)
• Alert (with or without title)
• Slider
• Toggle On/Off
• Date picker
• Image placeholder

Download Visio iPhone Design Shapes, Version 1
(Uploaded 7 September 2010)

Visio iPhone Design Stencil by Jonathan Abbett is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.