iOS grid


Those who have stepped into the world of application design either did it blindly or with the guide of Josh Clark. Any designer that studied application design in terms of user interface and grid lay-out know these words by heart;

“The 44-pixel block is, in many ways, the basic unit of mea­sure­ment for the iPhone inter­face, estab­lish­ing the visual rhythm of many iPhone apps. That met­ric is sig­nif­i­cant as the rec­om­mended min­i­mum size to make a tap tar­get (like a but­ton or list item) eas­ily and reli­ably tappable.”

The quote above is from Josh Clark’s book Tapworthy, an authoritative book on iPhone UI design. And his words were confirmed by Apple in their Mobile HIG ( Human Interface Guidelines) as they did recommend 44 x 44 pixels as the most comfortable minimum size for tappable UI elements. Many app, if not all, you see today work with the 44-pixel rhythm which I will further explain in this post. And everyone seems satisfied. Yet a few is skeptic, and I am one of them.

Since I have started designing iPhone apps, I have always looked for information on how to properly and best work the user interface. First you read the Apple’s guideline, think of it as primary schooling in application design. You have to first learn how the screen in front of you works. How it was divided, what is the dimensions and scales the provider itself uses. And then you COPY.

Think of it as the first days of school and they are tell you this is a notebook and here is the pen it lets you draw on the notebook, and what are going to draw? Well, the alphabet! And you copy all the letters until which is a long time after by the way, you realize you don’t need to draw on the notebook, nor do you need to draw with a pen and what is this alphabet they are talking about…

The very same way, after Apple’s guidelines, you learn what is what and make meaning of them. And you’re ready for further research. Since the internet is very giving most don’t need further research. You can find already made photoshop and vector files and practically change the color and places of two buttons and voila you have an application. And there are thousands of applications like this believe me.

Then you read Tapworthy and it is like a revelation.  But it doesn’t change the system. It takes it as perfect and plays inside it. The grid, the scale everything is the same. And frankly after a while you realize it was the false epiphany.

Why? Here is why,

Apple’s inten­tion of using 44-pixel rhythm is clearly to denote a fixed ver­ti­cal inter­val equiv­a­lent to a base­line grid – a very com­mon tech­nique in print design. The pur­pose of a base­line grid is to pro­vide a mas­ter back­bone for text to adhere to. and everything takes root from there. It is usu­ally equal to the lead­ing of the main body text and the lead­ing for other text e.g. head­ings and block quotes are usu­ally derived from mul­ti­ples of the base­line grid. This gives the text lay­out a sta­ble visual com­po­si­tion. The prob­lem with 44 pix­els is that it hardly qual­i­fies as a valid rhythm.

Don’t believe me? Let’s examine the 44-pixel rhythm closer.


For exam­ple in an inter­face made up of grouped tables, the rhythm is fur­ther sub­di­vided into four inter­vals of 11 pix­els each. This pro­vides the spac­ing between sec­tion head­ers and between table groups. We can thus say the iPhone screen lay­out fol­lows a major rhythm of 44 pix­els and a minor rhythm of 11 pix­els. This rhythm pair forms the basis of the visual composition.


The avail­able size of a iPhone screen is width 320 × height 460 pix­els at por­trait ori­en­ta­tion after exclud­ing the sta­tus bar, or points if we are talk­ing about the Retina dis­play. If you divide 460 by 44 you get a remain­der of 20. Divide by 11 and you get a remain­der of 9. 460 can­not be divided into equal parts of 11 nor 44. The ver­ti­cal rhythm is corrupt.

This is how 44-pixel rhythm works:


Is it not a poorly constructed baseline grid? It makes you do lots of compromises without even realizing.




The sta­tus bar on both iPhone and iPad is 20 pix­els tall which means it also does not fit into the ”ver­ti­cal rhythm of 44-pixels”. As you all know, tap­ping on the sta­tus bar scrolls the screen back to the top. Pulling down on it reveals the noti­fi­ca­tion cen­ter in iOS 5. It’s a really small tap area though and most of us ‘accidentally’ does it. On one hand it is clever, because using almost no pixel space we are programmed to to use by scrolling our fingers from out of the screen towards inside thus activating. Hypocrite, yet perhaps great intelligence behind it. Apple says the minimum is 44 yet makes us make use of 20 pixels…Yet it still doesn’t work with me.



Buttons on the navigation bar, toolbars and table cells are 29 pixels tall and by now you know that doesn’t fit with the 44-pixel rhythm as well. A major mistake is usually done here in between programming and designing. How?Apple may make their buttons 29 pixels in height but their tappable area is always 44 pixels ratio. Yet when people copy from the internet and paste the buttons to their designs and then send the design to programming, usually the programmer slices the area to 30-35 pixels most for the tappable area and that is left to their judgement and if you’re lucky. If you are not so lucky with your programmer you’re left with a 29 pixel tappable area which results in bad and poor application whose buttons are always problematic.

In this case study I have to note that usually buttons without border work so much better as their tappable area is invisible and wider thus allowing a better user interface.



Tab bar is among the main attires of the application design. It consists of icons stacked  above text labels which need to be accommodated with additional height. 49 pixels of black tab, talk about ugly. No wonder applications like Twitter has abandoned the native tab bar long ago even before they became twitter. In 49 pixels height this main artery also does not fit with the 44 pixel rhythm.



When the prompt option is turned on in a navigation bar in iPhone, the bar becomes 74 pixels tall. And guess what? Yet again it does not fit with the 44-pixel rhythm!

So you see folks, apple may tell you to go with 44 pixel design scale rhythm but they lay out and the visual integrity barely holds itself together.

In the next part I will be talking about a solution to work in harmonious proportions that application design needs very much so.