I must confess that when I first saw “The American” in the movie theater last fall, I was completely blown away by the exquisite visual treatment that permeates every single frame. Set in rustic Italy, the camera follows George Clooney that plays a craftsman that constructs a custom weapon for the female assassin played by Thekla Reuten.

Daylight outdoors scenes combine pale verdant greens and light sky blues into a perfect backdrop that frames and keeps the focus on the main characters, while still placing them slightly off center to convey the open space around them:

Clooney’s character spends a lot of time driving between different towns, with the camera placement forgoing the usual just-inside-the-front-shield position. Instead, the shooting is done mostly from outside the car, with a couple of great reflection shots that combine character faces with the outside scenery:

One particularly attractive shot shows the car traveling in moonlight on a winding road, with the headlights piercing the eerie emerald fog creeping along the hill side:

My favorite scene of the movie lasts less than a minute. Clooney goes to the train station to meet Reuten. The visual balance, colors and angle switches in this scene are simply fantastic. Here, the camera shoots from behind his left shoulder, keeping his blurred profile in frame and catching train’s reflection in the glass:

And this is shot from a slightly different angle, highlighting her confident pose and a deserted station:

I’m truly honored to have the cinematographer Martin Ruhe finding a few moments in his busy schedule to answer a few questions i had about his work on the movie and the industry in general.

Kirill: Tell us a little bit about yourself

Martin: I’m a german DP [director of photography] living in Berlin. I’ve done 6 films by now, hundreds of commercials and hundreds of music videos. That’s how i started with music videos 17 years ago. My first feature was a not a nice experience, so i waited a long time until Anton Corbijn asked me to do “Control” with him. I like the mixture of different projects and being able to wait for the right film to do by doing shorter projects. Plus it can be a good training in terms of gear, speed, working in different countries…

Corbijn and Ruhe on the set of “The American”

Kirill: Cinematography does not get as much limelight as directing, scripting, costume design or visual effects. Do you like working “behind the scenes”?

Martin: It’s OK because people who know and work in the industry understand what cinematographers do and appreciate it very much. Plus smaller films like “Control” get seen by a lot of people in the field, even though it’s not clear that they have an impact on the broad public. I was also lucky to get a lot of press attention on the cinematography on “The American”, “Harry Brown” and “Control”.

Kirill: How much creative freedom do you usually get, over specific scenes as well as the overall visual atmosphere of the movies you’re working on?

Martin: It’s always teamwork. I do not have to have a lot of freedom in how to do things. For me it has to come from within the story – what’s the right mood what does it feel like. It’s great to discover this together with the director. I am usually much involved and also like to mention things in the script if they do not make sense. In the past my directors trusted me a lot and it was a great collaboration. It’s nice to tell a story together.

Kirill: What is more frustrating, working with fickle weather conditions of unpredictable actors?

Martin: The weather i would think – there’s nothing you can do about it. On “The American” we started shooting in september in Abruzzo. We spent the first days of shooting in a village in the valley; it was like a very hot summer. When we finished in the mountains it was september and we had snow on some days. It was very tough also because all the trees had changed their color or lost their leaves, so maintaining the continuity was difficult. Here’s another example – Castel Del Monte lies 1600 meters above the sea level. You start shooting a scene in pure sunlight and then this cloud comes along and then you sit in it for hours (meaning in real heavy fog). What do you do? Do you start the scene again or wait or… The chase sequence and some other night scenes during that week are other example for bad weather. It was raining all night and at the end of the week the ground was freezing which was of course very tricky for cars chasing each other but also exhausting on crew and gear.

If an actor is unpredictable that’s OK. Most of the time, if it comes from within the story i think it’s cool because they can have a very different take on things. If it’s about insecurity then you have to earn their trust and protect them. For actors it can be difficult because unless they’re on set every day it might be hard for them to be fully part of it. There’s so much they don’t see happening and they don’t have a lot of say about things are done. Fortunately, the bigger stars i have been working with were trusting and relaxed about how we did things.

Kirill: Given the choice, would you prefer shooting as many takes as needed, or leave some of the visuals to the post-production phase?

Martin: Whatever you can do on set i think should be done there. But of course with post-production possibilities and schedules these days you always have to juggle and balance these things. On “The Countess” we used footage of Julie Delpy from a movie called “Homo Faber” from more than twenty years ago. We copied the lighting, tried to work out which lenses they used, Julie acted by a monitor to match the movement of the old scene and it worked. The effect was that in the final scene we tell how the countess gets married as a young woman, and we really see the young face of her. It was great because there’s also the way where you work and paint on the face in the post so you make a face of an actor of today younger. But it’s different – yes, there’s less wrinkles and all that but a face changes its shape so much and there’s more detail to it than a pure post solution can do. As far as i know we were the first ones to go this way.

Kirill: With advances in 3D shooting technology, we should expect this equipment to become available to even lower-budget productions in the next few years. Are you interested in exploring these new capabilities?

Martin: It’s OK. To be honest i have not seen a film yet where it has added that much to the story that i think it’s worth it. However, I am curious about the new Wenders movie about Pina Bausch and the art of her dance. But in general it seems to work well in animated films and not so much in the reality. It also seems to come from TV manufacturers trying to sell new products – rather than from movie goers missing anything. So it will be interesting whether that’s going to succeed. At the moment productions are very expensive, usually much longer and not too many of them have been that successful. Let’s see.

Kirill: The movie-going experience hasn’t changed much in the last few decades, with only incremental improvements in sound and picture quality. Do you foresee big changes in the decades to come?

Martin: Interesting question. I think the image on screen has gotten much better over the last decades, and the skills of crew are getting much better all over the place because also there’s so much more training available. And what about the 3D you mentioned in your question before? That’s a big change again, no?

But right now more and more films are produced on digital cameras. Having used them myself on commercials and two movies (“Harry Brown”, “Page Eight”) i can assure you that the best image quality is still on film. The new technology is getting better but the 35mm image is superior to all, yet it seems that more and more productions go digital. On films like “The Social Network” the decision is unlikely to have been about costs and there’s a lot of marketing going on for the new media; everybody seems to want to use the new technology but the decision is more and more not based on the cinematographers choice of what to use or on what’s the best quality. That seems weired to me.

Kirill: Among the movies you’ve worked on, what was your favorite location, and what would be the dream location if you were free to choose one?

Martin: There are so many beautiful places around so it’s hard to me to choose one… It probably would be in Italy! It’s such a beautiful country in every region. Definitely Abruzzo was the most beautiful location i visited for a film.

Kirill: At least in US, we’re constantly being bombarded by ads and trailers for big-budget movies. Can you recommend a few of your personal favorites that aren’t necessarily blockbusters?

Martin: “A Prophet” (french movie), “Let The Right One In” (swedish movie). I liked “Black Swan” and am very curious to see “Never Let Me Go“.

Kirill: Any exciting new projects that you’re working on?

Martin: I am reading some scripts but nothing is decided yet. I would love to do a movie in the states next. A good one.

And here i want to thank Martin once again for this great opportunity. Finally, if the train station sequence is my favorite one, then the night-time shots of the local coffee place are very close. Two dominant colors, golden brown and soft turquoise seems to spill into each other, with interior reflections superimposed on the street and wooden panels that match the color of the street lights. Also note how the two colors seem to “fight” over the skin tones of the actors:

Design, uninterrupted #153

March 3rd, 2011

Today’s post highlights the design of JonTangerine.com by Jon Tan (@jontangerine). The site features fantastic typography, great content alignment (even with column lines inconsistent between the three main section) and a nice twist on the site name that uses tangerine yellows and oranges for navigation menu and hyperlinks rollovers. Make sure to visit the “About” page and the rest of the site, and spend some time analyzing the balance, white space and typographical treatment of every text section.

Design, uninterrupted #152

March 1st, 2011

Today’s post highlights the design of Pop-The-Box.com (@Pop_the_Box) by Dash Station (@dashstation). It’s an instantly memorable and easily recognizable site that opts for placing all the content above the fold, horizontally scrolling between the four sections on changing selection in the navigation menu. While the content of each section is rather spartan, it is framed with exquisitely crafted textile background textures; my favorite visual element by far is the interlocking repeating plaid pattern of vintage greens, yellows and grays.

The warm intricacy of thick curvy Lobster and the simplicity of all-caps traditional Underground look great on the grainy denim texture of the large gray content box. The embroidered main logo completes this great specimen of an elegant, well balanced and excellently styled modern design.

The recently redesigned Market client introduced an interactive carousel that features promoted apps and games relevant to the current page. The carousel lives in the main navigation area and allows the user to quickly browse the promoted content and view concise information on the specific app. In portrait mode, the carousel takes roughly 40-45% of the screen height (depending on the screen resolution), while in landscape mode it takes the left half of the screen. The landscape mode is, in my opinion, a major step forward in improving usability and content placement, but we’ve introduced a usability regression for the home screen in portrait mode, especially for smaller QVGA screens.

Take another look at the screenshot – as you can see, the list of featured apps is scrolled below the carousel, while the carousel itself is a static element that is anchored to the top edge of the screen. While you can see slightly more than four full app listings on higher end devices, this resulted in poor usability on smaller screens – the scrollable area was too small, showing only about two app rows at a time.

As noticed by Al Sutton, we have addressed this issue in the last few weeks – the carousel now scrolls with the rest of the screen. If you’re not interested in flipping through the promoted content, you can quickly scroll it away and enjoy the full-height scrolling of the featured content.

In the original implementation, this screen had two child views – the “green goblin” header and the list of featured apps. The views were positioned with a custom layout that set custom padding on the list’s header view in order to provide correct (and screen-specific) overlap between the two views, while still allowing the list header to fully show when the viewport is at the top of the list. The carousel component lived outside the list and had its own handling of touch events to process selection, scrolling and flinging. And now we wanted the carousel to be scrolled with the app list.

I’ve mentioned this a few times before, and it’s worth mentioning it again – do not nest scrollable views. Doing so will lead to unpredictable dispatch of scroll events, mostly due to processing motion events that cross the boundary of the nested scrollable child. The ListView component is a scrollable view, and so wrapping the carousel and list in a ScrollView was not an acceptable solution. Instead, we decided to out the entire header (with the title, carousel and navigation buttons) as a header view of the list. This worked quite well, with vertical scrolls being correctly processed by the framework. However, processing touch events on the carousel was very flaky.

We have a custom onTouchEvent handler in the carousel view that detects horizontal motion and starts scrolling the content (and flinging it on ACTION_UP if the velocity is above the threshold). As long as the touch path was horizontal, our handler was getting the motion events and processing them. However, once the touch path sloped just a little, the handler was not notified – and instead the entire screen started scrolling vertically. This was due to the order of event processing – in this case, the parent list view has its own touch handler that detects vertical motion. All in all, we traded one usability problem (smaller scrollable area) for another (flaky processing of carousel scroll gestures). As luck would have it, our framework people (Romain Guy and Adam Powell) were on a holiday break, and we spent a few days trying to subclass the ListView and override the dispatchTouchEvent and onTouchEvent, detecting different scenarios and redispatching the touch events directly to the carousel view if necessary.

After a few iterations we got some ugly code that worked reasonably well for most cases, but we certainly didn’t feel very comfortable in putting such a hack into the production environment given the breadth of platform versions and device variety that we need to support. Once Adam came back from the vacation, he took a quick look at the code and pointed out a much simpler way – use the ViewGroup.requestDisallowInterceptTouchEvent() API. This is exactly what we needed – a way for a child component to tell its parent hierarchy to stop processing touch events. And the best thing (as documented in the method Javadocs) is that you don’t need to reset this state – it is automatically reset by the parent on the up / cancel events. So this is what we do now – a motion event that crosses the vertical threshold of the list before crossing the horizontal threshold of the carousel is still handled by the list. But, if the motion event crosses the horizontal threshold of the carousel first, we call getParent().requestDisallowInterceptTouchEvent(true). As long as the touch stays within the screen bounds (doesn’t to to the bezel), the move events are being delivered to the carousel. The vertical part of those events is being ignored by carousel, so that you can freely cross the bottom edge of the carousel into the list and still operate the carousel.

If you’re running the latest version of the Market client (2.3.3) you would notice that the carousel still displays a drop shadow along its bottom edge. This is a rather unfortunate UI omission, since the presence of drop shadow elsewhere in the Market client indicates that the rest of the content is scrolled below the matching view, while that view remains statically anchored to the screen. This will be addressed shortly to look like this: