Social Hacking, Assignment 3

What is considered the “norm” on the internet?

What does it meant that most sites are in cool colors with san serif fonts?

How can we change it? subvert it?

What if a different set of aesthetic norms were used instead?

I started on this project because I’m bothered by tech bro culture that is prevalent in many spaces I encounter, both online and in IRL – even at ITP. I’m weirded out specifically by presentations, like TED talks and product launches: these highly efficient, corporate, sleek-ness.

Recently I saw something that opposed emotion to intellect – why should these things be in dialectic opposition? Can’t someone or something both convey emotion and intelligence?

I started thinking about how emotion is performed online, both through content and aesthetics. Tumblr is a social media/microblogging site known for confessional content. It also happens to have a it’s own “aesthetic”:

Screen Shot 2016-03-01 at 10.34.27 PM


Screen Shot 2016-03-02 at 2.34.36 PM

I wondered what it would be like if I could experience the internet filtered through a lens crafted by this subculture, one that self-identifies as femme, queer and sees emotion as power, not weakness.

Radical Softness, Lora Mathis

This project also relates to my interest in how our experience of the internet has changed, from the anonymous to the legalized. In comparison to other social media sites, tumblr is a hold out that allows users to put forth content behind a pseudonym.

From this article on tumblr:

Wong explained that teens perform joy on Instagram but confess sadness on Tumblr.

The site, he said, is a “safe haven from their local friends. … On Tumblr they tell their most personal stories. They share things that they normally wouldn’t share with their local friends because of the fear of judgment. That has held true for every person that I’ve met.”

And the culture of tumblr reflects that: people are valued based on their posts rather than their position IRL. I think it carries over the democratic feelings and structures of early internet, in many ways a nostalgia that’s expressed through it’s visuals. How does it carry traditions of the internet existing for those marginalized in traditional societies? What does it mean to exist in this kind of space?

I read this incredible article on how Pantone co-opted the tumblr aesthetic subculture for their latest “Color(s) of the Year” that inspired a lot of my thinking about this project. Highly recommend in terms of thinking about design and power.

“Radical softness is the idea that unapologetically sharing your emotions is a political move and a way to combat the societal idea that feelings are a sign of weakness.“
– Lora Mathis, interviewed by Hooligan Magazine

So, where to start?

I recently read this article (yeah, I read a lot) about how people in India see Facebook as a form neo-colonialism. What interested me the most, and was in another article that’s been going aroudn the web, is that facebook is positioning itself as the framework for the internet, or at least a gateway. Facebook wants to be the way most people experience the internet – a far cry from early internet evangelists who saw websites as a way for companies to have equal footing, challenging IRL dynamics.

What does it mean that Facebook’s blue/grey design is the norm? How does this shape the way people think of and experience the internet?

So, this week I attempted to make a google chrome extension that would take the tumblr aesthetic as an intervention into Facebook’s UX.

We briefly talked about the Girls vs Git project in class, so being very unfamiliar with how to put together an extension I looked through the documentation and uploaded the extension to my browser so I could get an idea of how it looked and worked. I was…pretty confused, so I set that aside and went to play around in the Facebook console.

Screen Shot 2016-02-29 at 10.32.40 PM

Boy, that code is complicated. I dug through a bunch of divs and found the very specific CSS selectors that allowed me to make changes. Apparently simply doing body{background-color: #e6ccff} wasn’t a possibility. I took notes on the various tags and then started thinking about an overall aesthetic that matched my research on tumblr aesthetics.

Screen Shot 2016-02-29 at 8.04.22 PM

Screen Shot 2016-02-29 at 8.34.42 PM

I showed it to Denny and he was like, this reminds me of Orkut – the social media site we had in india and Asia before Facebook came and took everything over:

Which, obviously I found fascinating since I was just reading about Facebook’s India take-over.

I shared the screencap on Facebook and got good feedback, even acknowledgement that people have strong feelings about “Facebook Blue”

At this point I dove back into the code, carefully reading through the GirlsvsGit documentation, Chrome Extension Documentation…I even got my hand on the syllabus for “Hacking the Browser” and found some helpful tutorials there.

One big take-away is that I started learning JQuery, which is something I’ve been meaning to do. The biggest challenge was finding right CSS elements to change and even being unsure if my JQuery syntax was correct, since it was so new to me.

I played around a lot with the aesthetics, going into Photoshop to get the exact colors and build an appropriate palette:

Screen Shot 2016-03-02 at 11.55.16 AM

I was able to upload the files to the developer console (title: FaceTumblr) but…nothing happens when I go on Facebook. So. Fail.

Screen Shot 2016-03-02 at 11.33.26 AM

I kept playing with the code: changing syntax, commenting stuff out, trying different CSS selectors. Alas, still not working. Probably time to bring in the big-guns aka meet for office hours with a person who knows how to do this.

In any case, here are some screenshots from when I was trying out different things in the console that theoretically could be the extension:

Screen Shot 2016-03-02 at 1.59.19 PMScreen Shot 2016-03-02 at 2.00.58 PMScreen Shot 2016-03-02 at 2.01.23 PM

*Also, I need to learn Git so I can actually post my code….

(Visited 752 times, 1 visits today)

02. March 2016 by zoe.bachman.itp
Categories: Social Hacking | Tags: , , , | Leave a comment

Leave a Reply

Required fields are marked *