Mirror, Mirror

A design flourish whose time is clearly now — or maybe it was fifteen minutes ago — is reflectivity, that very popular style of making objects cast a reflection on a horizontal plane directly beneath them. The most notable example of this, and to my mind, the apex of the trend, is Apple’s iChat AV release from last year, which renders video conferences of three or four people as if the concurrent screens are arranged in a virtual room. Beneath each of the video conferencing screens is a beautifully rendered, dynamic reflection.

It’s a very slick look that creates a dramatic spatial illusion — the kind of illusion that, in the recent past, digital design has been skittish about. The conceit of virtual spaces — rooms, cities, etc. — being used as metaphors for information display is something that fell out of favor with the passing of CD-ROMs as a viable medium; three-dimensional space in user interfaces became cheesey, basically, and we’re only now starting to think of the approach as not cheesey. But it may be too late.

iChat AV

Creative Commonness

Reflective surfaces and (increasingly) virtual spaces now have a certain currency when designers and marketers try to denote creativity, attention to detail, and rich consumer experiences. All of which owes a debt of gratitude to Apple’s design strategy of the past several years. The heavily labored and polished Mac OS X user experience — interfaces like iChat AV, Apple’s own Web site, and all the attendant marketing — has established a canon for the design of consumer computing that much software design and marketing now feels compelled to follow.

The marketing for Microsoft’s Max, for example, could be easily mistaken as something cooked up for an Apple product (or one designed and developed by a Macintosh-centric software publisher). It features exquisitely rendered objects — a stack of newspapers, a slide box — that are iconically hyper-real, placed on a highly polished, reflective surface.

Microsoft Max

It’s a gorgeous piece of work, but a little sidebar in the right-hand column belies Microsoft’s somewhat anxious desire to shed their image as authors of complex and user-hostile software: “We are not robots,” the page declares right there, on the top layer of copywriting. If you feel so compelled to insist in one of your opening lines that you are in fact human and not an automaton, it betrays the rest of the artistry employed in the delivery of your message as only skin-deep. In ways like this, where the design short-hand of reflectivity and virtual spaces has become a sheen intended to impart a ‘creative’ look, the style has started to lose whatever authenticity it previously had.

Mixing Metaphors

To be sure, I’m under no illusion that this kind of visual window dressing ever represented an “authentic” voice, though. I’m just remarking that, in its very short life span as a trend through which we’re living, it’s now passed from design innovation to design cliché.

A good example of its current state can be seen in the installer window for Mariner Software’s MacJournal application. This is a program that I like very much; it’s clean, well realized and sturdy. But when users download the installer, they’re presented with a window featuring a background of clouds (another kind of cliché), and instructive text superimposed on top of the clouds.

MacJournal

So the idea is that this is a line of type, sort of floating among the heavens. But the type itself is casting a reflection on an otherwise invisible horizontal plane beneath it. Casting a reflection on clouds? The two visual metaphors don’t make any sense juxtaposed with one another, and they wouldn’t even if they weren’t painfully rote clicheés. Anyway, the lesson that I’ll take away from all of this is: avoid using reflections, unless it’s the year 2016 and you’re going for an unmistakably retro and kitschy 2006 look.

+
  1. Perhaps it’s not dead just yet. Apple’s glass cube on 5th Avenue is possibly an architectural version of the Mirror, Mirror trend, and very nicely done from the photos I’ve seen. Their iChat aesthetic is certainly remarkable but struck me from the beginning (I watched that particular Jobs keynote) as hyperbolic – where else can you go from there? Microsoft is clearly trying to close the gap from the Vista screenshots, but based on those takes I’d say they have missed the mark – muddy backgrounds are the crappy consequence of the new graphical hook. The innovation that would really raise the roof would be the print/web version of the new Apple store in NY. How to make the glass metaphor work in 2D with utter realism – but in the background, so to speak. The reflective metaphor should not be the message itself, but rather a shiny enclosure for the subject it frames. The iChat video effects were a brilliant move, but they almost distract you from the application’s primary purpose. A “reflective” design trend that sticks would probably be one that declared its own presence to be a beautiful refinement of a necessary evil as opposed to an unnecessary but beautiful embellishment.

  2. There is a small javascript to do this for web pages here.

    I suppose the popularity is a reflection of the smoke and mirrors, up is down, through the looking glass nature of our piece of modern times.

  3. interesting view… I did the same on the Blogbar website design : an unvisible line in the clouds, and the reflexion of the blogbar…

    quite clichж, i agree with you. Now, what should I put in my next redesign ?

  4. The growing problem with this effect is it’s own success. Like rounded corners, gradients, and swooshes, a couple tutorials start popping up, a couple automatic plugins appear, and it’s overused by anyone who wants their stuff to look “now”.

  5. Re: 3D interfaces.

    It’s important to point out that Apple, in it’s iChat AV software really isn’t presenting the user with a 3D interface, but rather a view of 3D space. there is no interaction with the video streams. You can’t reposition them, or move them (although you can move *your* video stream, which is flat on the screen ie. 2D).

    It’s not that we are moving toward interacting with 3D interfaces using 2D media (the screen), but rather, we’re learning how to view information in 3D space, which isn’t that different than looking out a window.

  6. Surgically clean, glossy, reflective surfaces have become the new Drop Shadow. You see, that’s the problem with the Internet – it kills design trends in less time than it takes to officially declare them as such.

    What’s next? One can only wonder… the return of dirty, no-tech, circa-late-90s grunge design?

  7. Thanks for this…couldn’t agree more. New things catch the eye, which is why people use the new thing that comes out, but rarely is there the following thought about how to use the new thing (or translate it) in a way which works for or with the idiom or conceptualization already being used. The reflective surface/clouds is a perfect example of this. Ultimately, this seems like thoughtless design.

  8. The glossy and reflective look has definitely been abused in its short lifetime (this incarnation). The problem is the use of the effects where there is no representational value for doing so. The installer window for MacJournal is a perfect example, and one that I’ve seen increasingly.

    iChat AV works because the effect is intended to represent real-world positions of people at a conference table or the like. Some software companies might have gone overboard with that and thrown in a virtual table, but the implementation that Apple came up with doesn’t, instead preferring to provide the reminder that the ‘conference’ is indeed virtual.

    So what we have at the most basic level is those who use these type of effects to achieve a visual goal and those who do it because it looks ‘cool’. There are, of course, those who fall into both camps… Apple being a perfect example.

  9. From someone who hasnt been into design very long I feel that the reflective effect is flawed and often off putting, espeicially for text.

    Maybe its just my eyes, but in order to see a piece of text in the 3d ‘space’ the effect is trying to create I almost have to take a double look.. Or look back from the text and take in the image as a whole..

    Until that point it looks 2d with a mirrored fade. I’ve not had a go with this myself but should a slight sheer in a certain direction be used taking in to account where light is coming from to make this effect more effective?