In 2006, I switched from PC to Mac in the midst of an aesthetic sea change called Web 2.0. Overnight, all my buttons and toggles became aqueous, squishy blobs. For my entire young life as a computer user, that place had been populated with beige file folders and gray boxes; now it had metamorphosed into a world of glistening chrome, cool blues, and gummylike buttons.
For those Flatland dwellers unfamiliar, “Web 2.0” is the broad, jargony, and now largely meaningless term coined by the UX Designer Darcy DiNucci and popularized by Tim O’Reilly at the O’Reilly Media Web 2.0 conference in 2004. It articulated the transformative changes underway on the web at the time: how users were engaging with each other online, the birth of social media, the halcyon moment of wikis and folksonomies. As DiNucci explained it in 1999, as the web morphs from 1.0 to 2.0, it “will be understood not as screenfuls of text and graphics but as a transport mechanism, the ether through which interactivity happens.”
The term is also inseparable from a certain graphic design sensibility, which emerged to coincide with this new web. Apple was the greatest perpetrator: its operating system in the early 2000s, the period roughly coinciding with the popularity of Web 2.0, had a squishy, light-filled look. Jellybean buttons in Mac OS X seemed to reflect a gentle whiteness; when clicked, shadows would fall across their curves.
It was tantalizingly tactile. Of Aqua—the glistening visual language of OS X, which still persists in small corners of Mavericks, the current version of the operating system, but will go out with the bathwater once OS X 10.10, or Yosemite, hits the market this fall—Steve Jobs said, “one of the design goals was when you saw it you wanted to lick it.”
Whether it was Apple’s doing, or if the phenomenon was driven by some larger and more ineffable zeitgeist, the lickable, dimensional trend manifested all across the Web 2.0. Menus, toolbars, buttons, slides, and toggles everywhere online existed in a world of glowing light and defined shadows. Not all of them were as appetizing as Aqua, but the shadows did have one important thing in common: they almost all fell in the same direction. To the right.
We might read light, like a sentence.
This is nothing new. Click a button on almost any user interface and examine the shadow it casts. These days, if it exists at all, the shadow is diffuse, more the suggestion of depth or convexity than anything particularly literal. But in the early days—as early as the first Lisa operating system and into the heady days of Web 2.0—they were drop shadows, falling nearly universally to the lower right-hand edge of the object. In the simulated three-dimensional landscape of the interface, there was a light source.
Let’s call it the “Virtual Sun.” If the buttons were to be trusted, the Virtual Sun hung above all screens, all web pages, always just slightly out of frame, in a hidden space between the top and the upper left of the computer.
The Virtual Sun served to remind users, on some roughly sub-conscious level, that digital space, like real space, is navigable, that it adheres to physics. The dimensionality of the web was designed to appear logical to us—because we are accustomed to a three-dimensional world, a world of shadows. According to Apple’s Human Interface Guidelines for OSX, shadows give objects dimensionality and realism, and reflect how the objects would appear in the real world, if they were plonked down on a desk, a shelf, or on the ground.
The canonical drop-shadow—like, the Wikipedia image for drop-shadow—is cast from a light source above and to the left. The real sun sets in the West; is the Virtual Sun, hidden just “West” of the screen, the inverse of our own?
Perhaps this placement has nothing to do with nature, but rather with a Western sense of linearity. After all, we read from left to right; our bias, when we think of linear progression, follows suit. The design of platform video games and English sentences alike hinges on the assumption that a movement to the right is a movement towards resolution. A shadow falling in this direction feels conclusive. We might read light, like a sentence.
Bill Atkinson, who worked on the legendary original Macintosh development team in the early 1980s, creating user interfaces for Lisa and the original Mac, explains it this way:
“in Western text, the text begins at the top left, and that becomes the natural origin. As you type more, the text grows to the right and then grows downwards. The natural origin for a window full of Western text is therefore the top left. By placing the window resizing control on the bottom right, the top left becomes the anchored origin, and the start of the text remains fixed as you resize the window. To reflect this top left origin, I placed the virtual sun above and to the left, with a drop shadow down and to the right.”
Bill Atkinson, the primary developer of the Lisa user interface, had the foresight to take Polaroids of his work at every increment. These images tell an important part of the history of shadows and depth in user interface design, and are all archived by his colleague Andy Hertzfeld at Folklore.org.
His colleague, the software designer Andy Hertzfeld, pegs the origins of the digital drop-shadow to Lisa, the Mac’s predecessor. The team experimented with drop shadows on early prototypes of the Mac user interface, from the summer of 1981, to create the illusion of a menu or window floating above the desktop—to give depth. Hertzfeld believes, like Atkinson, that “the light source was in the upper left because that seemed the most natural, since your eye scans from left to right, top to bottom.”
Computer shadows are there to make us feel like the environment is natural, as though a click has something physical to it. We grasp, as a shadow moves, an intuitive sense of feedback: we know what is clickable, because we know how light moves through space. But real shadows swing and change. A more accurate visual metaphor might have been light that moves naturally: buttons casting short, crisp shade right after noon, at dusk, a golden desktop streaked with long purple shadows.
Regardless, the Virtual Sun is the quietest and most subtle skeuomorph in the game. Without much pomp, it makes our chrome fittings glisten dully. It was the light by which Aqua bewitched us. Since the beginning, it has given depth to our desktop. But it is waning now, even beginning to set. We are in the midst of a great flattening, perhaps because we understand the physics of the digital world now, and have adjusted—as astronauts on a new planet might eventually learn to walk without gravity.
Subtle drop-shadows, cast by the fading Virtual Sun, in Google’s new Material Design language. Image via Google.
When Apple launched iOS7 last September, I felt as though my world had been steamrolled—it was a shift as significant as my introduction to Aqua in 2006. My textural app icons, overnight, transformed into colorful dots on fields of white. This flattening is not exclusive to Apple: Windows 8, of course, is a universe of shifting tiles. Netflix just axed the shadows on its logo.
“Material Design,” Google’s brand-new design language for Android, Chrome OS, and the web, is a hybrid of the affectless flatness of iOS interfaces and an extremely scaled-down use of shadow. According to Google’s design documentation, “surfaces and edges” in Material Design “provide visual cues that are grounded in our experience of reality.” Google’s shadows, although greatly diminished, still fall to the right.
We are growing apart from the desktop metaphors that held our hands through the early years of personal computing. Young children now reach for multitouch devices without the foggiest notion that these shiny planes—their toys and teachers—once contained folders, leather-bound calendars, a world of two-dimensional shadows and light. When they’re old enough to understand it, the notion will seem ridiculous to them.
I said earlier that the Virtual Sun had set. That’s not quite true. If the few remaining dimensional buttons left in our interfaces are any clue, it’s likely high noon. The Virtual Sun isn’t off in a vaulted corner anymore, just beyond view. It’s directly overhead, blazing down on everything we touch.