Previously I wrote about how Apple’s and Clark’s 44-pixel rhythm had loopholes that could not be ignored. In this post I will write about a system that does work.
After realizing the problems with Apple’s harmony, I searched through books, applications and the internet for a solution. Tried some of them to find that it was not for me. The day I took matters to my own hand and started calculating was the day I also find another designer with the same solution.

You should be warned ahead, although the scale harmony I’m about to write is a solution to all your problems it is not that easy to work with. It requires immaculate designing, and a pre based layer in your software (photoshop illustrator) so that you don’t get lost in zooming in and out of your guidelines.


Nothing more, nothing less. 2 pixels would make you go crazy and 6 or 8 just doesn’t divide folks. 4 pixels as a basic unit and that’s it.


1- Both the width and the height of the iPhone and even iPad screen can be divided by 4.

2- Using 4 pixels as basic unit, we can construct horizontal and vertical grids with equal parts of 4, 8, 16 and 32-pixel intervals. Talk about flexible!


And now onto the more beauties of 4 pixel unit system!

From our previous case studies you remember how it was impossible to divide 44 pixels into current native elements. Such was the case of status bar which was 20 pixels in height. Now it can divide!

The height of but­tons can be bumped from 30 to 32 pix­els. The tab bar can drop a pixel to 48-pixels tall. The nav­i­ga­tion bar with prompt can be 72-pixels tall instead of 74. Grouped table cell height can remain at 44 pix­els. Dis­tances between sec­tion head­ers and table groups can be mul­ti­ples of 12!

With the ver­ti­cal and hor­i­zon­tal inter­vals being equal, square ele­ments can be eas­ily laid out. For exam­ple, pro­file pic­tures and icons. And they usu­ally come in stan­dard sizes that are mul­ti­ples of 4. Social net­works like Face­book and Twit­ter often use default 48 × 48 avatars. Com­puter icons like those on Win­dows and OS X had always come in 16 × 16, 24 × 24, 32 × 32, 48 × 48 and up to 256 × 256 and 512 × 512 sizes. All mul­ti­ples of 4. Icons in iOS can there­fore stick to stan­dards sizes and save devel­op­ers time and effort recre­at­ing their icons at odd sizes.

And now let’s view the prima vera of application design to show you the difference.

Above is the iPod playlist currently proportioned by Apple:


(Look close, I chose this page in particular because it’s really clustered)

And here is the 4 pixel unit system playlist re-designed. The iPod playlists screen con­tains cells that have two lines of text in them. To avoid using small text and clut­ter, the cell height was increased to 46 pix­els. Here the visual rhythm totally loses its integrity. How about we use 48-pixel cells instead of 44 or 46?


The playlists text shares the same left align­ment as the light grey but­tons. The increased space around the text also improves the read­abil­ity and scannabil­ity. The light grey but­tons and nav­i­ga­tion bar but­tons share the same height at 32 pix­els. The result is a much more visu­ally sta­ble layout, no?



You may notice that the 48-pixel rhythm had caused the grey text of the last playlist to be cut off. This is not a prob­lem because users rarely stare at a sta­tic screen from top to bot­tom. It’s eas­ier to fix­ate a small area than the whole screen thus the usual behav­ior is that users would scroll the screen and move infor­ma­tion from the bot­tom to the the upper regions of the screen where their eyes are fix­ated. There­fore it is more impor­tant to improve scannabil­ity even at a slight expense of infor­ma­tion density!

On my next post I will give further examples from the applications that I am currently working on and from Literary Jukebox.

Leave a Reply