iOS app Design Guide

Introduce fundamental iOS and UI design concepts.

Retina
Exact doubling of the previous resolution. i.e 326 ppi

Pixels
A pixel (px) is the smallest unit of measurement on a screen 

Points
We use points (pt) as a resolution independent measure.
Each point can be made of many pixels and so there is room for extra detail.

Device               Retina?    Point Resolution (pt)     Pixel Resolution (px)
iPhone < 3GS                             320 x 480              320 x 480
iPhone 4, 4S                y                 320 x 480                  640 x 960
iPhone 5                  y             320 x 568                     640 x 1136
iPad 1, 2 & Mini                             768 x 1024              768 x 1024
iPad 3, 4                  y                 768 x 1024              1536 x 2048


Laying it Out
When you begin the layout process for each screen it's often best to forget about "decoration". Instead focus on the core structure of the UI. To put it simply, where things will be on the screen. This is the step between your initial sketches and the final product. Here you'll do a lower fidelity version, one which you won't invest too much detail in so that you can reorganise without much time wasted.

Hierarchy
Hierarchy performs two important tasks: it provides a way for users to reason about navigation within your app and allows them to determine what effects a button will create.

UI Templates
It's often useful to quickly compose app mockups using existing wireframing tools and templates. An existing iOS template gives you the advantage of the native user interface feel without much time investment on detail.

Target Size
Choosing the size and placement of your touch targets (buttons, sliders, switches etc) is often a balance between subtlety and usability. Because of the innaccuracies of fingers touch points within your app should be around finger size, which Apple designates as 44pt x 44pt. If you'd like your touch targets to appear small, you can often designate a larger touch area than the visual appearance.

Target Positioning
You've probably experienced accidental taps when browsing the internet, something that rarely happens with a mouse. To stop this sort of behaviour avoid putting small touch targets close together, especially if they perform very different actions (for example "flag as inappropriate" sitting next to "like"). In a similar vein, placing related actions very far apart can be as annoying. As before, balance is important.


Portrait vs Landscape
When approaching the portrait and landscape layout problem many designers choose to forego one and stick to a single screen size. While this is indeed a good way to cut down on work, it doesn't take into account different users requirements. Perhaps you lock your app down to just portrait, but a user comes along that finds it difficult to type in portrait mode. Or you lock it into just landscape and then people try to use it with only a single hand. Orientation flexibility is a core feature of the platform and people expect it to work.


iPad vs iPhone
iPads and iPhones are very different devices. Depending on the sort of app you are designing users may expect a universal solution, only iPad, only iPhone or even two seperate apps. While many of the constraints are similar the larger iPad screen allows for more creative activites and longer periods of use. Whereas the iPhone portability means people want to see information at a glance and achieve tasks quickly, often while moving.


Interactions
A big part of designing for iOS is not just where things are on screen, but how those things behave when you interact with them. The high resolution, portable, touch based screen of an iOS device is a whole new sort of canvas that gives you the opportunity to explore rich interactivity. Every application is unique and at some level there will be room for novel concepts, making these useful and delightful will truly excite your users.

Typography
iOS is quite capable of support for custom font rendering, which is great news for type geeks. The default "System" font on iOS is (mostly) Helvetica Neue, but there is a wide range of built-in fonts available. Every iOS major update seems to add wider font support, so perhaps with iOS7 we'll see even more packaged internally.


Designing Icons
Typically Icon design is a seperate process to the User Interface design, as it is more of an illustration exercise. Albeit with lots of thought going into app branding, metaphors and style cohesion. In terms of style it's important to maintain consistency by balancing the established iOS style and the style of your app. Even "flat" icon designs tend to include some three dimensional aspect to create that visual link.

By default iOS treats app icons with rounded corners and a gradient shine. The standard way to supply your icons is as a rectangle with no transparency which iOS will then decorate. While Apple does not guarantee consistency with the rounding it is possible to find guides to how much rounding is applied so that you can appropriately design your icon. You are also able to disable the gradient shine by indicating your icon is "precomposed".


Description                           Retina Size (px)  Normal Size (px) Optional?
App Icon for iPhone                   114 x 114                   57 x 57                   no
App Icon for iPad                   144 x 144                   72 x 72                   no
App Icon for App Store           1024 x 1024                                    no
Spotlight Search Icon on iPhone     58 x 58                   29 x 29                   yes
Spotlight Search Icon on iPad   100 x 100                   50 x 50                   yes
Settings Icon on iPad                   58 x 58                   29 x 29                   yes


Exporting Resources
A very important and often neglected part of the design process is the provision of resources for development. It is best that the original designer (that's you) is the one who packages and outputs resources from the source design file, they are the one who understands the design best and so will be the best for "cutting it up". An accurate, complete, consistent and well documented set of resources significantly reduces the amount of back-and-forth needed with developers and you'll get end results much closer to your vision.

At a base level you'll need to provide a set of images in PNG format. Each image will represent an individual piece in your UI. For example you might have a generic-button.png and icons to be put on top of that button like add-note.png and hamburger.png. You'll also need to hand over things like fonts, font sizes, dimensions and colours.

Retina Resources (@2x)
For each image resource you export you'll be creating two images. One is the @1x resource and the other is the @2x (retina) resource. The retina resource must be exactly two times as large in each dimension as the normal resource. So a 44 x 88pt button will have a 88 x 176px retina resource. The retina version of your resources have the same name as the original, but you write @2x on the end. So for a button you're exporting you would create button.png and button@2x.png.

Slice Sheet
To prepare your user interface for exporting you should create a seperate canvas which will exclusively be for exporting. Rather than trying to chop up the design in place, pull it apart piece by piece and lay it out on a grid. You should make sure all similar resources have the same dimensions and are padded to the right size where appropriate. For example all your tab button icons should have the dimensions of the tab button (so you get to choose where on the button they appear). Consistency and predictability with resources helps developers avoid adding hacks to push resources around that are misaligned, which makes your design much easier to update.
One of the more important reasons for having a Slice Sheet is that it's very easy to update, tweak or correct resources. By having a single place where all outputs happen, where everything is named correctly and no layers need to be hidden or shown to correctly output the right elements you make your resources very easy to re-export. Re-exporting is likely to happen if certain icons aren't quite working or small parts of the aesthetic change. Keeping a Slice Sheet reduces the effort of exporting and allows you to make changes to your design up to the last moments of testing.

To make sure you haven't forgotten anything, here's a list of things you'll probably want your developer to have.

Fonts - 
Any fonts you used in your design in TTF format

Image Resources -
All the individual UI images @1x and @2x in PNG

Icons - 
All the icons (and retina versions) for your app in PNG

Splash Screens -
Appropriate Splash Screens for the devices you support

Storyboard -
A big diagram of screens showing how to get from place to place

Dimensions and Constraints - 
Diagrams explaining dimensions of UI elements and their layout constraints

Animation Details - 
Timings, videos, frames and diagrams explaining how animations and segues should work

Colours -
An exhaustive list of the colours used in the app as RGB or HSB, it'll help to name them

Resource Diagrams -
Diagrams explaining which bits of the UI are made up of which resources and what those resources are called

Font Labelling - 
Label all UI elements with the Typeface, Weight, Styling and Size


Further Reading 
http://taybenlor.com/2013/05/21/designing-for-ios.html