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.
THE 4 PIXEL RHYTM UNIT
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.
Why?
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 buttons can be bumped from 30 to 32 pixels. The tab bar can drop a pixel to 48-pixels tall. The navigation bar with prompt can be 72-pixels tall instead of 74. Grouped table cell height can remain at 44 pixels. Distances between section headers and table groups can be multiples of 12!
With the vertical and horizontal intervals being equal, square elements can be easily laid out. For example, profile pictures and icons. And they usually come in standard sizes that are multiples of 4. Social networks like Facebook and Twitter often use default 48 × 48 avatars. Computer icons like those on Windows 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 multiples of 4. Icons in iOS can therefore stick to standards sizes and save developers time and effort recreating 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 contains cells that have two lines of text in them. To avoid using small text and clutter, the cell height was increased to 46 pixels. 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 alignment as the light grey buttons. The increased space around the text also improves the readability and scannability. The light grey buttons and navigation bar buttons share the same height at 32 pixels. The result is a much more visually stable layout, no?
HERE IS THE COMPARISON ONCE AGAIN
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 problem because users rarely stare at a static screen from top to bottom. It’s easier to fixate a small area than the whole screen thus the usual behavior is that users would scroll the screen and move information from the bottom to the the upper regions of the screen where their eyes are fixated. Therefore it is more important to improve scannability even at a slight expense of information density!
On my next post I will give further examples from the applications that I am currently working on and from Literary Jukebox.