Just Skeu It

I have to find out if I can pull off a successful translation.

I found my most recent skeuomorphic inspiration in Tokyo’s Nezu museum, one of the best traditional Japanese art museums in the country. Nezu was hosting an exhibit on sensu fans. Originally invented in China, sensu fans were popularized in Japan by artists and calligraphers, who used them as a medium for their work.

Taking in the fans, I immediately appreciated the fantastic woodblock artwork and beautiful brush strokes, but what really struck me was their construction and mechanics: the hand-held fans open with the flick of a wrist. I couldn’t get them out of my mind. How did they open and close so efficiently? How did the bamboo supports slide smoothly over one another? Did the creators consciously build them to open with a simple hand gesture? And what was the point of making them retractable in the first place?

I began to realize that the only way to satiate my curiosity was to make a digital re-creation of the sensu fan. Translating the fan’s physical systems to the digital world would test my skills as a designer and help me to understand its essential systems.

Observable systems

In any skeuomorphic project, the question I usually start with is: What elements capture the essence of the subject? Is it its purpose? Or is it characterized by its design, its construction, its movement, or its interaction? To find the answer, I need to look beyond the face of the object and break it down into the shapes, motions, and systems that define it.

The first app I ever created was a tribute to an electric razor from the late 70s designed by Dieter Rams. I can remember watching my father run that razor over his face every morning. Though I didn't know it at the time, it was the first well-designed product I ever came in contact with. I can still hear the click of the slide-up power button and the sound of the vibration that it made as it glided over my dad’s stubble. When I built an app version of the razor, I realized that the sound and the micro-movements were the two key aspects of the design that I had to translate to make a satisfying digital interpretation.

I used a combination of animation, vibration, and sound (tilting the phone toward your face makes the phone play a beard-cutting sound) to bring the razor to life. The result was a super-tangible app that made the device feel so much like a real razor that you could almost forget it was a phone. Unfortunately, Apple didn’t quite get it—they claimed it was “too useless” for the app store—but for me, it was a ticket back to my childhood.

Considering design

Far from useless, skeumorphic explorations make me a better designer. The challenge of breaking down a real-world object into a set of Photoshop layer styles is my idea of time well spent. I strive for efficiency: Whether it’s lines of code or the number of layer effects, minimization is the key to honing my design skills.

When I did a translation of my Braun AW-20 watch, I managed to perfectly capture the essence of the watch in 27 layers with one to three styles each. I plan on returning to it one day to bring it life in code.

Bringing it to life

When I began my skeumorphic translation of the sensu fan, I felt it was critical to capture the physics of the opening and closing motion. This meant that I wasn’t working with Photoshop layers, but with code. At IDEO, I tend to design with code as much as I do with Photoshop or Sketch. Having a good grasp on code allows me to think deeper about physical-to-digital translations, and real-world systems are better expressed and executed in certain programming languages than others. My first attempts at recreating the fan were standalone applications in openFrameworks—a set of C++ libraries packaged together for creative programming. I started playing with the Box2D add-on for openFrameworks, which was put together by my colleague Todd Vanderlin from our Cambridge office. While the add-on worked perfectly, the digital replication of the fan’s real-world physics just didn’t capture the magic of the construction and movement.

Because the stand-alone nature of openFrameworks limited the reach of the project, I moved on to exploring more accessible web technologies like CSS3 and JavaScript. I had to compromise slightly on the real-world look of the fan, but the final expression really embodies the movement and interaction that fascinated me when I encountered the Sensu fans at the museum. What’s more, users can manipulate jQuery parameters to change the fan's size, color, and decoration—a digital version of what traditional Japanese artists have done with the fans throughout history.

By creating these translations and exploring the life of the subject, I end up discovering something deeper about the object's design and meaning in the world. Likewise, by creating these challenges, I end up discovering something about myself and my skills as well.

‍