Drawing Mockups with Adobe Ideas – Free 22 x 22px Grid Paper for iPad

What better tool to do iPad application mockups than using the iPad itself? Drawing out mockups using the PC/Mac always seemed awkward to me as I have to second guess the physical dimensions of each UI elements that I have drawn on-screen due to the different pixel densities between our monitor and the iPad.

With free drawing tools like Adobe Ideas on the iPad, I could draw out the UI elements and know exactly how large it’d look physically. The only problem is that… you start with a completely blank screen. Knowing the best practice of having UI elements with 44 x 44px height, a grid background would certainly be helpful in sketching things out.

I have created a set of three PNGs having a 22 x 22px grid that you can import as a photo background in Adobe Ideas:

Update [2017/4/7] - Have lost the file during the migration process. So the download file is not available 😞

The zip file has four files: one plain grid, two grids overlaid with the navigation and tab bars as well as the original GIMP source file which I had used to make the grids.

To use them, import the three images in iPhoto and sync your iPad in iTunes. They should now be available to be imported in Adobe Ideas.

Here’s one mockup that I had created using the grid image.

All grid images, including the source GIMP file, is public domain and can be used and distributed freely without restriction.

BONUS: Great tip from David Macy, Adobe

Find your images being rotated in the wrong orientation when you bring up your mockup? Or that you accidentally zoomed your mockups?

Have no fear! Double-tap on the Move Tool (the tool with 4 arrowheads) to reset the canvas to its original size and position.