Facebook Visual Identity(officeofbenbarry.com)
officeofbenbarry.com
Facebook Visual Identity
http://officeofbenbarry.com/see/facebook-visual-identity
7 comments
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.
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.
"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."
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.
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.
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.
There is a similar concept in video game design called 'game feel':
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.
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.
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.
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
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
You scrolled half-way down to infinity? ;)
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.
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.
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.
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.
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.
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.
> As I understand it, they mostly did this for themselves.
Wouldn't say so. All these people do the best work they can - the average consumer might not consciously tell the difference, but they will notice carelessness, at least subconsciously.
Companies spend loads of money on Corporate Fonts. Most consumers will tell you that they can't tell apart Arial and any other sans-serif font; yet many companies decide that a proprietary font is a vital identity asset. Doesn't that say a lot about the meaning of typography?
The Siemens Sans font [1] is particularly fascinating: It is a very subtle modification of the ubiquitous Frutiger font [2]; most people would probably tell you that even Frutiger looks like Arial too them. And yet, Siemens spent loads of money on Siemens Sans Global, a version that "includes all of the world’s major script systems". Personally, I think that Siemens Sans is maybe the most beautiful sans-serif font ever designed. See for yourself: Do you feel a difference?
[1] https://www.urwpp.de/graphic/pdf/SiemensBooklet.pdf
[2] http://www.identifont.com/show?LY
Wouldn't say so. All these people do the best work they can - the average consumer might not consciously tell the difference, but they will notice carelessness, at least subconsciously.
Companies spend loads of money on Corporate Fonts. Most consumers will tell you that they can't tell apart Arial and any other sans-serif font; yet many companies decide that a proprietary font is a vital identity asset. Doesn't that say a lot about the meaning of typography?
The Siemens Sans font [1] is particularly fascinating: It is a very subtle modification of the ubiquitous Frutiger font [2]; most people would probably tell you that even Frutiger looks like Arial too them. And yet, Siemens spent loads of money on Siemens Sans Global, a version that "includes all of the world’s major script systems". Personally, I think that Siemens Sans is maybe the most beautiful sans-serif font ever designed. See for yourself: Do you feel a difference?
[1] https://www.urwpp.de/graphic/pdf/SiemensBooklet.pdf
[2] http://www.identifont.com/show?LY
Insert the word 'miniscule' into those sentences as per OP and you may get different answers. :)
Well, yes, that's the point of the parent comment. The difference between "miniscule" and "significant" depends on the level of experience and expertise you bring to the analysis.
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.
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.
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.
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.
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.
No, these changes are not new. They are years old.
The small changes over time are someone imperceptible in tiny chunks as they become applied over time, this may be true. But to question their value? To the visual design and branding industry, that's like throwing down the gauntlet. There are teams of people dedicated to shaving milliseconds of latency off of page loads. They might speed up the entire site by 15-20ms in a year! That's amazing! But do Facebook users care?
The answer is probably actually "no" -- but it's not important that users notice or care. In fact, these kinds of changes are judged in their success by users actually not noticing and simply getting a better experience whether they know it or not.
The small changes over time are someone imperceptible in tiny chunks as they become applied over time, this may be true. But to question their value? To the visual design and branding industry, that's like throwing down the gauntlet. There are teams of people dedicated to shaving milliseconds of latency off of page loads. They might speed up the entire site by 15-20ms in a year! That's amazing! But do Facebook users care?
The answer is probably actually "no" -- but it's not important that users notice or care. In fact, these kinds of changes are judged in their success by users actually not noticing and simply getting a better experience whether they know it or not.
> But to question their value? To the visual design and branding industry, that's like throwing down the gauntlet.
I don't see the problem questioning the value. If I'm paying somebody $150k a year to design stuff for my company, and they're spending the time making imperceptible changes to fonts and deciding whether the bottom of the 'f' in my logo should have a 3 pixel border or not, I think it's fair to know why they're doing it and what they're expecting to achieve.
I never said design isn't valuable. I was specifically questioning the trivial changes this guy is making. Is he really earning his salary making imperceptible font changes?
Making a page load faster is actually noticeable by users, but it's a red herring, because that's not a component of "visual identity," and it wasn't even mentioned in the article.
Something more substantial than, "I'm another designer, and I think it's valuable," would be nice.
I don't see the problem questioning the value. If I'm paying somebody $150k a year to design stuff for my company, and they're spending the time making imperceptible changes to fonts and deciding whether the bottom of the 'f' in my logo should have a 3 pixel border or not, I think it's fair to know why they're doing it and what they're expecting to achieve.
I never said design isn't valuable. I was specifically questioning the trivial changes this guy is making. Is he really earning his salary making imperceptible font changes?
Making a page load faster is actually noticeable by users, but it's a red herring, because that's not a component of "visual identity," and it wasn't even mentioned in the article.
Something more substantial than, "I'm another designer, and I think it's valuable," would be nice.
Discussing font changes: kerning, hinting, ligature adjustments and the like aren't imperceptible. The difference in how well letters group together to form words, and the internal space and connection of those letters, plays as much or more of a difference in other performance and user experience refinement (like, for example, page load sequencing and total loading time stats, as was mentioned earlier).
Extra space around your logo may leave it emotionally "stranded" from other content. Too little may crowd it and make content around it uncomfortable to interact with. Users actually respond to interactions through these sorts of emotions. Your 150k employee's work is attempting to perfect psychological reactions to your tool, in the context of myriad screens/monitors/resolutions/color profiles/design trends/etc.
Extra space around your logo may leave it emotionally "stranded" from other content. Too little may crowd it and make content around it uncomfortable to interact with. Users actually respond to interactions through these sorts of emotions. Your 150k employee's work is attempting to perfect psychological reactions to your tool, in the context of myriad screens/monitors/resolutions/color profiles/design trends/etc.
They're doing it because that's part of the job.
All of those "trivial changes" combine to give users the perception of completeness, cohesiveness and value.
When broken down into exacting detail, it's easy to dismiss them as imperceptible; by themselves, they mostly are. But the cumulative effect of these decisions leads to the perception of a better product.
Compare and contrast a MacBook Air with any one of the cheaper knock-offs. They may pretty much look the same, but the Apple product has an intangible sense of being worth more.
The same thing goes with cars—sure, they all have the same basic design, but put an Audi next to a Lada and you can immediately tell by looking at them which one's worth more.
That's the value of visual design.
All of those "trivial changes" combine to give users the perception of completeness, cohesiveness and value.
When broken down into exacting detail, it's easy to dismiss them as imperceptible; by themselves, they mostly are. But the cumulative effect of these decisions leads to the perception of a better product.
Compare and contrast a MacBook Air with any one of the cheaper knock-offs. They may pretty much look the same, but the Apple product has an intangible sense of being worth more.
The same thing goes with cars—sure, they all have the same basic design, but put an Audi next to a Lada and you can immediately tell by looking at them which one's worth more.
That's the value of visual design.
I still disagree.
In my experience, Apple products offer superior technical value. Compare the touchpad in a MacBook to one of the knock-offs. OSX has better graphics performance and more software available than Linux. The build quality of the Apple products is higher. Point being, there are objective reasons and tangible value that make the MacBook worth its higher cost.
Same thing with the car example.
I'm still not convinced that Facebook is gaining any tangible value from such minor aesthetic changes. Are there any real numbers to back up the claims that real users care about such things?
In my experience, Apple products offer superior technical value. Compare the touchpad in a MacBook to one of the knock-offs. OSX has better graphics performance and more software available than Linux. The build quality of the Apple products is higher. Point being, there are objective reasons and tangible value that make the MacBook worth its higher cost.
Same thing with the car example.
I'm still not convinced that Facebook is gaining any tangible value from such minor aesthetic changes. Are there any real numbers to back up the claims that real users care about such things?
Your line of questioning is great. And it's something that drives me up the wall that designers don't engage with these questions better. Here's someone from DesignerNews on your comments:
"Here's what the left-brainers have to think about such a well though-out and through design process..."
It's hinging on the effort that went into the process, which is by all means extensive and impressive. Its' defensive. But I think your line of questioning is extremely important and I'm a designer, so I'll give it a bash with explaining why they did this.
I don't think you could ever back up with numbers that these changes 'matter' to users. Any research that could be done would, in the words of someone better than I – be used like a drunk uses a lamp post. For support, not illumination.
At the end of the day, I'm inclined to agree that these changes are negligible for users. What this is more a case of is Facebook deciding they care about the craft and quality of the visual design in their product. Regardless of if users give a toss. The change isn't quantifiable in numbers. It will most likely not change the bottom line of the company.
But what it does do, is communicate that Facebook cares about visual design craft. This is part of branding. Deciding they care about these things, to have the image of the company they want.
These changes are on par with Apple choosing to make a glass staircase in their stores. It's like Twitter choosing the colour of their office furniture, it's like any other company implementing anything that does not directly or clearly affect returns or is quantifiable in numbers. Simply put, it's a culture thing. They've decided they care about visual design craft and so they put money into it so they can have high quality visual design craft. And they have done that here – this is high quality.
"Here's what the left-brainers have to think about such a well though-out and through design process..."
It's hinging on the effort that went into the process, which is by all means extensive and impressive. Its' defensive. But I think your line of questioning is extremely important and I'm a designer, so I'll give it a bash with explaining why they did this.
I don't think you could ever back up with numbers that these changes 'matter' to users. Any research that could be done would, in the words of someone better than I – be used like a drunk uses a lamp post. For support, not illumination.
At the end of the day, I'm inclined to agree that these changes are negligible for users. What this is more a case of is Facebook deciding they care about the craft and quality of the visual design in their product. Regardless of if users give a toss. The change isn't quantifiable in numbers. It will most likely not change the bottom line of the company.
But what it does do, is communicate that Facebook cares about visual design craft. This is part of branding. Deciding they care about these things, to have the image of the company they want.
These changes are on par with Apple choosing to make a glass staircase in their stores. It's like Twitter choosing the colour of their office furniture, it's like any other company implementing anything that does not directly or clearly affect returns or is quantifiable in numbers. Simply put, it's a culture thing. They've decided they care about visual design craft and so they put money into it so they can have high quality visual design craft. And they have done that here – this is high quality.
Oh man, "the left-brainers"? What happened to "Good design makes a product useful/understandable"? If it does either of those things, the effect would be measurable. I don't have any trouble believing that investing time getting the design right translates into better engagement or sales or whatever metric, and you should be able to hold your work up to the light. Writing off a provocative but genuine line of questioning such as jlarocco's is pretty much relegating yourself to the echo chamber.
Apple's computer products are on par and often mediocre with the last few years of Windows-based computers. Retina is on match from other vendors for less. Many retailers offer price-for-price better performance, better graphics support, as much or more memory.
Apple offers a fantastic tactile experience and OS X -- the user experience ecosystem is the big sell for them, which is why their operating system has been a loss-leader for so long. A similarly priced Dell XPS 13" is going to out-perform a new MacBook pretty much everywhere but battery life (which it misses by something like an hour), but the Apple is the more attractive buy because of OS X and the joy of using it.
It's demonstrated and acknowledged, through profit and market dominance industry-wide, that there's more to life than tech specs, and that more is user experience. There's really little else to say on it...
Apple offers a fantastic tactile experience and OS X -- the user experience ecosystem is the big sell for them, which is why their operating system has been a loss-leader for so long. A similarly priced Dell XPS 13" is going to out-perform a new MacBook pretty much everywhere but battery life (which it misses by something like an hour), but the Apple is the more attractive buy because of OS X and the joy of using it.
It's demonstrated and acknowledged, through profit and market dominance industry-wide, that there's more to life than tech specs, and that more is user experience. There's really little else to say on it...
You''d have thought on Hacker News of all places at least one person would pop up saying that they had AB tested user engagement with consistent and inconsistent variants.
The problem with this conversation is that the purpose of visual design is to elicit a desired emotional response from a viewer, and developers are not typically known for their emotional introspection. In fact emotion typically is counterproductive to engineering work. So, when engineers ask for proof that design is worth it, they are asking for a type of first-order proof that they have spent their professional lives moving away from.
That said, here is an example of a study that illustrates why design matters:
http://www.entrepreneur.com/article/223150
> It takes less than two-tenths of a second for an online visitor to form a first opinion of your brand once they've perused your company's website, according to researchers at the Missouri University of Science and Technology. And it takes just another 2.6 seconds for that viewer's eyes to concentrate in a way that reinforces that first impression.
....
> Study participants were asked to rate sites on the basis of visual appeal and design factors during an average of 20 seconds spent on each of 25 websites. The sections sparking the most interest included:
> Logos: Visitors spent about 6.48 seconds focused on this most identifiable portion of a site.
This study focuses on the time and direction of attention, but the clear implication is that these items are causing an effect in the opinion of the visitor. The role of visual design is to create the desired effect in the desired visitor. For example a financial management company will want to elicit feelings of trust, safety, wealth, security, etc.
Facebook, I would imagine, would like to elicit feelings of belonging, of family and friends, of connecting and even love. But that is just my guess.
Such things happen below the conscious mind. That might sound woo-woo to an engineer, but it happens to us all in everyday life. We trust some people more easily than others. We prefer one brand of candy over another. Some people like broccoli, some hate it. Etc.
That said, here is an example of a study that illustrates why design matters:
http://www.entrepreneur.com/article/223150
> It takes less than two-tenths of a second for an online visitor to form a first opinion of your brand once they've perused your company's website, according to researchers at the Missouri University of Science and Technology. And it takes just another 2.6 seconds for that viewer's eyes to concentrate in a way that reinforces that first impression.
....
> Study participants were asked to rate sites on the basis of visual appeal and design factors during an average of 20 seconds spent on each of 25 websites. The sections sparking the most interest included:
> Logos: Visitors spent about 6.48 seconds focused on this most identifiable portion of a site.
This study focuses on the time and direction of attention, but the clear implication is that these items are causing an effect in the opinion of the visitor. The role of visual design is to create the desired effect in the desired visitor. For example a financial management company will want to elicit feelings of trust, safety, wealth, security, etc.
Facebook, I would imagine, would like to elicit feelings of belonging, of family and friends, of connecting and even love. But that is just my guess.
Such things happen below the conscious mind. That might sound woo-woo to an engineer, but it happens to us all in everyday life. We trust some people more easily than others. We prefer one brand of candy over another. Some people like broccoli, some hate it. Etc.
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.
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.
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.
So guessing it does--but wouldn't necessarily extrapolate it to what small startups should do.
Would be nice if that site didn't hijack keyboard shortcuts for 'Back' and prevent you from leaving the site.
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
https://news.ycombinator.com/item?id=9541057
What shortcut are you speaking of? Backspace works, as does cmd + [ on a Mac, AND the swipe back gesture works.
They hijacked left and right arrows for switching articles, a change which the majority of users would likely agree is a 'good change'.
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'.
Alt + Left-Arrow is not the same key press as 'left and right arrows'.
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.
I'm not sure what the value is, either, since you don't know in advance what article you're switching to.
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.
That made reading this article very difficult. It's an accessibility problem.
Anyone have any other good design blogs like this?
Really great process overall, really enjoyed this post. Thank you for posting.
Really great process overall, really enjoyed this post. Thank you for posting.
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...
http://new.pentagram.com/2012/02/new-work-microsoft/
http://www.underconsideration.com/brandnew/archives/new_logo...
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.
Anybody know anything about it??
[Edit] Nvm, found out it is in Indonesian.
Surprised there was no mention of the Paper app.
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.
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...