5 ms·

Facebook Design Getting All Hipster

44 points by ajhit406 15y ago

ajhit406 15y ago
Saw this ad via the deck on @Dribbble. Not sure, but I saw some pics of some devs who built a loft in the facebook office and thought this picture might have been the loft.
- ajhit406 15y ago
  Whoa, refreshed the page and the image changed! Checked the source and found this, haha: 
  - ajhit406 15y ago
    By the way, this was the image I was talking about re: the loft: http://dragon.ak.fbcdn.net/cfs-ak-snc6/84980/169/bgdarker.jpg http://dragon.ak.fbcdn.net/cfs-ak-snc6/84980/169/bgdarker.jp...
    - ohthanks 15y ago
      pretty sure that is my friend Ben Barry, http://www.designforfun.com/ http://www.designforfun.com/ been doing some very excellent design work for fb over the past few years.
      - ajhit406 15y ago
        Yep, you're right. Image #3: http://www.designforfun.com/display.php?id=108&e=1 http://www.designforfun.com/display.php?id=108&e=1 Wow, this Analog Research Lab is really incredible, I'm going to post this as well.
  - waterlesscloud 15y ago
    I saw that, wondered who wouldn't look at the html just out of habit...
    - mbesto 15y ago
      Ha, does everyone else do that too? I always feel like I'm alone.
      - swah 15y ago
        I come here to tell you, you are not alone my friend.
  - deleted 15y ago
    [deleted]
  - ajhit406 15y ago
    Just also realized...is this the Greg Hoy from Happy Cog? Thought he lived in Philly not PA.
sriramk 15y ago
In case folks don't realize, the image changes on reload
- treyp 15y ago
  if you'd like to cycle through the background images, go to the site and paste this in your URL bar: javascript:document.getElementsByTagName('a')[0].onclick=function(e){e.preventDefault();document.body.id=switcher[(switcher.indexOf(document.body.id)+1)%switcher.length]};void(0); now each time you click the facebook logo, the next background image will load edit: in related news, it looks like Chrome won't let you paste javascript links into your URL bar. you may need to manually type the 'javascript:' part at the beginning.
  - mike-cardwell 15y ago
    Interesting. I just did that in Firefox 5 and the following message popped up: "javascript: and data: URIs typed or pasted in the address bar are disabled to prevent social engineering attacks. Developers can enable them for testing purposes by toggling the "noscript.allowURLBarJS" preference." I guess that is a new FF5 feature. EDIT: Oh. That's NoScript, not Firefox. Will read more carefully next time.
johnyzee 15y ago
"Move fast and break stuff" - they're actually proud of that shit? I heard that line before but I didn't realize they had made it their mantra. I wonder if they realize how it rings to all the third party developers who are fighting a daily struggle against the notoriously fickle Facebook APIs.
- mcantelon 15y ago
  My guess is they're trying to see more edgy than they actually are.
- m3koval 15y ago
  Well, that explains a lot. Every time I attempt to accomplish something on Facebook, one of two things happens: (1) the interface has changed in some way or (2) the feature is broken. Just last week, every "Load More" link was broken in Google Chrome (but worked in Firefox). The week before, I wasn't able to upload photos repeatedly failed, but the iPhoto integration worked fine. Agile development is great, but Facebook is a mature product: I wish they would keep the breaking to internal test builds.
  - shalinmangar 15y ago
    Why would they? They get free QA this way.
- indigoviolet 15y ago
  The spirit of that slogan is more like "Move fast and don't be afraid to disrupt established patterns". The intention is to give employees licence to think out of the box and try out lots of new ideas, without being bogged down by what has gone before. Everyone I've talked to (I personally don't have a lot of experience at jobs outside of Facebook and academia) agrees that Facebook offers you unparalleled freedom to go forth and have impact, unencumbered by red tape and naysayers. That's not to defend API breakages or incomplete documentation and the pain it causes developers -- I'm not directly involved, but I know that we're definitely trying to get that turned around and fix some of the issues with Facebook Platform.
manifold 15y ago
The text is illegible against a good number of the background images they've chosen (at least on a mobile browser). That doesn't seem like a good advert for a design team, or am I missing the point?
- cmelbye 15y ago
  I could read the text fine. It seems like they even set it up so that the text turns black or white based on the lightness or darkness of the current background.
  - manifold 15y ago
    They have, but it hasn't worked particularly well: http://imgur.com/PSvIm http://imgur.com/PSvIm
    - indigoviolet 15y ago
      I'm curious, what browser/OS are you using? Your screenshots look different from my view of the site, specifically, the text is either displaced or enlarged in your screenshots, making it look weird.
      - manifold 15y ago
        Safari on iOS 4.3.3; standard 3GS setup.
        indigoviolet 15y ago
        Interesting. I'll file a bug. Thanks for the info.
    - loevborg 15y ago
      Pointing out that bug to the developers (with a patch for the html code to fix it in Safari) would be a wonderful way to apply for the job :)
    - 15y ago
jerrya 15y ago
I am such a facebook noob. When I think of facebook design, all that comes to mind is walls of light blue text on white and pages and functionality that I find difficult to navigate. What am I missing? (I did that reloading background image thing back in 99 if I recall, but you don't find my valuation at 20 gazillion dollars. :( )
- DuqE 15y ago
  Clearly ahead of your time, my friend. If Facebook does it, it's cool...
tedsbardella 15y ago
That one picture looks like something out of a Japanese horror film
marknutter 15y ago
Reminds me of the British The Office show's intro: http://www.youtube.com/watch?v=yKTvAP06ECM http://www.youtube.com/watch?v=yKTvAP06ECM
Tichy 15y ago
Why is the word "Hipster" suddenly trending so much? http://trends.google.com/trends?q=hipster&ctab=0&geo=all&date=all&sort=0 http://trends.google.com/trends?q=hipster&ctab=0&geo...
- GrangalanJr 15y ago
  Good question. I'm not sure what the recent momentum is about, but I remember two widely-linked stories about "hipsters" and "hipsterdom" back in 2007 and 2008: http://newyork.timeout.com/things-to-do/this-week-in-new-york/8355/why-the-hipster-must-die http://newyork.timeout.com/things-to-do/this-week-in-new-yor... http://www.adbusters.org/magazine/79/hipster.html http://www.adbusters.org/magazine/79/hipster.html It's interesting to note that "hipster" really started ramping up after "emo" had started sliding downward: http://trends.google.com/trends?q=emo%2C+hipster&ctab=0&geo=all&date=all&sort=0 http://trends.google.com/trends?q=emo%2C+hipster&ctab=0&... I compare the two because they are both subcultural labels that have become terms of abuse in fairly recent years.
benihana 15y ago
Please note, bold design and strong typography !== hipster.
ajays 15y ago
Can someone please photoshop the background image to spell something, ahem, more interesting? http://dragon.ak.fbcdn.net/cfs-ak-snc6/84980/796/hack.jpg http://dragon.ak.fbcdn.net/cfs-ak-snc6/84980/796/hack.jpg

44 points by ajhit406 15y ago

Saw this ad via the deck on @Dribbble. Not sure, but I saw some pics of some devs who built a loft in the facebook office and thought this picture might have been the loft.

ajhit406 15y ago
Whoa, refreshed the page and the image changed! Checked the source and found this, haha: 
- ajhit406 15y ago
  By the way, this was the image I was talking about re: the loft: http://dragon.ak.fbcdn.net/cfs-ak-snc6/84980/169/bgdarker.jpg http://dragon.ak.fbcdn.net/cfs-ak-snc6/84980/169/bgdarker.jp...
  - ohthanks 15y ago
    pretty sure that is my friend Ben Barry, http://www.designforfun.com/ http://www.designforfun.com/ been doing some very excellent design work for fb over the past few years.
    - ajhit406 15y ago
      Yep, you're right. Image #3: http://www.designforfun.com/display.php?id=108&e=1 http://www.designforfun.com/display.php?id=108&e=1 Wow, this Analog Research Lab is really incredible, I'm going to post this as well.
- waterlesscloud 15y ago
  I saw that, wondered who wouldn't look at the html just out of habit...
  - mbesto 15y ago
    Ha, does everyone else do that too? I always feel like I'm alone.
    - swah 15y ago
      I come here to tell you, you are not alone my friend.
- deleted 15y ago
  [deleted]
- ajhit406 15y ago
  Just also realized...is this the Greg Hoy from Happy Cog? Thought he lived in Philly not PA.

sriramk 15y ago

In case folks don't realize, the image changes on reload

treyp 15y ago
if you'd like to cycle through the background images, go to the site and paste this in your URL bar: javascript:document.getElementsByTagName('a')[0].onclick=function(e){e.preventDefault();document.body.id=switcher[(switcher.indexOf(document.body.id)+1)%switcher.length]};void(0); now each time you click the facebook logo, the next background image will load edit: in related news, it looks like Chrome won't let you paste javascript links into your URL bar. you may need to manually type the 'javascript:' part at the beginning.
- mike-cardwell 15y ago
  Interesting. I just did that in Firefox 5 and the following message popped up: "javascript: and data: URIs typed or pasted in the address bar are disabled to prevent social engineering attacks. Developers can enable them for testing purposes by toggling the "noscript.allowURLBarJS" preference." I guess that is a new FF5 feature. EDIT: Oh. That's NoScript, not Firefox. Will read more carefully next time.

johnyzee 15y ago

"Move fast and break stuff" - they're actually proud of that shit? I heard that line before but I didn't realize they had made it their mantra. I wonder if they realize how it rings to all the third party developers who are fighting a daily struggle against the notoriously fickle Facebook APIs.

mcantelon 15y ago
My guess is they're trying to see more edgy than they actually are.
m3koval 15y ago
Well, that explains a lot. Every time I attempt to accomplish something on Facebook, one of two things happens: (1) the interface has changed in some way or (2) the feature is broken. Just last week, every "Load More" link was broken in Google Chrome (but worked in Firefox). The week before, I wasn't able to upload photos repeatedly failed, but the iPhoto integration worked fine. Agile development is great, but Facebook is a mature product: I wish they would keep the breaking to internal test builds.
- shalinmangar 15y ago
  Why would they? They get free QA this way.
indigoviolet 15y ago
The spirit of that slogan is more like "Move fast and don't be afraid to disrupt established patterns". The intention is to give employees licence to think out of the box and try out lots of new ideas, without being bogged down by what has gone before. Everyone I've talked to (I personally don't have a lot of experience at jobs outside of Facebook and academia) agrees that Facebook offers you unparalleled freedom to go forth and have impact, unencumbered by red tape and naysayers. That's not to defend API breakages or incomplete documentation and the pain it causes developers -- I'm not directly involved, but I know that we're definitely trying to get that turned around and fix some of the issues with Facebook Platform.

manifold 15y ago

The text is illegible against a good number of the background images they've chosen (at least on a mobile browser). That doesn't seem like a good advert for a design team, or am I missing the point?

cmelbye 15y ago
I could read the text fine. It seems like they even set it up so that the text turns black or white based on the lightness or darkness of the current background.
- manifold 15y ago
  They have, but it hasn't worked particularly well: http://imgur.com/PSvIm http://imgur.com/PSvIm
  - indigoviolet 15y ago
    I'm curious, what browser/OS are you using? Your screenshots look different from my view of the site, specifically, the text is either displaced or enlarged in your screenshots, making it look weird.
    - manifold 15y ago
      Safari on iOS 4.3.3; standard 3GS setup.
      - indigoviolet 15y ago
        Interesting. I'll file a bug. Thanks for the info.
  - loevborg 15y ago
    Pointing out that bug to the developers (with a patch for the html code to fix it in Safari) would be a wonderful way to apply for the job :)
  - 15y ago

jerrya 15y ago

I am such a facebook noob. When I think of facebook design, all that comes to mind is walls of light blue text on white and pages and functionality that I find difficult to navigate. What am I missing? (I did that reloading background image thing back in 99 if I recall, but you don't find my valuation at 20 gazillion dollars. :( )

DuqE 15y ago
Clearly ahead of your time, my friend. If Facebook does it, it's cool...

tedsbardella 15y ago

That one picture looks like something out of a Japanese horror film

marknutter 15y ago

Reminds me of the British The Office show's intro: http://www.youtube.com/watch?v=yKTvAP06ECM http://www.youtube.com/watch?v=yKTvAP06ECM

Tichy 15y ago

Why is the word "Hipster" suddenly trending so much? http://trends.google.com/trends?q=hipster&ctab=0&geo=all&date=all&sort=0 http://trends.google.com/trends?q=hipster&ctab=0&geo...

GrangalanJr 15y ago
Good question. I'm not sure what the recent momentum is about, but I remember two widely-linked stories about "hipsters" and "hipsterdom" back in 2007 and 2008: http://newyork.timeout.com/things-to-do/this-week-in-new-york/8355/why-the-hipster-must-die http://newyork.timeout.com/things-to-do/this-week-in-new-yor... http://www.adbusters.org/magazine/79/hipster.html http://www.adbusters.org/magazine/79/hipster.html It's interesting to note that "hipster" really started ramping up after "emo" had started sliding downward: http://trends.google.com/trends?q=emo%2C+hipster&ctab=0&geo=all&date=all&sort=0 http://trends.google.com/trends?q=emo%2C+hipster&ctab=0&... I compare the two because they are both subcultural labels that have become terms of abuse in fairly recent years.

benihana 15y ago

Please note, bold design and strong typography !== hipster.

ajays 15y ago

Can someone please photoshop the background image to spell something, ahem, more interesting? http://dragon.ak.fbcdn.net/cfs-ak-snc6/84980/796/hack.jpg http://dragon.ak.fbcdn.net/cfs-ak-snc6/84980/796/hack.jpg