UPDATED 10-23-2012: PDF now includes second iPad Mini dimensions.

I’ve been wanting to get some iPad versions of the Printable CEO tools out there, but this requires a bit of design rethinking. For one thing, touch interfaces require a minimum button size, and that affects all the proportions of the layout.

Ordinarily, I would do this kind of interface thinking on a computer screen using one of the Adobe Creative Suite programs:

• Flash – Easy design and placement of graphics elements, interactivity and animation features built-in for prototyping.
• Illustrator – Strong drawing support, ok text layout, vector-based for clean output at any resolution.https://davidseah.com/blog/2012/06/wireframe-template-for-ipad-screen-design/
• InDesign – Strong and fast text layout for wordy layouts.
• Photoshop – My least favorite, but it works at the pixel level. I hear CS6 fixes a lot of the stupid UI bugs that have crept in over the years.

Each of them has their pros and cons, but all of them lack the essential size and scale experience, which is important for a touch device. That’s something you need to hold in your hand to feel. I hunted around the Internet for an existing iPad template I could print out, but didn’t find one I liked. I also didn’t think they captured the feel of the frame.

So I made one. The frame is a thick outline, which I think is better than being solid-filled to keep from distracting your eye too much when looking at your sketch at a distance.

Usage

In the sketch phase, I start with a blank sheet to do some thinking. Then, I created the layout in Illustrator, placing the PDF template in a locked layer and drawing elements on top of it. After that, I printed it out so I could “hand-simulate” it and see how I felt about it, writing notes directly on the design.

When it is time to make production graphics, I will import the AI file into Photoshop at the appropriate resolution and hand-tweak the layout so it is pixel-perfect.

The template has a dot-grid that is spaced at 44/132 inches, which is Apple’s minimum UI element size recommendation (look under “hit target”). I’ve assumed that the “point” size is 132ppi, based on the original iPad’s screen resolution and the documentation’s use of the iPad as an example. Verify through testing, I say…the number is somewhat arbitrary, I believe.

There are also areas marked off for the status bar on all sides, and I’ve also included 1/2, 1/3, and 1/4 screen division marks to help apportion the screen aesthetically. The advantage of designing this way is that you get a more intuitive sense of the element dimensions with your finger and stylus, and it’s easy to imagine the interactivity. Translating back to pixel dimensions is easy with a ruler and a bit of math.

Download

TO USE: Print it out on a high-resolution (600DPI minimum) monochrome printer. Make sure that the printer dialog specifies 100% (no “scaling to fit” option enabled) to get as close to the real iPad size as possible.

» DOWNLOAD PDF

Enjoy!