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…

5 Comments The 4 Pixel Rhythm – A simplified approach to designing everything

  1. Hector Muñoz March 22, 2012 at 9:38 AM

    Great insight. I am mostly a print designer but I like to read an think about topics like this.

    When I was fresh out of school I used to measure everything and adjust everything to make sure it was either in golden ratio proportion, or following a Fibonacci scale or maybe a modular grid.

    Now I have become a bit more lazy but the other day I measured a couple of logo proposals I made and was surprised to find out both were almost perfectly golden ratio proportioned.

    I guess once you practice it enough It becomes a part of you.

  2. Jack March 23, 2012 at 4:40 AM

    This is all really interesting … but isn’t 4 pixels a small amount to base a rhythym on? You can have something that fits to the rhythm and yet have loads of similar bits that are actually marginally different all over the place.

    When it’s based on the leading of body text the base unit tends to be bigger, and I think that the larger the base unit the stronger the sense of design unity, right?

    It’s no great shock that your arbitrary 576px width is divisible by 4 – 25% of numbers are…

  3. Arturo March 23, 2012 at 11:34 AM

    Web inches! That reminds me of a time when a client broke out a ruler and measured something on my screen. I was zoomed in 150%.

  4. fathima March 23, 2012 at 1:08 PM

    Thanks for sharing this insight, I love discovering new ways of thinking. Once you explain it seems to make a lot of sense.
    Might take a bit of effort to get me out of doing things in nice round numbers, but it sounds like it’s worth a try.

Leave A Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>