The 4 Pixel Rhythm – A simplified approach to designing everything

The 4 Pixel Rhythm - A simplified approach to designing everything

I was doing some client work last night which involved working with Facebook’s new Timeline design. I hadn’t really put a lot of thought into the pixel perfection of the design, but this project had me measuring. Come to find out that the big hero image at the top of the Timeline is 849px wide. Not 848, not 850, but 849px wide. In all honesty, there’s nothing wrong with this fact, but it does happen to go against the way I deign for the web, and this may be the fault of a developer, not of a designer. Though, if it isn’t designed to spec, then it’s the designers fault for not making the developer build it right.

Anyhow, since I started working at Disney nearly almost 10 months ago I’ve learned a whole lot of new tricks, though one in particular is something that I’ve begun to practice religiously. It’s called the 4 pixel rhythm, an idea created by Aen Tan which was meant as a solution to designing for iOS. You can read all about his idea in a post he wrote by clicking here. I was truly inspired by this article, and really started taking these ideas to heart.

At Disney we’re certainly trying to think tablet and mobile first, though you wouldn’t know it by looking at any of the current sites. Hold tight, we’ve got some amazing things coming. So the 4-pixel rhythm began as an experiment, to see if we did everything in multiples of 4 would the designs essentially make themselves? For the most part, the answer has been a resounding yes.

To start with, you have 3 main canvas widths when dealing with the web – 960 for desktop, 2048 for iPad, and 640 for iPhone. All are divisible by 4, so we’re on to something. Then you can begin breaking up your columns into 4 pixel widths, and you start seeing a pattern there as well. Once you begin to start putting in gutters and finessing spacing of objects, your choices become limited, which is what becomes interesting. You can make a space 8px or 12px or 16px or 20px or 24px… but your knows when something is too much or not enough, and by setting these limitations you begin to let the 4 pixel rhythm do the work for you.

Now when designing this way I tend not to worry about the height being in 4 pixel rhythms, as it can be difficult to judge the height of text or you end up having to use an oddly sized photo. That said, I’m sure it’s possible, and though I’m a fairly detail oriented (pixel nazi) designer, that’s just too much for me. I’d suggest trying it out and see if it works for you.

On a final note, the main content column here on The Fox Is Black is 576px, which just so happens to be divisible by 4. This also happens to be a complete and total accident. When I first designing the site 5 years ago I made it that width because it was 8 inches wide… yes, I was designing for web inches. Oh the things we learn…

March 22, 2012 / By