Skip to Content
2013.10.21

Pixels don't matter.

They don’t.

Talking about mo­bile de­sign to­day, the con­ver­sa­tion is couched in terms of pixel per­fect”, or de­signs are made by pixel push­ers”. This is­n’t a use­ful way to ap­proach lay­out de­sign.

In the ana­log world we talk about the three fun­da­men­tal com­po­nents of print.

Pigment, Matrix, Substrate

I know what you’re think­ing right now; Wait, we’re not ana­log here.” We’re dig­i­tal. We need pix­els. And that’s true, we do need pix­els. Let’s re­frame these prin­ci­ples:

Aesthetic, Conceptual, Material

Thinking about our sub­strate, our ma­te­ri­als are our de­vices, which ren­der with pix­els.

But our ma­te­ri­als change -

Aesthetic, Conceptual, Material

Our de­vices get more and more pixel den­sity, their pro­por­tions change, tech­nol­ogy im­proves, CSS ab­stracts a pixel’ of its own, Android ex­ists, and all of a sud­den our ma­te­ri­als get away from us and fo­cus­ing on the pixel gives us an aneurysm.

But don’t worry, be­cause:

Pixels Don't Matter

We still have two other lay­ers to work through.

Pixels Don't Matter
Our ma­te­ri­als don’t dic­tate our aes­thet­ics nor or con­cept, but ma­te­ri­als do in­form our de­ci­sions. So think about pix­els, but put them in the proper place - as the sub­strate of our work.

Measurement sys­tems are ab­stract ideas -

measure
An inch is not a thing, a foot is not a thing. The pixel is a ph­sy­i­cal thing, and as a phys­i­cal thing we’ve seen that it’s prone to change.

The pixel is a ter­ri­ble way to mea­sure things.

pixel
So use an­other sys­tem to mea­sure, any other sys­tem. The ra­tios, the pro­por­tions, the re­la­tion­ships and the hi­er­ar­chies are im­por­tant. That’s where we do our work as de­sign­ers.

So don’t stress pix­els. Spare them a thought when you get started, and know that at some point in the process they’ll make them­selves ap­par­ent, and will need to be ad­dressed. But the pix­els will let you know, and when you need to deal with them they’ll be there.

Show Time

These are some comps for the MapAttack mo­bile app.

Mapattack Comps

Every el­e­ment is spec­i­fied by ex­act pixel counts. The type­faces are de­fined, the mar­gins, the padding, and the bor­der strokes are each pre­cisely de­ter­mined and la­beled. Don’t get the wrong idea - this is­n’t my hypocrisy you’re see­ing. These de­signs did­n’t start life here, this is just where they ended up.

Before hand­ing off my de­sign, I ba­si­cally ran pre-press on it. Our de­vel­op­ers do need pix­els - they need these val­ues. They need them for ex­e­cu­tion and pro­duc­tion. So we, as their de­sign­ers, need to give them pix­els. But we also need to give them more than just that.

Mapattack Comps Closeup

We need to give them the blue­prints for how we think about the de­sign. That means show­ing what’s pro­por­tional as pro­por­tion, show­ing what’s fluid as fluid. This gives our sta­tic comps the life they need to work for a huge range of de­vices.

Love the Pixel, let it be a Pixel.

Letting Pixels be beau­ti­ful, blocky, phys­i­cal lit­tle things means us­ing them to ren­der our de­signs, not dic­tate them. It means us­ing ac­tual mea­sure­ment sys­tems to mea­sure. And more im­por­tantly, it gives us a way to un­der­stand our lay­out bet­ter, to ar­rive at more con­sid­ered de­signs, and to un­der­stand our de­signs as they live on ac­tual hard­ware in the ac­tual world.