iPhone Design Stencils in the Pattern Library

By YUI TeamDecember 17, 2009

stonyInteraction designer and prototyper Chris Stone recently volunteered to adapt the iPhone stencils in our OmniGraffle based stencil kit in the Yahoo! Design Pattern Library and optimize them for use in Adobe InDesign. Chris is starting a new gig at Pulse Energy in Jan 2010 but these templates were created during his tenure as the lead UXD Nitobi Software in Vancouver.

Can you describe the stencils you contributed, why you made them, and what you personally use them for?

id_iphoneI created a customizable, vector-based iPhone stencil library for InDesign. They came about as a result of several conversations that ultimately culminated with the creation of this stencil. I co-lead the Vancouver chapter of the IxDA and one of the conversations that I’ve been interested in discussing with the group is “What is open source UX and is it possible?”. It’s a tricky topic to define, and the more I think about it, the more I am of the opinion that open sourcing tools is the first place to start, rather than focusing on definitions. I figure that the best thing you can do is to put tools in designers’ hands and let them create, so that’s exactly what I did. iphone-protoMeanwhile, while pondering the Open Source UX question I was working on an iPhone app for a client and really wanted to use the newly discovered "interactivity" features buried in the depths of an InDesign workspace in hopes of a new path to generating rapid, clickable prototypes. So, I nabbed the PDF that you posted and started building out the InDesign snippets with customizable gradients rather than repeating, or stretched screen captures that I've seen used. I wanted to provide every Interaction Designer/UX Designer out there that uses InDesign with an option to use their preferred application for creating iPhone app layouts and designs if necessary. You can find more details on this process in a blog post i have written called Lightweight Prototyping with InDesign.

Can you discuss how these differ from the Eightshapes adaptation of the Yahoo! stencil kit (since both are used in InDesign)? Basically, I wanted to customize the PDF that you had already provided using the same level of fidelity as in the Illustrator version. I realized that it was a compilation of repeating images, rather than complete, editable vectors. That said, I was making a move back to InDesign from OmniGraffle and saw it as an opportunity to create a higher-fidelity iPhone stencil for wireframing, prototyping, and quickly skinning an app to play with differences in look and feel, and to enable you to move that much further with InDesign. The 8Shapes stencil doesn't have the default gradients or some of the other interaction elements that I wanted to use in my wires (key/num pad, list select tumbler, etc.). That said, I didn't create icons to the same extent that they did. I basically mimicked what was in the existing Yahoo! stencil. I would love to add more to it eventually when I have time. I like having the option of removing the gradient if need be for basic wireframing yet have them readily available for quick mockups. I think they're a good complement to each other depending on your use case.

What else would you see in the pattern library? I'd love to see the Yahoo stencils in higher fidelity, much like the iPhone stencil, therefore on par with the OmniGraffle fidelity. A general library on gesture based patterns would also be quite useful.