Web Tableaus

The past week has provided a few notable redesigns of popular web services, including Squarespace and MailChimp. It’s interesting to note the visual similarities in how they have chosen to present themselves: photographed tableaus with props around laptops, tablets, and phones.

Mailchimp’s 2013 redesign. Spot a little cameo, there on the right?
Squarespace’s video-rich redesign.
Teehan+Lax’s playful portfolio page documenting their redesign of Medium.com

These idyllic workspaces do a few things:

  • They make a digital product solid by presenting it on a device. The photographs borrow the visual vocabulary and familiarity of Apple’s iPhone and iPad ads to play up the “producty-ness” of their services. I see homepages like these as store-front displays for digital products.
  • Like a store-front display, you need props. These devices exist in a context, surrounded by suggestive bits and bobs to set the mood. In essence, they are using identifiability, redundancy, and inefficiency as a way to overcome ambiguity about what the product does. You put recognizable touchstones next to your product to show what sort of person it was made to service.
  • The point of view is first-person. The computer faces you. The hands that come into the frame could be your own, using this tool.

These tools are made for information workers, and that kind of work has a tendency to be hard to depict. After all, there is little physical evidence of a manipulated spreadsheet or a few lines of code, other than the stray coffee cups on the desktop (knowingly referenced in Mailchimp’s design). To be tasked with visualizing this sort of work is problematic, and it happens in other places, too.

Still from House of Cards. This particular episode was directed by David Fincher.

Perhaps the most striking visual treatments of contemporary information work have come from David Fincher. Matt Thomas has a great breakdown on how Fincher uses the crowded desk to suggest tension, duress, and progress in information work. Thomas:

Shots like this are consistent with Fincher’s habit of documenting — in films like Zodiac, The Social Network, and The Girl with the Dragon Tattoo — work. Or rather, his habit of conveying the feeling of massive amounts of what is often referred to as knowledge work taking place. In a number of Fincher’s films we’re given glimpses of characters doing things like researching, writing, or coding. […] It’s difficult to render knowledge work cinematically (quick, what’s the last great movie about writing you remember seeing?), as opposed to physical work which more readily lends itself to Rocky-style montages, but Fincher has figured out a way to short circuit the process. Like all good filmmakers, he knows that if he gives us the signs, we will fill in the rest.

These websites are playing the same trick by giving us the signs.

It’s also worth noting that both the Squarespace and Teehan+Lax examples use video to make their case, and thus steal the vocabulary of film. They’re borrowing the well-established God’s Eye shot, shown above in the Fincher still, but made famous by Martin Scorsese and Wes Anderson.

Still from Martin Scorsese’s Taxi Driver
Clip from Wes Anderson’s Rushmore

A screen is a screen, I suppose, and what better way to present a platform than with a table?

For more on props and tableaus in design, I recommend my pal Rob Giampietro’s post from 2009, Inspiration: Holt Basic Reading System