Effectively Using a Grid in iPhone App Design; Download a PSD Template
Update to Post: New iPhone 5 Grid Free PSD for Download
—
At this point, it feels like beating a dead horse when discussing the necessity and usefulness of a grid layout within a website’s creation. As designers, we have discovered, learned, and now effectively used a grid throughout most web apps or sites. But, despite the proliferation of well-designed apps for the iPhone and iPad, the use of the grid on mobile devices has somehow become lost in translation.
Steve Jobs’ shiny toys have become a staple for most designers, right next to their beaten-up Moleskin and a pair of Ray-Bans it seems. There is already a litany of beautifully designed apps (the sheer number of gallery websites for this just astounds me) and even the iPhone’s native elements are still quite useful in their own right. But, when going for the custom route on app design, beauty and organization can sometimes fall in to different categories. Typographic relationships are often haphazard, and screen real estate becomes harder and harder to divide up.
About a year ago, I designed my first iPhone grid for use on personal design projects. I have continued to use it (if loosely) on every app project taken on and it continues to excel. While you will still be spending considerable time on the app’s art direction, the final layouts and “one pixel to the right” questions are minimized. The grid’s relationships were based around the same math that is used on 960.gs, and work beautifully for both native apps and HTML5 mobile apps.
While this does not try to be a set-in-stone layout tool, I do hope that it helps on your future projects. Also, after looking at the grid I have designed, look back at the relationships and layout of Apple’s native iPhone elements. They are very similar in many cases, and make a good showcase that Apple is in the same thought process.
Below, you can download a ZIP file containing two PSDs—one for retina display and one for the original iPhone. I have the various elements separated out in layers, so you can use any or all of the grid. Please use this on any of your projects, personal or commercial, and share freely. Also, if I get enough response for this download, I will be releasing the grid that I use on the iPad.
—
Update to Post: New iPhone 5 Grid Free PSD for Download
If you liked this article, let me know. You can find me on twitter.