June 21st, 2013

The craft of screen graphics and movie user interfaces – interview with Joseph Chan

Continuing a series of interviews with designers and artists that bring user interfaces and graphics to the big screens, today I’m honored to host Joseph Chan. You have seen his work on “Tron: Legacy” and “Oblivion”, as well as one quite a few motion ad campaigns for companies such as Sony, Google, HP, Intel, Blackberry and others.


Kirill: Please tell us about yourself and how you started in the field.

Joseph: I’m a motion graphic designer and I’ve been working in the industry since 2007. I graduated from Pasadena Art Center in 2006 with a degree in graphic design, specializing in motion graphics.

Before that I attended UC Irvine, I didn’t have a major and was deciding what I wanted to do as a career, and it was around the year 2000 when the .com boom was in full force. It was a great and inspiring time for me, people were designing amazing abstract graphics from 3D programs that I had never seen before. I learned Photoshop and put together a portfolio with personal projects that I did in my spare time. After I was accepted into Art Center, I transitioned from graphic design into motion design which had started to ramp up midway through my college years.

Kirill: What happened after you graduated?

Joseph: During school I took two internships. One was in an interactive design studio, creating graphics and content for websites. In my latter terms at Art Center, I took a class with Chris Do who owns and operates Blind which does motion graphics, and I interned under him and Tom Koh. From then on I decided to focus entirely on motion graphics.

Kirill: And here you’re not talking about Flash / VRML containers that were very popular at that time in the browser environment.

Joseph: I wasn’t into the technical side of Flash or into creating websites. I was mainly using it as a tool for simple layer and text animations, because that was what people used at the time. But the designers who were using Flash in amazing ways, creating beautiful websites full of motion really caught my eye and pushed me towards my career.

Kirill: So back to what you did after graduating…

Joseph: I graduated in mid December in 2007, took some time off for the holidays, and started freelancing at different motion graphics studios around LA and Santa Monica, and I’ve been doing it ever since. I’ve never been staff at a studio before, at this point in my career I feel freelancing is the way to go as I have a little bit more freedom in terms of studio and project choices.

Kirill: Are you also involved in art direction / concept design?

Joseph: Sometimes I am brought in to a project midway or near the tail-end, so therefore I won’t be as involved with the concept as someone who had been on the project since the beginning. So in that scenario I’d be helping out with animation and finishing. Other times I am brought in from the pitch phase, and that includes art direction, concepting, and designing. I do enjoy all parts of the process, designing and animating, and personally I like to find a balance between the two, trying not to do too much of one thing for long stretches of time.

Kirill: You’ve worked on projects with rather different styles. For example, the spot for the first launch of Google Chrome, the recent spot for Google Now and the one for the Gates foundation are semi-vintage illustration style, while Beats Envy and Sony spots have a very modern high-tech industrial feel. Do you like exploring radically different styles?

Joseph: Absolutely. I’m influenced by all kinds of different styles and I try not to limit myself to a particular one per se. I’d like to think that each project has a different and unique solution, so I keep my mind open to what the project asks for.

Kirill: How many people do you usually have collaborating on a single spot?

Joseph: It all depends on the project and what it entails. The spot for Google – compared to other big budget projects that I’ve worked on – was quite simple from the start and we knew that. We did everything from concept to delivery – illustrations, design, compositing and animations – with a team of four people. The spot for Beats Envy also had a small team, but it was a little bit more complicated due to the need for 3D modeling and animation. I worked on the UI designs, compositing of 2D and 3D elements, and the overall grade. The team was four or five people. And then of course we had producers and the creative directors.

Kirill: Was the spot for Sony more complex?

Joseph: The UI and graphic design, a little bit. We had a small graphics team in charge of about 30 screens, so that was a bit daunting. But the direction was very open and we had time to experiment in Cinema 4D and After Effects.

With regard to the overall project, it wasn’t too complex. We weren’t in charge of compositing the graphics so we did our own thing and handed it off.

Kirill: On a spot such as Sony, do you limit the design to be just beyond the edge of what is generally available in consumer electronics and software? Do you aim to create something explicitly futuristic?

Joseph: I feel designers are best when they aren’t constrained by the software. My philosophy is to really design without worrying too much about the technical limitations. That way, the design will be the best possible solution, and that rings true for animation as well. It can always be pushed, experimented with, and figured out.

On a spot such as the Sony Mouse & Cat, we were given free reign on the look of the UI, so naturally the designs were quite far out, futuristic. I think it fit quite well with the techy nature of the campaign.

Kirill: And then a few years ago you worked on “Tron: Legacy”. How was the transition to working on a much bigger project?

Joseph: I always wanted to work on something related to film, especially in the sci-fi genre because of the futurism involved. There’s always a lot of potential there, and I was very happy to be a part of Tron: Legacy. It was unlike anything that I’ve worked on. Not just being involved with and experiencing the massive Digital Domain pipeline (we were a small team of graphic designers and animators sitting in a small corner surrounded by them). But also knowing that your work is going to be viewed by people from all over the world, really challenged and inspired me.

We were creating our content with the usual toolsets (Photoshop, Illustrator, After Effects, C4D), with the exception of some generative art, and handed the results off to the compositors.

Kirill: What is compositing?

Joseph: The compositors take the graphics that we’ve created – 2D or 3D – and implement them into the shots. It’s the layering of these separate objects, put together in order to get the final picture.

Kirill: And then you reunited with most of the people on the same team to work on “Oblivion”. How was it?

Joseph: It was fun. It was pretty much the same team, with a few newcomers. Gmunk contacted me to bring me in, and opined that it wasn’t going to be as big as Tron: Legacy, but it was with the same director (Joe Kosinski), with a lot of freedom to do what we do, so I was immediately on board.

It was also exciting for me because I took on much larger role than on Tron: Legacy. This time I was able to be involved with the project from pre-production to post, and that allowed me to have more design and animation input.

Kirill: How are you preventing yourself from falling into the trap of not using the same graphic and animation elements in different projects?

Joseph: Sometimes recycling ideas, elements or animation is required for the sake of time and to make ones’ life easier, but personally I try to push myself to learn something new, perhaps something that I’m not comfortable with, in the projects that I work on. It could be a very small or big thing, but I feel it’s a good challenge. In order not to fall into the trap of rehashing things, you just have to be aware of it.

Kirill: How did you handle the on-set playback schedule of “Oblivion”?

Joseph: The Light Table was shot on set, so we made sure that the graphics looped, with startup and turnoff animations. We packaged everything and delivered it to a company called i.Solve who took our graphics and ran them through their software. They were on set, controlling the specific timings of each animation.

Kirill: And then you had screen designs for the automatic drones. They don’t really need to project that information for themselves, but you also can’t just show a blank screen. You need to support the narrative with some kind of a menacing automated scanning interface.

Joseph: It’s part of the magic of designing these interfaces because we’re essentially creating stylized, almost exaggerated versions of information that may not make perfect sense in the real world. Like you said, the drones would obviously not display information for themselves, but we decided to allow it anyways while also maintaining its menace, danger and mystery.

Kirill: Are you concerned about how this work will look like in 15-20 years? How it will have “survived” the actual technological advances known to that future audience?

Joseph: I’m not too concerned. Things change, technology, styles, taste. New things will get introduced and change the way we think and that’s just the nature of it.

I guess if you look back at Oblivion in 15-20 years, it’d be like looking into a little time capsule, where you can see the choices we made based on the technology available at the time. Our research and influences–the functionality of interfaces and HUDs that exist today–reflect the times, and we used that as a base to make sure it was grounded in reality.

We also looked at other interfaces to see what others have come up with. Movies, video games, all have great examples of what others have thought up. I think we’re all in the same camp where we don’t really know what the future may hold, but we’re excited and we’re inventing as we go along.

Kirill: Are you comfortable with having this work described as Fantasy UIs?

Joseph: I think that’s a nice way to put it. Technology is all about enriching humans in some way or another, so inventing the design, look, and animation of how we interact with new technology really gives it that fantasy element.

It’d be a totally different beast if we were designing for real life applications though. The research and development process alone would take years, every detail has to have a real function. So it’s nice working with Fantasy UIs.

Kirill: How were you able to validate some of the explorations for this big light table in “Oblivion”?

Joseph: The Light Table was basically three flat screens horizontally and one that went vertical. Joseph Kosinski [director], the director, decided to use HDTVs and even shared a photo of himself sitting and interacting with a screen laid flat just to give us a sense of scale. So the design fit the 1080p dimensions of the screens perfectly.

The main section was the map which the character in the movie, Vika, interacts mainly with. Then we had a Drone monitor, HydroRig monitor, and a weather map, which took up the vertical screen.

After the design phase we took a trip to i.Solve’s studio with some stills of the Light Table, and we were able to get it up on the screens. We checked for any color or size discrepancies, and they took it from there.

Kirill: What are you thoughts on the software tools that you’re using? Are you frustrated by them? Do you wish to see a radically different way to interact with them?

Joseph: You learn not to be frustrated by them. They are just tools and in the work that I do the concept is always the most important. When you get to art directing and having a more hands-off approach, then the software tools and its limitations do not become so much of a problem as you have technical teams that take your direction and help bring your designs to life.

In terms of interaction, I am open to new things. Years ago I never experienced working with a Wacom tablet and now I can’t work without it. Touch screens allowed us to interact with our fingers. And if something new becomes introduced that changes the way we interact with software, then I’ll be the first to try it.

Kirill: Where do you see the human-computer interaction heading in the near future?

Joseph: I sometimes wish that I’d be able to interact with holograms the way Tony Stark does in Iron Man. As a viewer, it just looks so cool, but I don’t know how functional that would be in real life. I can only guess, but I do think touch screens are going to be more and more relevant in the future, and so the devices that we have now, iPhones and iPads etc. which use natural gestural elements, are maybe preparing us for that.

Kirill: What happens the first time you watched the movies you’ve worked on?

Joseph: It can be quite distracting. Personally I have a hard time focusing on the story the first couple of times. I watched “Oblivion” three times. The first was an early cut on our first day of work, which didn’t have any VFX and graphics in it. The audio and sounds effects also weren’t complete so it really left a lot to the imagination. We were invited to the screening a few weeks before the premiere, and this time it was distracting because I was mainly paying attention to our work, trying to pinpoint anything that might have went wrong, even though there is no way that we could have made changes. It was however great just experiencing for the first time our graphics composited, colored, and implemented into the shots. Digital Domain and Pixomondo did a great job, obviously. The third time I watched it with a few friends, and that’s when I enjoyed it the most, being able to take in the story, the great audio and visuals.

Kirill: Where do you see yourself moving forward?

Joseph: It was a great experience working on several film projects as it’s completely different from motion graphics. I had the chance to work with small tight-knit teams that allowed me to have more creative freedom and input. Working directly with a film director like Joseph Kosinski allowed a close collaboration that sometimes is rare in a motion graphic setting as things get convoluted dealing with agencies and clients.

I hope to continue doing what I’m doing, having fun working and learning from great people, on meaningful projects that I care about. And to continue growing as a designer and story teller.


And here I’d like to thank Joseph Chan for this great opportunity to talk about his work. You can find Joseph online at his portfolio site.