ddubb industries

Hip to be Square

April 19th, 2009 creative, technical

When Facebook rolled out their latest redesign a few months ago, I was simultaneously pleased and upset with the round avatar treatment, but couldn’t explain why. My right brain said “Kudos fb, so smooth, fillet the blue sky!” While my left brain said, “width: 49px; margin: 9px; carry the 7; error;”

As I’ve thought about it more, with both sides of my brain, I’m formulating a theory: In the context of bulleted lists, especially where the avatar is being used as a giant bullet, alignment is crucial. Our eyes need to verify that everything lines up, because if it doesn’t, that probably means something like a nested reply. In the x dimension, we need to confirm that the bullets are directly on top of each other. And in the y, the top of the bullet needs to be in line with the top of the text—the closer to a fixed interval the more pleasing the rhythm.

Corners make this quick check easier, fillets make this harder. Corners deliver a fixed point of comparison, fillets demand us to make two tangents.

When Twitter surpasses Facebook as the next social medium, I’ll attribute it to this seemingly insignificant design decision.