SPRING HAPPY SPREE
Two exciting announcements, my friends! As per usual with my social media updates, both are a few weeks after the fact.. but better late than never, right?
First, Ian and I couldn’t be happier to announce that channing.biz has been featured on The FWA’s Public Shortlist. Thanks to all who voted for us. Here we are on their site… no, no, not the IKEA Kitchen site in all its prominent glory — that’s us down there in the bottom corner.
Secondly, I’ve been accepted to the Design Interactions programme (practicing British spelling ; ) at the Royal College of Art in London. Read on if you’re interested in the projects I completed for the RCA Entrance Exam. And some photos from my trip to London and Paris last month are posted, here.
THE NEW YORK CITY MOUSETRAP
The Entrance Exam to the RCA consisted of two assignments — to come up with an idea for a mousetrap and another for a ghost trap. While a brief to design a ghost trap is pretty abstract, being asked to design a mousetrap is as real of an assignment as it gets for a New Yorker. I am well accustomed to mice in my apartment, my subway station, sometimes even my subway car.. and am acutely aware of the need to catch them.
The BBC recently made the claim that there is at least one rat per every person in the city. By 2030, New York City expects to house 9 million residents (a conservative estimate, in my opinion), which means it will also be the home to more than 9 million rats.
With stats like these, it’s safe to say that by 2030 New York City will be completely occupied by rats. The premise of my project was to take lessons from guerillas around the world to apply to our own struggle against rats in New York City.
I proposed a range of guerilla tactics, altered to accommodate the unique conditions of New York City. Among those suggestions was a 24 hour propaganda network — think The Gothamist meets the Bin Laden tapes. Another takeaway from guerilla warriors is their level of extremism. Suicide bombers are willing to give their lives to their cause, while I proposed that New Yorkers would be willing to sacrifice Staten Island — turning our 5th borough into a quarantined rat island.
THE WEB 3.0 GHOST TRAP
Here’s a glimpse into the ghost trap I made as part of my application to the RCA. The concept was born out a simple question — what happens to the digital version of ourselves when we die? Presumably, that part of us lives on forever. Facebook is setting the precedent as to how to deal with this difficult question — by trying to be smarter at detecting when people have died in order to better avoid “shuffling a dead friend through its social algorithms” (as stated in this New York Times article from 2009).
Using information detected from Facebook on the deceased, I proposed the creation of a Deathbook — a database for the socially-networked dead. Next, we would look to internet companies like Google and Amazon who have extensive amount of data on their users. Using this data, we are able to create a profile of online browsing behaviors for everyone in the Deathbook — a visualization of what they did online while they were alive (a future application of Voyurl, perhaps?)
When a ghost is browsing around on the internet, we are able to determine who and where they are by matching the clickstream with an existing Deathbook profile.
THE MAKING OF CHANNING DOT BIZ
Welcome to the brand new channing.biz—a collaborative project between myself and my development partner in crime, Ian Momyer. It took us about 5 months to concept, design, and build this site and we’re ecstatic to finally share it with you. Read on if you’re interested in a behind-the-scenes look at how we built this site.
What is a parallax?
Parallax is the effect you see happening on this page as you scroll down. Essentially, the website is composed of three layers all sitting on top of each other, which scroll at different speeds. Paper models (below) were a great tool for understanding the motion.
The inspiration for using the parallax came from a slew of cool websites using this effect—most visibly, nikebetterworld.com (which has since been updated, sans parallax). I was also inspired from a design angle, by projects such as HBO Voyeur (below).
I knew I wanted to create a cross section of my building (literally) and my life (figuratively), and the parallax effect presented itself as a perfect way to create the sense of motion that you could get from say, an elevator zooming up and down past floors of a building.
Ian: When Channing first asked me to create a parallax for her site, I assumed I needed to be a scientist of some kind. She referred me to Richard Shepard’s article for Smashing Magazine, “Behind the Scenes of Nike Better World.” I understood what was happening behind the scenes but the visuals aren’t something you see every day… so yeah, headache.
OK, so we know what we’re making… but how?
The first big challenge was to figure out how to divvy up content between the layers. I put together some really rough comps to layout how many floors and how each floor might be represented.
I called my good friend, Milk Studios photographer Craig Rockwell, to come over and take some photos of me, my apartment, and the subway than runs beneath my building. He shot quick “marker” images—no lighting or any other fancy setup necessary at this stage.
I used these placeholder shots to figure out the structure of the website over the course of a 3-week trip to Asia, during which I was to complete this and several other projects.
In the first several iterations of the site, I focused on creating a very literal cross-section of the building. I nearly drove myself crazy trying to envision the floorboards, I-beams, and insulation that you would see within the floors and walls.
After a couple of weeks of pixel pushing, I realized that this site was going in the wrong direction, stylistically. I’ve always been good at breakups (really), so I deleted millions of layers and set out to make an abstracted representation of the building, rather than a literal one.
Finally, I had a structure I was happy with (despite all the artwork being FPO). I sent Ian the site in the final days of October 2011.
The real deal
Now back in New York, I called Craig back over for a photoshoot so I could get some real art to work with.
He lit and shot three scenes with me in them, as well as capturing several other objects around my apartment.
I spent the next several weeks DESIGNING LIKE A MANIAC. I was sleeping three hours a night and sometimes not at all, working at Deutsch by day and on the website by night. I was already behind schedule and knew that Ian needed at least a month of dev time (at the very minimum—I had originally promised him three)! On Thanksgiving day, I was finally finished.
Ian, who had been experimenting with the parallax effect and anxiously awaiting final artwork from me, hit the ground running. After realizing that wildly different monitor sizes would propose problems with the scroll, he asked me to design a second version of the site in which the floors were all 300px taller than the original design and ingeniously created a system where different background settings would load depending on the viewer’s monitor size.
He also sliced through issues with mobile versions of the site, and several updates on design and copy from my end.
Ian: We did have a problem with the bottom of the page that we had to work out. On larger resolutions, we couldn’t scroll far enough to see the last section. I noticed a decent amount of parallax websites had this problem. They seem to be created for an optimum size. We decided to swap a few settings depending on the user’s browser’s available height. We ended up with 9 alternate settings for different browser height scenarios. Just swapping settings, that’s all!
Another cool feature that I hope makes it onto more websites, is the email copy feature. Click the email at the top of the page. I’m assuming you were waiting for your default mail client to open… nope! Just copied it to your clipboard, cool right? The only drawback is, it’s Flash. That seems to be the only way available to get the browser to communicate with the operating system’s clipboard.
Here we are, finally finished! We’re both incredibly proud of the site. We’re happy to discuss the process in more detail if anyone else out there is attempting a parallax. And we’re both freelancing and make a pretty kickass design/dev team, if I do say so myself..
Enjoy! Channing & Ian
