Facebook Visual Identity

http://officeofbenbarry.com/see/facebook-visual-identity

by yuvals • 11 years ago

283 48 11 years ago

robszumski2• 11 years ago

I really appreciated the spectrum[0] from informal internal usage of the brand all the way to the hardcore, "on message" usage in the actual product.

Unless you're on the design team for a large company, it's easy to forget that other people use assets differently and you can't just copy and paste something from a hackathon poster into something that appears on the marketing website.

The thought that goes into changes like this is deep and complex. It's also not glamorous nor does it get prioritized often. Great write up.

[0] http://officeofbenbarry.com/images/portfolio/1200/benbarry-0...

bigtones• 11 years ago

But if you look at the old wordmark and the new not yet implemented wordmark side by side, you can barely tell the difference between the two after careful scrutiny - and that is looking at both side by side blown up to big proportions.

In real life no one will notice the difference. And the favicon is now flat without a bevel. That would have taken about 10 minutes.

Seems like a lot of work for nothing in the wordmark change.

x0054• 11 years ago

A lot of these changes are very small, but they are meant to work on a subconscious level. A good example for me is fixed width font. When programming, I find some fonts to be pleasant to work with, and other unpleasant. It's not a extreme reaction, just some font's "feel" better.

jpatokal• 11 years ago

"What do you mean it took you a week to fix that bug? I checked the commit log, and all you did was change a < into a >. That should not have taken you more than 10 seconds."

qq66• 11 years ago

I am not a visual designer and I can immediately differentiate between the word marks. I can't say that one is "better" than the other, but certainly consistency within a brand is a worthy objective. If they mismatched the lettering, I definitely wouldn't actively notice it, but a very small improvement summed over a billion users does make an impact.

callil• 11 years ago

It's akin to refactoring code for designers. You do it so that there is more clarity and consistency in a visual system that is complex.

In addition to helping implement the brand in the short term across teams and products, a redesign like this also gives the brand a clear foundation on which to grow and evolve, instead of being fragmented.

A huge part of being a designer in a large company comes down to figuring out how to design systems. The impact of adjusting 4px probably did occur in 10 min in a design program. But the conversations and thought that went into the overall system took far far longer and required a huge amount of knowledge of how systems like this are used and implemented.

mchristen3• 11 years ago

Would be nice if that site didn't hijack keyboard shortcuts for 'Back' and prevent you from leaving the site.

sfeng• 11 years ago

Which keyboard shortcut?

mchristen3• 11 years ago

In Chrome, Alt - Left Arrow.

Everlag2• 11 years ago

They hijacked left and right arrows for switching articles, a change which the majority of users would likely agree is a 'good change'.

mchristen3• 11 years ago

Every other site that I've come across that uses a carousel seems to handle not messing with my browser keyboard shortcuts just fine.

Alt + Left-Arrow is not the same key press as 'left and right arrows'.

geofft2• 11 years ago

It's completely undiscoverable, and also easy to hit by accident.

I'm not sure what the value is, either, since you don't know in advance what article you're switching to.

amyjess• 11 years ago

I have a number of tics (if any of them were vocal, it would be enough for a Tourette's diagnosis), including that I mash the left and right arrows very frequently.

That made reading this article very difficult. It's an accessibility problem.

colept• 11 years ago

It also hijacks the mouse buttons for back/forward and was submitted one hour earlier than this article as well:

https://news.ycombinator.com/item?id=9541057

91bananas• 11 years ago

What shortcut are you speaking of? Backspace works, as does cmd + [ on a Mac, AND the swipe back gesture works.

jlarocco4• 11 years ago

Do minuscule changes like these actually have any impact with users? To be honest, I was struggling to notice any difference in many, if not most of the before/after screenshots. I just can't see a typical user appreciating the change, or even noticing.

There's clearly a lot of difference between all the icons, but even then they're all clearly Facebook. I would almost expect the arbitrary icon changes to confuse users more than the consistent style would benefit them.

robszumski2• 11 years ago

My biggest takeaway is not the small visual tweaks to the typeface, but the thought that goes into how each team or sector of the company needs to consume and produce downstream assets based on this redesign work.

The guidelines/communication about this change is the main outcome of this work. For example, the discussion on the flexibility for various radii, reversibility and styling to match a platform's style means that downstream designers or developers don't have any ambiguity on how to adapt the favicon to their needs. Flexibility and freedom to customize are first-class, not afterthoughts.

kak9• 11 years ago

At FB scale, a very small percentage change in user engagement/behavior/etc is very meaningful.

So guessing it does--but wouldn't necessarily extrapolate it to what small startups should do.

justinph• 11 years ago

Yes. They telegraph consistency, reliability, and deeper thought. The clear relationship that the type and all the icons have to each other looks planned and substantial. Typically, these are qualities that brands want to convey.

jlarocco4• 11 years ago

I'm not so sure. Are there studies or anything?

Facebook got pretty big and they're just now doing this, and mainly because one guy is spearheading it. I have a hard time believing Facebook's user base or revenue would be any different if they consistently used a certain sans-serif font.

moeamaya• 11 years ago

Even if you ignore the improvement in overall brand consistency, as a general workflow it’s a huge win. It’s basically a design framework for a large team, no different than React is a UI library for manipulating the DOM.

But as others have suggested, there’s a subtext to a UI that is not immediately logic based, and this is where a coalesced design sensibility has a strong impact. Visual affinity is constructed through a base need, and there are billions of background calculations happening to resolve this before your conscious kicks in. Saying that each change is minuscule is a first level pass at something that while useful is ignoring the full depth to the mental model of comprehension.

ianstormtaylor• 11 years ago

Instead of assuming that the changes that many, many visual designers advocate for are arbitrary and worthless, try assuming the opposite, and then finding comparisons that might explain how these kinds of changes could be valuable.

Is it valuable for programmers to discuss and refactor code to maintain a consistent casing pattern?

Is it valuable for writers to edit books to make sure they use consistent language throughout?

Is it valuable for industrial designers to iterate on the amount of tactile feedback a dial gives?

Is it valuable for musicians to continue to tweak their guitar until they get it to just the right tone for a song?

If none of those ring a bell, keep looking until you find a craft that you feel you have a strong control of, and then find the equivalent comparison. I guarantee one exists for every craft.

It's very easy for people unfamiliar with a craft to belittle refinement as useless, but only because they have an underdeveloped sense of the impact of the craft on how users/readers/listeners make decisions.

pestaa• 11 years ago

Excellent comment.

As I understand it, they mostly did this for themselves. A change of one pixel doesn't concern any user, but it communicates the pride you take in your work.

macca3212• 11 years ago

Insert the word 'miniscule' into those sentences as per OP and you may get different answers. :)

arthurcolle• 11 years ago

Anyone have any other good design blogs like this?

Really great process overall, really enjoyed this post. Thank you for posting.

atarian• 11 years ago

Couple I know off the top of my head, will update if I think of more:

http://new.pentagram.com/2012/02/new-work-microsoft/

http://www.underconsideration.com/brandnew/archives/new_logo...

dannygarcia• 11 years ago

Surprised there was no mention of the Paper app.

joshschreuder2• 11 years ago

Paper was released in early 2014, and the author left Facebook in 2014. It's possible they weren't exposed or only had limited exposure to the Paper app.

Animats• 11 years ago

Ah, uniform visual identity. See this video from 2005: "Microsoft Redesigns the iPod packaging"[1] That's by Microsoft's own design team, struggling with Microsoft's corporate identity.

Facebook's bigger problem is page clutter. I just counted 227 clickable things on my Facebook home page, and I'm only scrolled half the way down. The Facebook branding icon only appears once. If they left it out, nobody would care, except that it's also the home button.

[1] https://vimeo.com/65449742

gfosco• 11 years ago

You scrolled half-way down to infinity? ;)

beyti• 11 years ago

Did anyone notice the like button with "Suka" on it. I knew "Suka" was a curse in russian (due to gaming online) but couldn't find out it means "like" in which language.

Anybody know anything about it??

[Edit] Nvm, found out it is in Indonesian.

Facebook Visual Identity

Related Stories