You are viewing an old revision of this post, from January 17, 2013 @ 22:33:56. See below for differences between this version and the current revision.

iOS Design Specs

Many times our designers and coders will mix up the correct sizes of iOS designs for our apps. This is a natural occurrence as the app industry changes and sometimes communication is misinterpreted. Well... here is an iOS design sheet to get a quick glance of all the sizes and resolutions for all Apple devices.

iOS Design Specs

Resolutions

Devices Portrait Landscape
iPhone 5 640x1136 px 1136x640 px
iPhone 4/4S 640x960 px 960x640 px
iPhone & iPod Touch 1st, 2nd and 3rd Generation 320x480 px 480x320 px
Retina iPad iPad 3, iPad 4 1536x2048 px 2048x1536 px
iPad Mini 768x1024 px 1024x768 px
iPad 1st and 2nd Generation 768x1024 px 1024x768 px

Displays

Devices PPI Color Mode Color Temperature
iPhone 5 326 8bit RGB Warm
iPhone 4/4S 326 8bit RGB Cool
iPhone & iPod Touch 1st, 2nd and 3rd Generation 163 8bit RGB Warm
Retina iPad iPad 3, iPad 4 264 8bit RGB Warm
iPad Mini 163 8bit RGB Unknown
iPad 1st and 2nd Generation 132 8bit RGB Warm

Icons

Devices App Icon Pixels Radius Appstore Icon Pixels Radius Spotlight Icon Pixels Radius Document Pixels Tab Bar Pixels
iPhone 5 114x114 20px 1024x1024 180px 58x58 10px 44x58 60x60
iPhone 4/4S 114x114 20px 1024x1024 180px 58x58 10px 44x58 60x60
iPhone & iPod Touch 1st, 2nd and 3rd Generation 57x57 10px 512x512 90px 29x29 5px 22x29 30x30
Retina iPad iPad 3, iPad 4 144x144 24px 1024x1024 180px 100x100 20px 128x128 60x60
iPad Mini 72x72 12px 512x512 90px 50x50 9px 64x64 30x30
iPad 1st and 2nd Generation 72x72 12px 512x512 90px 50x50 9px 64x64 30x30

Commonly used design elements

Devices Height of Status Bar Height of Nav Bar Height of Tab Bar Width of Tables
iPhone 5 40px 88px 98px 604px / 1100px
iPhone 4/4S 40px 88px 98px 604px / 924px
iPhone & iPod Touch 1st, 2nd and 3rd Generation 20px 44px 49px 302px / 462px
Retina iPad iPad 3, iPad 4 40px 88px 98px dynamic
iPad Mini 20px 44px 49px dynamic
iPad 1st and 2nd Generation 20px 44px 49px dynamic

Revisions

Revision Differences

January 17, 2013 @ 22:33:56Current Revision
Title
iOS Design Specs  Complete iOS Design Specifications
Content
Many times our designers and coders will mix up the correct sizes of iOS designs for our apps. This is a natural occurrence as the app industry changes and sometimes communication is misinterpreted. Well... here is an iOS design sheet to get a quick glance of all the sizes and resolutions for all Apple devices. Many times our designers and coders will mix up the correct sizes of iOS designs for our apps. This is a natural occurrence as the app industry changes and sometimes communication is misinterpreted. Well... here is an iOS design sheet to get a quick glance of all the sizes and resolutions for all Apple devices.
Resolutions content goes here.
Displays content goes here.
Icons content goes here.
Common Elements content goes here.
[/tabs]
 
   
<h2 class="TableHeading" >Resolutions</h2> <h2 class="TableHeading" >Resolutions</h2>
<table class="responsivetable"> <table class="responsivetable">
<thead> <thead>
<tr> <tr>
<th>Devices</th> <th>Devices</th>
<th>Portrait</th> <th>Portrait</th>
<th>Landscape</th> <th>Landscape</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td class="Device iPhone5">iPhone 5</td> <td class="Device iPhone5">iPhone 5</td>
<td>640x1136 px</td> <td>640x1136 px</td>
<td>1136x640 px</td> <td>1136x640 px</td>
</tr> </tr>
<tr> <tr>
<td class="Device iPhone4">iPhone 4/4S</td> <td class="Device iPhone4">iPhone 4/4S</td>
<td>640x960 px</td> <td>640x960 px</td>
<td>960x640 px</td> <td>960x640 px</td>
</tr> </tr>
<tr> <tr>
<td class="Device iPhone3 Subliner">iPhone &amp; iPod Touch <td class="Device iPhone3 Subliner">iPhone &amp; iPod Touch
<span>1st, 2nd and 3rd Generation</span></td> <span>1st, 2nd and 3rd Generation</span></td>
<td>320x480 px</td> <td>320x480 px</td>
<td>480x320 px</td> <td>480x320 px</td>
</tr> </tr>
<tr> <tr>
<td class="Device iPad Subliner">Retina iPad <td class="Device iPad Subliner">Retina iPad
<span>iPad 3, iPad 4</span></td> <span>iPad 3, iPad 4</span></td>
<td>1536x2048 px</td> <td>1536x2048 px</td>
<td>2048x1536 px</td> <td>2048x1536 px</td>
</tr> </tr>
<tr> <tr>
<td class="Device iPad">iPad Mini</td> <td class="Device iPad">iPad Mini</td>
<td>768x1024 px</td> <td>768x1024 px</td>
<td>1024x768 px</td> <td>1024x768 px</td>
</tr> </tr>
<tr> <tr>
<td class="Device iPad Subliner">iPad <td class="Device iPad Subliner">iPad
<span>1st and 2nd Generation</span></td> <span>1st and 2nd Generation</span></td>
<td>768x1024 px</td> <td>768x1024 px</td>
<td>1024x768 px</td> <td>1024x768 px</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
  
  <h2 class="TableHeading" >Displays</h2>
  <table class="responsivetable">
  <thead>
  <tr>
  <th>Devices</th>
  <th>PPI</th>
  <th>Color Mode</th>
  <th>Color Temperature</th>
  </tr>
  </thead>
  <tbody>
  <tr>
  <td class="Device iPhone5">iPhone 5</td>
  <td>326</td>
  <td>8bit RGB</td>
  <td>Warm</td>
  </tr>
  <tr>
  <td class="Device iPhone4">iPhone 4/4S</td>
  <td>326</td>
  <td>8bit RGB</td>
  <td>Cool</td>
  </tr>
  <tr>
  <td class="Device iPhone3 Subliner">iPhone &amp; iPod Touch
  <span>1st, 2nd and 3rd Generation</span></td>
  <td>163</td>
  <td>8bit RGB</td>
  <td>Warm</td>
  </tr>
  <tr>
  <td class="Device iPad Subliner">Retina iPad
  <span>iPad 3, iPad 4</span></td>
  <td>264</td>
  <td>8bit RGB</td>
  <td>Warm</td>
  </tr>
  <tr>
  <td class="Device iPad">iPad Mini</td>
  <td>163</td>
  <td>8bit RGB</td>
  <td>Unknown</td>
  </tr>
  <tr>
  <td class="Device iPad Subliner">iPad
  <span>1st and 2nd Generation</span></td>
  <td>132</td>
  <td>8bit RGB</td>
  <td>Warm</td>
  </tr>
  </tbody>
  </table>
  
  <h2 class="TableHeading">Icons</h2>
  <table class="responsivetable">
  <thead>
  <tr>
  <th>Devices</th>
  <th class="TheadDouble">App Icon
  <span>
  <span>Pixels</span>
  <span>Radius</span>
  </span></th>
  <th class="TheadDouble">Appstore Icon
  <span>
  <span>Pixels</span>
  <span>Radius</span>
  </span></th>
  <th class="TheadDouble">Spotlight Icon
  <span>
  <span>Pixels</span>
  <span>Radius</span>
  </span></th>
  <th class="TheadDouble">Document
  <span>
  <span>Pixels</span>
  </span></th>
  <th class="TheadDouble">Tab Bar
  <span>
  <span>Pixels</span>
  </span></th>
  </tr>
  </thead>
  <tbody>
  <tr>
  <td class="Device iPhone5">iPhone 5</td>
  <td class="Splitted" ><span>114x114 20</span><span> px</span></td>
  <td class="Splitted" ><span>1024x1024 </span> <span>180px</span></td>
  <td class="Splitted" ><span>58x58 < /span><span> 10px</span></td>
  <td class="Splitted" ><span>44x58</span></td>
  <td class="Splitted" ><span>60x60</span></td>
  </tr>
  <tr>
  <td class="Device iPhone4">iPhone 4/4S</td>
  <td class="Splitted" ><span>114x114 < /span><span> 20px</span></td>
  <td class="Splitted" ><span>1024x1024 </span> <span>180px</span></td>
  <td class="Splitted" ><span>58x58 < /span><span> 10px</span></td>
  <td class="Splitted" ><span>44x58</span></td>
  <td class="Splitted" ><span>60x60</span></td>
  </tr>
  <tr>
  <td class="Device iPhone3 Subliner">iPhone &amp; iPod Touch
  <span>1st, 2nd and 3rd Generation</span></td>
  <td class="Splitted" ><span>57x57 < /span><span> 10px</span></td>
  <td class="Splitted" ><span>512x512 < /span><span> 90px</span></td>
  <td class="Splitted" ><span>29x29 < /span><span> 5px</span></td>
  <td class="Splitted" ><span>22x29</span></td>
  <td class="Splitted" ><span>30x30</span></td>
  </tr>
  <tr>
  <td class="Device iPad Subliner">Retina iPad
  <span>iPad 3, iPad 4</span></td>
  <td class="Splitted" ><span>144x144 < /span><span> 24px</span></td>
  <td class="Splitted" ><span>1024x1024 </span> <span>180px</span></td>
  <td class="Splitted" ><span>100x100 < /span><span> 20px</span></td>
  <td class="Splitted" ><span>128x128</span></td>
  <td class="Splitted" ><span>60x60</span></td>
  </tr>
  <tr>
  <td class="Device iPad">iPad Mini</td>
  <td class="Splitted" ><span>72x72 < /span><span> 12px</span></td>
  <td class="Splitted" ><span>512x512 < /span><span> 90px</span></td>
  <td class="Splitted" ><span>50x50 < /span><span> 9px</span></td>
  <td class="Splitted" ><span>64x64</span></td>
  <td class="Splitted" ><span>30x30</span></td>
  </tr>
  <tr>
  <td class="Device iPad Subliner">iPad
  <span>1st and 2nd Generation</span></td>
  <td class="Splitted" ><span>72x72 < /span><span> 12px</span></td>
  <td class="Splitted" ><span>512x512 < /span><span> 90px</span></td>
  <td class="Splitted" ><span>50x50 < /span><span> 9px</span></td>
  <td class="Splitted" ><span>64x64</span></td>
  <td class="Splitted" ><span>30x30</span></td>
  </tr>
  </tbody>
  </table>
  
  <h2 class="TableHeading">Commonly used design elements</h2>
  <table class="responsivetable">
  <thead>
  <tr>
  <th>Devices</th>
  <th>Height of Status Bar</th>
  <th>Height of Nav Bar</th>
  <th>Height of Tab Bar</th>
  <th>Width of Tables</th>
  </tr>
  </thead>
  <tbody>
  <tr>
  <td class="Device iPhone5">iPhone 5</td>
  <td>40px</td>
  <td>88px</td>
  <td>98px</td>
  <td>604px / 1100px</td>
  </tr>
  <tr>
  <td class="Device iPhone4">iPhone 4/4S</td>
  <td>40px</td>
  <td>88px</td>
  <td>98px</td>
  <td>604px / 924px</td>
  </tr>
  <tr>
  <td class="Device iPhone3 Subliner">iPhone &amp; iPod Touch
  <span>1st, 2nd and 3rd Generation</span></td>
  <td>20px</td>
  <td>44px</td>
  <td>49px</td>
  <td>302px / 462px</td>
  </tr>
  <tr>
  <td class="Device iPad Subliner">Retina iPad
  <span>iPad 3, iPad 4</span></td>
  <td>40px</td>
  <td>88px</td>
  <td>98px</td>
  <td>dynamic</td>
  </tr>
  <tr>
  <td class="Device iPad">iPad Mini</td>
  <td>20px</td>
  <td>44px</td>
  <td>49px</td>
  <td>dynamic</td>
  </tr>
  <tr>
  <td class="Device iPad Subliner">iPad
  <span>1st and 2nd Generation</span></td>
  <td>20px</td>
  <td>44px</td>
  <td>49px</td>
  <td>dynamic</td>
  </tr>
  </tbody>
  </table>
  

Note: Spaces may be added to comparison text to allow better line wrapping.

Tags: ,

Comments are closed.