The Difference of a Few Pixels at Facebook

1 wVbXLamvms92BPrapEBigw

Comments refinements on Facebook before (L) and after (R).

Vitor shared an article with me recently about how FB did a ton of testing and research to arrive at their latest design iteration. It’s pretty amazing how dozens of small refinements working together can make a huge difference.

Small changes, like a few extra pixels of padding or the tint of a button, can have large and unexpected repercussions.

On a side note, it looks like Facebook has integrated a ton of design cues from Instagram—rounded corners, chat-like comment bubbles, outlined icons, and overall a lighter interface.

Inspired by Facebook

I’m currently working on a comments feature as well on my project and I’m going to borrow some design cues from our friends at FB.

New

Revised version of comments, following a similar style as FB

I think that the icon shape, bubbles, and avatar sizes creates a better visual hierarchy. I’m pretty sure I’m going to change it again in the future, but this looks like a nice improvement. Anyway, we have some good stuff coming soon. Really looking forward to shipping this new design.

Evolving the Facebook News Feed to Serve You Better
Hat tip: Vitor