In this installment of the “In Motion” series I talk with Tim Grimes about his work on the movie “Last Night”, on switching between working on feature films and TV series, on what changes digital productions bring into the world of crafting physical sets and his appreciation of film as a medium.

Kirill: Tell us about yourself and the path that lead you to become a production designer.

Tim: I started off as a production assistant in an office. I was in bands for a while, and then I moved out of New York, and four months later I moved back and my intent was to somehow get into the film business. I had no idea how that would happen, I was 27 at the time and I ended up getting a job as a waiter. I used to work at “Kim’s Video” in New York and I met this guy who came in and asked me if I wanted to be a production assistant on this film that ended up under the name “Return to Paradise”.

I was interested in the film business, but I didn’t really know what I wanted to do. After about a year and a half working as a production assistant on a bunch of TV shows, like “Spin City” and “The Corruptor” with Chow Yun-Fat, I became a property person. I did that for a long time, from 1999 to about 2004, and I was really fortunate to have worked on the second season of “The Sopranos”. I was on a bunch of films and met property master Peter Gelfman who ended up being my boss for a long time. This lead me to work with Kevin Thompson, who is a production designer and a friend of mine. He’s amazing and really talented; he just did “Bourne Legacy” with Tony Gilroy [director].

And through Kevin I met Harris Savides who just passed away. He was my mentor, and almost like my father. We worked together on “Birth” directed by Jonathan Glazer, with Harris shooting, Kevin designing and me doing props under Peter Gelfman. That’s how I met Harris Savides and we became close friends. He worked with David Fincher, Sophia Coppola and Woody Allen, he was very picky about the jobs that he would take. He knew that I had a desire to move on, to do something more challenging, to do the next thing. He was getting ready to do “Last Days” with Gus Van Sant and he asked me during the re-shoots of “Birth” if I was interested in joining the crew. I ended up getting the job as art director, which was basically production designer. I was the head of art department, and it was very stressful and exciting. So he basically gave me my first shot, and that’s how I got into production design.

I then went on to do smaller films, continuing to do props on the side. Then I got an agent and that opened a bunch of doors, and one thing led to another. I tried to use the Harris Savides model to not just take any job, but doing things that interested me, jobs that I thought would stand out or I’d learn a lot from, different things that wouldn’t pigeonhole me into a sort of category. That thing can happen pretty easily. And that’s how I took “Last Night”. I had never done a romantic drama; it’s not something that completely interests me and I wouldn’t do them all the time, but I definitely wanted to do one and I thought that Massy Tadjedin [director/writer] was an interesting writer. I liked her take on this simple European-style romantic drama. That’s what attracted me to the project.

Kirill: As you moved to assume larger responsibilities, do you find yourself going back to do the small things on your sets?

Tim: “Last Night” had the budget of $7M, which is not that big. I was heavily involved in it. We didn’t do a lot of building, it was almost all locations. We build this small set for Paris which ended up with flashback photographs that two of the characters look at at the end of the film. It was work on transforming locations. I’m very hands on, I’m there helping the decorator decide what we’re putting up. I’m very much involved on a project like that.

Continue reading »

“Moonrise Kingdom” is by far the most enchanting and charming movie that I saw in 2012. It is a great pleasure to have the opportunity to host Gerald Sullivan, the art director of this wonderful production, and to ask him a few questions about his craft, and his work on the movie.

---

Kirill: Tell us a little bit about yourself.

Gerald: I am a graduate of the Southern California Institute of Architecture, SCI-ARC. I began working as a set designer in ’95 without much prior knowledge of film making. Since then I’ve had the good fortune of working on a variety of films, gaining insight from many great production designers and working with some of the industries most highly regarded directors.

Kirill: In your experience, what’s the role of an art director in the overall production, and what skills do you bring to the table?

Gerald: An art director takes on many roles throughout the production. We need to be shape shifters. Initially we need to be able to conceptualize the scenery needed to tell a certain story. Budget and schedule need to be established. The art director has to be able to react, adjust and respond to inevitable changes through out each project. We are in constant contact with the assistant directors, the UPM [unit production manager], construction, set decoration, SPFX [special effects], the Director of Photography, the key gaffer, the key grip, etc. Every art director I know has an appreciation for art, architecture, decoration, and the history of each. The best understand we must be learning more all the time, constantly expanding our knowledge, what we bring to the table.

Kirill: From set decorator to art director to production designer. Is it a natural progression, or just one path to follow?

Gerald: No natural progression, no one path to follow. Doesn’t need be a progression that aims toward, or ends up at, production designer. Whatever your best at, and take pride in doing, that’s where you should be.

Kirill: How did you end up working on “Moonrise Kingdom”?

Gerald: I had worked with Adam Stockhausen on a film the previous summer in Michigan. We got along well. I am a big fan of Wes’s work. Adam had worked with Wes on “Darjeeling Express” and a few commercials as an art director. When Adam let me know he was going to work on “Moonrise” as production designer, I let him know I was interested in art directing.

On the set of Bishop family house. Photography by Niko Tavernise, courtesy of Gerald Sullivan.

Outside shot of Bishop family house. This extension was built to match the house and provide the director with what he needed for each scene. It also camouflaged a non-period sun room.

Continue reading »

The work of Mads Berg is a perfect translation of classic poster art into the landscape of contemporary illustration. A flowing effortless interplay of shapes, colors and grainy gradients creates a unique and immediately recognizable style. Mads specializes in posters, editorials and brand illustrations, and his online portfolio is a veritable treasure trove. His art prints are available for sale at Arte Limited, and his extended portfolio is over at Behance. In addition, he’s part of a small team that creates maps for theme parks, amusement parks and zoos all over the world.

Today I am honored to have an opportunity to ask Mads a few questions about his craft.

---

Kirill: Your style is very unique and immediately recognizable. What are your influences?

Mads: A mixture of everything really. I like paintings, Italian baroque, Dutch renaissance, Danish Golden Age and of course Art nouveau, Art Deco and cubism.

Kirill: Do you see your style evolving? Is there ever a thought of exploring radically different directions? Is there a concern of falling into a certain rigidity of style?

Mads: Evolving my style is not only a popular demand but also an important way to challenge myself and to continue to be curious in what I do.

Kirill: Do you keep a sketchbook to develop ideas in between projects?

Mads: I often keep my sketches or prints of my visuals in progress in my pocket for days to view it once in a while, and to let it mature over time.

Brand illustration for Tuborg Classic. Courtesy of Mads Berg.

Kirill: Do you prefer getting a full artistic freedom for a project, or a more defined direction from the client?

Mads: I do not mind working from a well defined motive or scene, or even a product as long as I have the freedom executing it.

Kirill: Pen and paper, or digital? How has your choice of tools evolved since you’ve started in the field?

Mads: You cannot beat sketching with pencil or paper. But finalizing images on a computer is really wonderful excellent for exploring color tones and values.

Kirill: What’s the best thing about being an illustrator?

Mads: Vanity i believe. Turning a white nothing into something beautiful.

Kirill: Your final illustrations seem to be reduced to bare essentials. Do you remove clutter until there’s nothing left to remove?

Mads: I try to, yes.

Posters for the Danish Island Bornholm. Courtesy of Mads Berg.

Kirill: And on a related subject, the way you render human body is absolutely fantastic. Would it be wrong to say that it’s one of your favorite things to draw?

Mads: It is indeed one of my favorite things to draw. Apart from depiction of eyes, I think the human body has the strongest attraction in an image.

Park map for Legoland Florida. Courtesy of Mads Berg.

Kirill: You’re part of a small team that creates maps for theme and amusement parks. What is the process of creating a new map like?

Mads: Research and description of style and approach. It’s much about laying out pathways and supersizing the essential features and eliminating the less important ones.

Kirill: How do you bridge the gap between staying faithful to the park layout with abstracting away the unnecessary details? Or is there no gap at all and these are two sides of the same coin?

Mads: A lot of stretching and tweaking has to be made, but as long as the paths connect where they do in reality, quite some fantasy can be used.

Kirill: Do you spend time on personal projects, and how important is that for you?

Mads: I make 50 xmas cards every year by hand. That makes me happy, so that must be important.

Healthy community magazine cover. Courtesy of Mads Berg.

Kirill: Do you think that advances in software tools and global connectivity are making it simpler to start in your field, and at the same time creating more competition and diversity for the clients to choose from? Does it make harder to stand out?

Mads: Global connectivity yes, software no. True talent combined with consistent work always stands out, I believe.

Kirill: There’s a recent surge of interest in mid-century inspired illustration, photography, fashion and design. Do you see this as a younger “digital” generation trying to recreate the old “analogue” look and capture that spirit?

Mads: Yes, nostalgia and the search for authenticity is sign of the times. I think that knowledge and appreciation of visual heritage must be combined with fascination of the new. Past time heroes also copied their ideas.

Left – poster for Air Greenland, right – poster for Hansen’s ice cream. Courtesy of Mads Berg.

---

And here I’d like to thank Mads Berg for graciously agreeing to this interview. Selected prints available for sale at Arte Limited.

I’ve been talking about responsive mobile design for quite some time now, but was kind of neglecting my own blog and how it looks like on smaller devices. My main focus is on readability, and this was severely impaired on smaller screens. I was using the WPtouch plugin on the blog, and while it was doing a somewhat decent job at scaling down the content, it was not very good.

And so I spent the last few evenings doing semi-random things in my CSS and poking around the developer tools in Chrome. It’s not finished, of course. I still need to figure out how to bring back the search. But otherwise I’m quite happy with how things look now when you browse this site on smaller screens.

Mobile web is a commonly used name for browsing web on mobile devices. It is a rather useful, but very misleading way to talk about how web pages look on a variety of smaller screens. Screens which are, at least at the present moment, associated with devices that are more mobile than traditional screens found on your desk. The ill-fated push for netbooks and the recent wave of hybrid tablets that have desktop docks with full-size physical keyboards are blurring this traditional line between mobile and desktop screens, but I digress.

As Jeremy Keith points out in his “There Is No Mobile Web” presentation, and as I have mentioned a number of times on my blog, one of the more important facets of responsive design is adapting the presentation of the content to the current context:

Now the important thing is, each time I switch the layout there, going from two to three to six, those break-points, those changes, were not dictated by the size of devices; they were dictated by the content. When did it make sense for the content to switch from two to three to six? Because again, I don’t think it scales to just choose your break points based on whatever’s currently popular. So at the moment we’ve got 320, 480, 640, whatever, but there’s so many different devices out there with so many different sizes and dimensions that it makes much more sense to let your content decide when is it time to expand; when is it time to allow some breathing room.

One of the greatest strength of Web as a platform is the ubiquity of access. A device, no matter how small or big, that ships without a built-in web browser is quickly becoming a thing of the past, a curiosity, a gadget at a severe disadvantage in the fiercely competitive landscape. This landscape is seeing a lot of experimentation in the physical screen size, aspect ratio and pixel density. Designing your structure around a few “well-known” pixel widths of a small subset of popular devices is a losing proposition. Instead, the logical hierarchy of your content – the blocks, their logical importance and the spatial relationships between them – must be the primary factor in the decision to switch between different representations of it.

This blog has four blocks: header, content, sidebar and footer. The word “content” is rather overloaded here, and by “content block” I mean the left column that contains the article(s) that you’re reading. As part of the recent redesign the content column switched from 600px width to 720px width to accommodate larger font sizes (with a nice side-effect of being able to use larger images for interviews and other articles). As I started thinking about the different ways to scale down the presentation of the blog to smaller screens, my main goal was to reserve as much horizontal space as possible for the main content block, and to preserve its width (720px) for as long as possible.

At its widest, the current representation is 1120px wide, with 720px going to the content and 365px to the sidebar. Using auto as left and right margins centers the entire content in the browser window. This worked nicely when you viewed the site on a large screen – or rather when your browser window was sufficiently wide to fully fit the entire 1120px span under the current zoom level. However, if you started to make the browser window smaller, horizontal scrolling kicked in and the entire experience was not very user-friendly.

In the new implementation, after a rather short intermediate step where the content column remains at 720px and the sidebar shrinks to 245px, the entire layout switches to one vertical stack – header, content, sidebar, footer. In fact, the transition from displaying this secondary content (“about” blurb, links to recent entries and links to social media profiles) at the right side of the main content to displaying it below the main content reveals a rather unfortunate naming convention for it. It goes along the same vein as the distinction between the semantic <em> (for emphasis) and the presentational <i> (for italics).

At width of 1000px – encoded with @media (max-width: 1000px) – I switch to width=auto, margin=auto and max-width=720px. Here’s a screenshot to illustrate what this does:

As the sidebar is no longer displayed to the right side of the main content, there’s a certain range of screen sizes where I can display the main content in an area which is wider than 720px. My decision here is to limit the content to its “original” width with max-width=720px and center it horizontally in the parent with margin=auto.

As you go along the axis of progressively smaller screen sizes, at some point you need to decide what to do when you just don’t have enough room to display even a single block of content at its “ideal” width. This is where width=auto kicks in, making sure that your content wraps within the available horizontal space.

Once you have a decent presentation figured out, there’s a lot of things that you can refine and polish. Depending on the the logical structure of your content you can have multiple breakpoints (or switching points) where content shifts between a number of possible presentation structures. You can play with font sizes (as I did for the main title and subtitle in the header). You can play with content paddings to give it more breathing room on slightly larger devices. For example, in the next screenshot you can see that in portrait I use 12px padding, while in landscape I use 24px. The difference here, of course, is not the specific pixel size or orientation of the specific device, but rather the available width. Currently I encode the switch from 12px to 24px by @media (max-width: 480px). Some sites use percentage based paddings and margins, at the expense of not following a well-defined grid rhythm.

At slightly over 100 lines of CSS and one extra meta directive in the <head> section, with no changes to the overall content structure, this has been much less painful than what I feared it to be.

The full explanation of the viewport meta tag is somewhat over my head, and I don’t quite understand why this needs to be specified explicitly for optimizing the content viewport and default font size on smaller screens, but suffice it to say that without the magic of adding <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=yes;" /> to the <head> section the site looked quite badly on a variety of devices and browsers.

I’m not a web developer, nor do I pretend to be creating a complete guide for turning any blog into a fully responsive one. This is just documenting a first and very important step towards making Pushing Pixels look good on a much more diverse variety of screens.