{Carrer web log}


Blog about web design & development

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 System

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. // Blogger Unknown // 6/01/2010

    Can you make a similar grid for iPad ?  

  2. // Blogger 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. // Anonymous Iphone App // 6/18/2010

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

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

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

  5. // Anonymous 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 Anonymous // 5/27/2011

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

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

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

  8. // Anonymous 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. // Blogger 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. // Blogger Vladimir // 7/19/2011

    @Pat: Nice work I like it :)  

  11. // Anonymous 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

RSS IconTwitter icon Twitter icon Twitter icon

About Me <<<

Name: Vladimir Carrer
vladocar [at] gmail.com
Location: Verona, Italy
I'm a web designer, developer, teacher, speaker, generally web addicted ...

My projects <<<

§§Previous Posts <<<

Hand Drawn Icons
 

Other Profiles <<<

View Vladimir Carrer's profile on LinkedIn

Content is licensed under a Creative Commons Public Domain License