For Once, Please *Do* Touch!

If you had to name two standout iPhone applications, you could do a lot worse than pinpoint Angry Birds and Instagram. Instagram, in addition to letting you quickly share your photos on Facebook and Twitter, downright encourages you to add some nifty retro filters:

instagram-1.jpg instagram-2.jpg instagram-3.jpg instagram-4.jpg instagram-5.jpg instagram-6.jpg instagram-7.jpg instagram-8.jpg instagram-9.jpg

Now, lots of the pictures you’re seeing from your friends are being charmingly degraded. It’s not new, though: Cameron Moll labeled this the “wicked, worn look” all the way back in ’04. He described methods that designers could use to achieve it, without getting into the why’s and wherefore’s, but there was clearly demand at that point.

twwl.gif

Today, we’re seeing the second generation (seven-year generations; how things accelerate), with sites like Twitter getting into the game:

twitter-2010.png

There’s a big difference, though: while Moll was showing designers how to use combinations of filters and techniques to make degraded images, what Twitter and others are doing is combining image masks and live text in the web browser itself. What does that mean? Technical details aside, it means newer sites have all the advantages of live text, like blogs and news feeds, with this lived-in effect. Go ahead, try selecting some of that text on Twitter, and you’ll find you can. (Note: Internet Explorer and Firefox users may be somewhat disappointed. Only Safari and Chrome can render these effects.)

These advanced effects are being combined with recent advances in web typography, which allow us to add some classic typefaces to the web:

Hey there, it’s your old friend Cooper Black.

And an even more extreme example.

There are many reasons these typefaces and effects are becoming popular now: the rise of touch interfaces in particular has given rise to skeuomorphic design.

skeuomorph.png

Skeuomorphic design includes everything from functionless rivets on jeans to digital interfaces that replicate physical objects and patterns: primitive LED typography is one example, or the classic skeuomorphic awfulness of the Quicktime Player 4.0:

quicktime_4_player.jpg

Yes, the volume is controlled with a thumbwheel that you jog with a mouse. (How ironic that Apple is now championing this kind of tactile design in iOS, with iBooks, iCal, Contacts, and so many other iPad apps.)

What makes a touchscreen so unique is, obviously, its tactility. There is no cursor, no mouse, no abstraction. Screen design has responded by creating apps and websites that look like slightly worn paper, with texture, because in a sense they have texture, and they react to your touch as you slide across the screen. It’s not that these screens are creating an illusion or trying to fool you, it’s that they’re demonstrating their responsiveness, and responsiveness is a pretty good thing to show.