iPad Stencil by Design Commission

Posted: May 3rd, 2010 | Author: suzanne | Filed under: sketching | Comments Off

The fine folks over at Design Commission have created an iPad stencil (they have an iPhone one too, which I bought last year.)  Ordering mine today!

You can buy one here: http://www.uistencils.com/products/ipad-stencil-kit

1100895


iPad UI Templates

Posted: May 2nd, 2010 | Author: suzanne | Filed under: ipad, sketching | 1 Comment »

If you’re looking for a quick way to sketch some iPad concepts, you may want to download one of the iPad UI templates listed below.  As I mentioned in a previous post about iPhone apps, I generally start with paper before moving onto one of these options–you’ll have to decide what works best for your situation.  Notable user interface elements in these templates include the device background (landscape & portrait), split views, keyboards, edit menus, and popovers.  More details on these UI elements are available in the iPad Human Interface Guidelines.

Balsamiq: http://mockupstogo.net/tag/ipad

Omnigraffle: http://www.graffletopia.com/search/ipad

Photoshop: http://www.teehanlax.com/blog/2010/02/01/ipad-gui-psd/

Illustrator: http://iconlibrary.iconshock.com/icons/ipad-vector-gui-elements-tabs-buttons-menus-icons/

I’m sure there are plenty of other templates but these should help you get started.  Have fun!


Handy App Sketchbook

Posted: September 11th, 2009 | Author: suzanne | Filed under: sketching | 1 Comment »

Just received my App Sketchbook from the folks at appsketchbook.com. Nice quality paper (60# Lynx White) with plenty of room for annotations. Plan to use my 0.5 Pentel pencil and a variety of Signo uni-balls from Japan.

From their site:

  • Three actual-size iPhone® templates per page
  • Pixel (20px) ruler and title bar markings
  • Ruled section for app development notes
  • Sketch 600 Screens (100 double-sided pages)

App Sketchbook


iPhone app Sketching Tools

Posted: June 8th, 2009 | Author: suzanne | Filed under: sketching | Tags: , , , , , | 2 Comments »

I’ve been experimenting with a variety of tools & templates for creating iPhone app designs. Balsamiq is clearly the most “sketchy” and well-suited to the concept phase.  The templates for Omnigraffle, Fireworks, and Illustrator will create higher fidelity sketches.  The tool you choose will depend on a number of factors: the type of application, the level of customization needed, and of course, your preference.  Template links & example sketches shown below.

(Update: An IXDA peer asked, “Why not pencil?”  I *always* start with pencil or pen, but I eventually move into some type of electronic format since it’s easier to share with remote teams.  In response, another peer sent me this link to this neat iPhone stencil.  Also found this iPhone sketch paper.)

Balsamiq

The web- and desktop-based versions both support iPhone templates and have a wide range of widgets and icons.  They recently added the ability to “link” mockups, enabling you to add basic interactivity.  I linked my sketches and created a quick video showing how users could interact with the UI–super easy & fast! The link below summarizes Balsamiq’s iPhone specific features.

http://www.balsamiq.com/blog/2009/03/01/iphone-controls-new-icons-and-much-more/

balsamiq_test

Omnigraffle

Graffletopia has a variety of iPhone templates but my favorite is the “Ultimate iPhone Stencil.”  The collection has excellent coverage, plus text can be edited and buttons resized.  You can also link your Omnigraffle sketches to add basic interactivity.

http://www.graffletopia.com/search/iphone

omni_test

Fireworks

Blog*spark put together a toolkit for creating iPhone mockups in Fireworks.  Aside from the phone background, all elements have been redrawn as vectors for easy editing.   Linking supported by Fireworks (TBD what happens with Catalyst!)

http://blog.metaspark.com/2009/02/fireworks-toolkit-for-creating-iphone-ui-mockups/

fireworks-test

Illustrator & Photoshop

Mercury Intermedia also created vector based templates.  Haven’t tried these out but their site visitors seem to like them!  They linked to teehan+lax for Photoshop templates.
http://www.mercuryintermedia.com/blog/index.php/2009/03/iphone-ui-vector-elements/
http://www.teehanlax.com/blog/?p=447