Blog

Category
  • iPhone Grid

    Before you just go download it, let me explain the thinking behind the grid.

    The iPhone resolutions so far are:

    640 ✕ 960   &   640 ✕ 1136

    If you want to sub-divide those into the largest possible squares you need to find the highest common divisor. On the iPhone 4 that is 32px, on the iPhone 5 it's 16px.

    The iOS grid uses 16px divisions, sometimes subdivided into 2. Gutters don't apply to UI design as UI by nature is too dynamic to add such constraints. You'd find yourself having to break the grid all the time to properly lay your elements in a logical manner.

    8, 16 or 32 pixels apart?

    As a rule of thumb, based on the Principles of Grouping (law of proximity), elements that are related should be no more than 16px from each other and elements that are not related should be at least 32px from each other.

    Apple sometimes uses an 8px grid with widgets that are divisible by 8px instead of 16px, and by having elements spaced out in 8px increments (8, 24, 40, 48, etc). I find this unnecessary for the most part and prefer to stick to multiples of 16.

    If you must break the grid, or just want to be a rebel, do at least stick to spaces no smaller than 8px and to multiples of 8px. For the sake of this grid file I created a 16px grid as an 8px distance is the exception, not the norm.

    Margins

    There are 2 vertical margins on iOS, outer 16px (for title bar navigation such as back button, etc) and inner 32px (for content).

    Horizontally the status bar is 32px and the margin follows 32px beyond that. At the bottom the nav bar icon labels are aligned 8px from the bottom, which is why I put a smaller margin.

    image

    How to use the file?

    I recommend is that you place the PSD into your document as a Linked Smart Object (File > Place Linked). At have it as the top layer of your document. Set it to Locked, set blending mode to Multiply, and then toggle visibility on and off and change opacity as needed.

    image

    Another thing I recommend doing, which in a way makes this PSD kind of pointless, is to set your Photoshop grid to 32px with 2 subdivisions, this allows for easy snapping of objects to that grid.

    image

    Make sure you then set Grid visibility on by going to View > Show > Grid or pressing ⌘ ' to toggle (' is the key next to the return key on a US Mac keyboard).

    Grid Toggles

    I found it useful to toggle between 32px and 16 px grids as well as horizontal vs vertical grids. So when you place the file as a Linked Smart Object, in the Property Panel, with the grid layer selected, you will see these toggles:

    image

    Ok, so without further ado... here's the PSD.

    And here it is applied to Apple Mail app

    image