iPhone Grid System

Tuesday, June 01, 2010 { 11 Comments }

Responses to “iPhone Grid System”

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..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