8 ms·

Facebook Visual Identity

283 points by yuvals 11y ago

Animats 11y 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 https://vimeo.com/65449742
- gfosco 11y ago
  You scrolled half-way down to infinity? ;)
robszumski 11y 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-000585.png http://officeofbenbarry.com/images/portfolio/1200/benbarry-0...
- bigtones 11y 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 11y 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.
    - joshschreuder 11y ago
      There is a similar concept in video game design called 'game feel': http://www.gamasutra.com/view/feature/130734/game_feel_the_secret_ingredient.php?print=1 http://www.gamasutra.com/view/feature/130734/game_feel_the_s... It's a very subconscious thing, how we appreciate two similar things with slight changes, and often we would struggle to explain why we feel that way. It just 'feels' better.
  - jpatokal 11y 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."
    - suchow 11y ago
      The parent's claim was not that changing the wordmark was easy to do, but that it wasn't worth doing.
    - toolz 11y ago
      "You changed the logo?" -- end user with the icon changes "Oh cool, the app works now" -- end user after changing a < into a >
  - qq66 11y 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.
mchristen 11y ago
Would be nice if that site didn't hijack keyboard shortcuts for 'Back' and prevent you from leaving the site.
- sfeng 11y ago
  Which keyboard shortcut?
  - mchristen 11y ago
    In Chrome, Alt - Left Arrow.
- Everlag 11y ago
  They hijacked left and right arrows for switching articles, a change which the majority of users would likely agree is a 'good change'.
  - mchristen 11y 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'.
    - geofft 11y ago
      Yeah, it seems mildly inconsistent. I think it's not intending to pick up Alt-Left, but it does sometimes.
    - Everlag 11y ago
      In terms of events, isn't Alt + Left-Arrow equivalent to left arrow if they don't consider the 'Alt' flag on the keyevent?
  - geofft 11y 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.
jlarocco 11y 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.
- robszumski 11y 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 11y 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 11y 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.
  - jlarocco 11y 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.
arthurcolle 11y ago
Anyone have any other good design blogs like this? Really great process overall, really enjoyed this post. Thank you for posting.
- atarian 11y 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://new.pentagram.com/2012/02/new-work-microsoft/ http://www.underconsideration.com/brandnew/archives/new_logo_for_yahoo_designed_in-house.php http://www.underconsideration.com/brandnew/archives/new_logo...
dannygarcia 11y ago
Surprised there was no mention of the Paper app.
- joshschreuder 11y 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.
beyti 11y 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.

283 points by yuvals 11y 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 https://vimeo.com/65449742

gfosco 11y ago
You scrolled half-way down to infinity? ;)

robszumski 11y 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-000585.png http://officeofbenbarry.com/images/portfolio/1200/benbarry-0...

bigtones 11y 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 11y 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.
  - joshschreuder 11y ago
    There is a similar concept in video game design called 'game feel': http://www.gamasutra.com/view/feature/130734/game_feel_the_secret_ingredient.php?print=1 http://www.gamasutra.com/view/feature/130734/game_feel_the_s... It's a very subconscious thing, how we appreciate two similar things with slight changes, and often we would struggle to explain why we feel that way. It just 'feels' better.
- jpatokal 11y 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."
  - suchow 11y ago
    The parent's claim was not that changing the wordmark was easy to do, but that it wasn't worth doing.
  - toolz 11y ago
    "You changed the logo?" -- end user with the icon changes "Oh cool, the app works now" -- end user after changing a < into a >
- qq66 11y 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.

mchristen 11y ago

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

sfeng 11y ago
Which keyboard shortcut?
- mchristen 11y ago
  In Chrome, Alt - Left Arrow.
Everlag 11y ago
They hijacked left and right arrows for switching articles, a change which the majority of users would likely agree is a 'good change'.
- mchristen 11y 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'.
  - geofft 11y ago
    Yeah, it seems mildly inconsistent. I think it's not intending to pick up Alt-Left, but it does sometimes.
  - Everlag 11y ago
    In terms of events, isn't Alt + Left-Arrow equivalent to left arrow if they don't consider the 'Alt' flag on the keyevent?
- geofft 11y 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.

jlarocco 11y 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.

robszumski 11y 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 11y 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 11y 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.
- jlarocco 11y 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.

arthurcolle 11y ago

Anyone have any other good design blogs like this? Really great process overall, really enjoyed this post. Thank you for posting.

atarian 11y 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://new.pentagram.com/2012/02/new-work-microsoft/ http://www.underconsideration.com/brandnew/archives/new_logo_for_yahoo_designed_in-house.php http://www.underconsideration.com/brandnew/archives/new_logo...

dannygarcia 11y ago

Surprised there was no mention of the Paper app.

joshschreuder 11y 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.

beyti 11y 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.