Custom Stuff

Thoughts By 5 years ago

Designing for the iOS can be tricky at first. There are a lot of standards that most designers are unaware of, which can make even the best designs unreasonable when applied to an iOS device.

Often I see great designs for the iOS with custom sized standard components. Toolbars, tab bars, buttons, pickers, etc etc. There are standard sizes for these, sizes which should be stuck to. When you go messing with these you are going to cause problems with your app.

Apple has spent a lot of time determining the best sizes and ratios for everything on their devices. Apple hasn’t given the option to change the height of their core controls, and for a very good reason. These sizes stay consistent between all apps, both from Apple and developers. By changing your sizes around, your app will be the odd one out (and I don’t mean that in a good way). Starting to play around with these standards isn’t a good idea. Apple has a set of Human Interface Guidelines, which going against can get your app rejected from the App Store.

If you were to make one of these core components a custom size, there are about three main ways to make it work.

Because these core elements refuse their frame to be set to a custom size, transforms could be used, which let you customise the size of pretty much anything. Now don’t run out and try this, everything will be scaled and you will have an extremely weird looking stretched control.

Overriding private methods
Aside from getting rejected from the App Store, your application may become volatile. Private methods aren’t intended to be used by the public (hence their name), and can change at anytime without warning. Private methods are a good way to break things.

Rebuilding from scratch
Definitely the most time consuming… This is like reinventing the wheel, a wheel that probably, just by itself, had somebody working on flat out just to get it right.

On top of this, your custom control may affect other areas of your app, meaning more tweaks that originally expected…

As a reference guide, here’s the standard sizes for controls (x2 for retina display)

ComponentWidth (px)Height (px)
Status bar – 20
navigation bar
 –44 (32 landscape)
ButtonMinimum 44Minimum 44
Tab bar49
Icon (iPhone)5757
Icon (iPad)7272
Icon (AppStore)10241024