{Carrer web log} ←

iPhone Grid System

Tuesday, June 01, 2010 { 11 Comments }

Like a many developers and designers I was tempted to start building application for iPhone and for mobile devices in general. Beside the problem of choosing the programming language native Objective-C or Javascript + HTML5 was the problem of creating design environment for more easily pre application development and prototyping.

I’m a fan of the grid design. Grids can help you understand the design space better, and they usually bring order and the balance to the design process and there are great help in the prototyping stage.

I was inspired with the Massimo Vignelli’s Unigrid System and I wanted to the similar thing with the iPhone.

So the problem was how to organize the 480px X 320px iPhone working space.
I decided to build 12:8 (480:320) Modular Grid System with the unit of 40px and the gutter of 5px.

I think that 12:8 grid system is a right balance for the iPhone, 24:16 will be probably too much and 6:4 too little.

For the calculating the gutter I first divided 320/8 = 40 and than 40/8 = 5px. For the gutter there is no right and wrong size it all depends what the grid will hold and what you want to achieve with the grid. So please feel free to change the gutter size or not to use it.

I made three version of the grid the first the grid only the second the grid and the iPhone frame and the last version The Grid + iPhone Frame + Notes with bought .PNG and photoshop .PSD files.

The iPhone Grid



iPhone Grid + Frame



iPhone Grid + Frame + Notes




Download - all files Photoshop Template .PSD and .PNG

.PSD iPhone Template can be easily personalized, feel free to change anything.
I hope that this grid system can help you in your next iPhone application or site development. If you want to learn more about the Grid Design this site is great place to start The Grid System

Any comments?

P.S If you are fan of paper prototyping you one of my previous post useful Sketchbook for web designers

11 Responses to “iPhone Grid System”

1. //  Unknown // 6/01/2010

   Can you make a similar grid for iPad ?  

2. //  Vladimir // 6/02/2010

   @Luca:Maybe in some future I will try to make the grid system for the IPad. I'm working on one project who will cover the iPad design problems, I will gather some info and probably made the grid system for the iPad, so stay tuned :)  

3. //  Iphone App // 6/18/2010

   i need iphone....
   Thank you for the post...  

4. //  Digital product photography // 7/27/2010

   This design grid for the iphone is very accurate.Thanks for the nice sharing.  

5. //  Web Design Toronto // 12/20/2010

   Thanks for the grid system. I've downloaded it and loaded into my photoshop. I'm planning to create my first iPhone app, so this should come in handy and will help me scale icons and everything else.  

6. //  Anonymous // 5/27/2011

   This may be over a year late, but the PNG and PSD download links are backwards!  

7. //  Vladimir // 5/27/2011

   @Anonymous: Fixed! Thanks! Better late than never.  

8. //  PADI Instructor // 6/17/2011

   This post really helps out a lot for the people who wish to create applications for their iPhones. The grid system that is presented in your post gives them the idea on how to create an efficient app. This grid system is very important in creating rightly scaled icons or whatever in iPhones.  

9. //  Pat // 7/19/2011

   Hello.
   I made a Moleskine MSK using your iPhone template image. Thanks again! :)
   
   http://www.moleskine.com/mymoleskine/community/2011/07/iphone-template.php  

10. //  Vladimir // 7/19/2011

    @Pat: Nice work I like it :)  

11. //  Grout cleaner // 7/30/2011

    Using the grid system is very essential in rightly scaled icons in the iPhones.This post will help us in making applications in our iPhones. Thank you for sharing this information.  

Post a Comment

<< Home