Updating the iPhone 5 Grid; Download a PSD Template

Download For Free

A little more than two years ago, I released a grid design for the iPhone 4 that has now been used in nearly one hundred apps by designers from all over the world. It has been a great feeling to work on something that the design community actually enjoys and finds some use for.

A couple of weeks after I first created that grid, I went through Techstars Boulder with Mocavo (you can read about that here) and have been filling my days, nights and weekends working on an amazing product with one of the most impressive teams that I’ve ever met. Needless to say, I never got around to designing an effective grid for the iPhone 5.

After two years of Mocavo, it feels that we are on the straight and narrow and I have more time to spend with my friends and with graphic design projects for the community. I have been creating a list during these past two years of projects and designs that I would love to work on and I hope to start releasing some of them over the coming months.

Now the math on the iPhone 5 has been a bit different to work with than the iPhone 4. The 640 x 1136 px size is a bit more difficult to work with, but I think that is just fine in light of current iOS design trends—notably, the bottom navigation is largely gone from many popular apps in favor of a left sidebar. In this version of the PSD, I chopped the final row a little short in order to keep with the same math that works in the columns and from previous incarnations of the iPhone.

Fun note: even Steve Jobs’ math wasn’t perfect on the iPhone 5. He wanted to boast about a 4 inch display, but was only able to deliver a 3.9996 inch display. This sounds pedantic, I know, but it is interesting just how close the iPhone 5 screen is to a perfect 16 x 9 aspect ratio. If they wanted to create the perfect 4 inch display and have a perfect 16 x 9 aspect ratio, the screen would’ve needed a screen resolution of 1136 x 639.

Please enjoy the PSD (hosted by the good people at SimpleGoods) and feel free to share it with anyone and use it on personal or commercial projects.

Download For Free

If you liked this article, let me know. You can find me on twitter.

Emerson Stone is proud to be a Colorado-based company. When not designing, you can find Andy biking or skiing around Boulder and the local mountains.

If you'd like to use any code or design from this site, you can grab the project from Github—all free to use.

2615 13th St. Boulder, CO 80304