Dmitry Dragilev of Zurb contacted me recently to pass along news of two new stencils, one each for the iPhone and iPad. Zurb also includes an OmniGraffle file they refer to as SketchSheets, which may come in handy for layout and tinkering with icon designs. They’ve also included a pdf file if you’d like to print out a SketchSheet and do some doodling by hand.

iPhone Stencil

iPad Stencil

Download Zurb OmniGraggle Stencils

iPhone Stencil / iPad Stencil

Just short of one year ago, I wrote about Omni-Graffle stencils to help create wireframes of iPhone applications. You can read more on the original post here: OmniGraffle iPhone Stencil.

Omni-Graffle and iPhone Stencils

The combination of OmniGraffle and custom iPhone stencils will save you oodles of time when designing and tinkering with iPhone user interface elements. These stencils are also extremely helpful to help nail down the UI when working with clients to help ensure everyone is on the same page before you dive into coding.

I just bumped into a new stencil created by Theresa Neil of Designing Web Interfaces, which includes some great stuff, including some artwork specifically for 3G phones. Here is a glimpse of the stencil:

Download iPhone 3G Stencil

You can download the stencil from GraffleTopia: iPhone 3G Stencil

Here is what I came up with:

1
2
3
4
5
6
7
8

NSString *family, *font;
for (family in [UIFont familyNames])
{
  debug(@"\nFamily: %@", family);
 
  for (font in [UIFont fontNamesForFamilyName:family])
    debug(@"\tFont: %@\n", font);
}

Pretty basic stuff. The code for the debug output looks as follows:

#define debug(format, ...) CFShow([NSString stringWithFormat:format, ## __VA_ARGS__]);

You can read more about the debug macro here).

The output looks as follows (for version 2.1 of the iPhone):

Family: Hiragino Kaku Gothic ProN W3
	 Font: HiraKakuProN-W3
 
Family: Courier
	 Font: Courier
	 Font: Courier-BoldOblique
	 Font: Courier-Oblique
	 Font: Courier-Bold
 
Family: Arial
	 Font: ArialMT
	 Font: Arial-BoldMT
	 Font: Arial-BoldItalicMT
	 Font: Arial-ItalicMT
 
Family: STHeiti TC
	 Font: STHeitiTC-Light
	 Font: STHeitiTC-Medium
 
Family: AppleGothic
	 Font: AppleGothic
 
Family: Courier New
	 Font: CourierNewPS-BoldMT
	 Font: CourierNewPS-ItalicMT
	 Font: CourierNewPS-BoldItalicMT
	 Font: CourierNewPSMT
 
Family: Zapfino
	 Font: Zapfino
 
Family: Hiragino Kaku Gothic ProN W6
	 Font: HiraKakuProN-W6
 
Family: Arial Unicode MS
	 Font: ArialUnicodeMS
 
Family: STHeiti SC
	 Font: STHeitiSC-Medium
	 Font: STHeitiSC-Light
 
Family: American Typewriter
	 Font: AmericanTypewriter
	 Font: AmericanTypewriter-Bold
 
Family: Helvetica
	 Font: Helvetica-Oblique
	 Font: Helvetica-BoldOblique
	 Font: Helvetica
	 Font: Helvetica-Bold
 
Family: Marker Felt
	 Font: MarkerFelt-Thin
 
Family: Helvetica Neue
	 Font: HelveticaNeue
	 Font: HelveticaNeue-Bold
 
Family: DB LCD Temp
	 Font: DBLCDTempBlack
 
Family: Verdana
	 Font: Verdana-Bold
	 Font: Verdana-BoldItalic
	 Font: Verdana
	 Font: Verdana-Italic
 
Family: Times New Roman
	 Font: TimesNewRomanPSMT
	 Font: TimesNewRomanPS-BoldMT
	 Font: TimesNewRomanPS-BoldItalicMT
	 Font: TimesNewRomanPS-ItalicMT
 
Family: Georgia
	 Font: Georgia-Bold
	 Font: Georgia
	 Font: Georgia-BoldItalic
	 Font: Georgia-Italic
 
Family: STHeiti J
	 Font: STHeitiJ-Medium
	 Font: STHeitiJ-Light
 
Family: Arial Rounded MT Bold
	 Font: ArialRoundedMTBold
 
Family: Trebuchet MS
	 Font: TrebuchetMS-Italic
	 Font: TrebuchetMS
	 Font: Trebuchet-BoldItalic
	 Font: TrebuchetMS-Bold
 
Family: STHeiti K
	 Font: STHeitiK-Medium
	 Font: STHeitiK-Light

I’m in the midst of creating a set of wireframes for a client for an upcoming iPhone application. I started with Photoshop, however, I’ve always found OmniGraffle to be a very simple and intuitive application to use and figured I owed it to myself to give this tool a spin as well.

Stencil Option #1
I went on a search for a stencil (OmniGraffle speak for template) that focused specifically on iPhone application design. One of the first hits was a stencil created by Theresaneil, the stencil is located here. This is a nice, no thrills stencil for quick mock up of applications.

As I looked a little further I ran into two additional stencils:

Stencil Option #2
Patrick Crowley (creator of Graffletopia) created the stencil below:

Stencil Option #3
Yahoo also has a stencil for OmniGraffle:

Once I’ve had a chance to try these out, I’ll report back…

If you’ve spent any amount of time scrambling to create a prototype, you’ll greatly appreciate how much tools such as this can help. The screenshot below gives you an idea of how the assets look in Photoshop.

Here is a link to another PSD from 320480, which was the catalyst for Geoff and his team in creating their own tool.