Despite the controversy surrounding Ender’s Game, I wanted to share a handful of images of UI from the film. Among the team involved in the work was Ash Thorp, who I’ve interviewed here before about his other work. It’s beautiful, complex, rich-looking infographics and interface stuff. There’s more on Ash’s site, too.

Related posts:

1. Interview: Ash Thorp (Total Recall)
2. Process Videos
3. Complexity and Quantum of Solace

I’m a massive Star Trek fan. So I’m super-excited that Jorge Almeida took some time to discuss his work on Star Trek Into Darkness — for which he was the lead designer of the UI elements. (If you’re paying attention you’ll remember this previous post with Jorge on his work for MI:4 and The Dark Knight Rises).

Q: How did you get involved with Star Trek Into Darkness?

OOOii (pronounced “ooh-wee”) created all of the user interfaces for the first film, so we were brought on to continue our work on the second. I had done some UI work on “Star Trek”, and was asked to take the lead on “Star Trek Into Darkness.” I got a chance to see the movie on Sunday. Just a great ride. I am really proud to have been a part of this film. Hopefully fans will like what we did.

Q: What was your role? Were there a lot of others involved in the design and production? What software did you use?

I was lead designer for OOOii. I oversaw the look and animation style for all of the UI in the film. We had a great team, with major contributions from Blaise Hossain, David Schoneveld, Paul Luna, and Andrew Tomandl. I also need to single out Rudy Vessup, who was my right hand man on this job. Just a fantastic motion graphics artist and a real pro.

Everything we created was done using some combination of Adobe Illustrator, Photoshop, and After Effects. Additional 3d elements were created using Maya.

Q: Was there a general design brief or design direction that you were given? What were your design influences?

For the Enterprise, production already had the full set of interface animations we created from the first film, so we were only responsible for additional UI specific to the story. It was therefore important that I maintain the style and the spirit of what was done in the first film.

Scott Chambliss was the production designer, and I loved what he did with “Star Trek.” The look of that film reminded me of some of Frank Frazetta’s classic Buck Roger’s illustrations. I would always keep that style in mind when designing. I’m also a fan of the classic LCARS interface from “The Next Generation.” While production wasn’t looking for a revision of LCARS, the curved corners and elegance of those interfaces definitely had an influence on my work.

We also had the advantage of having seen the first film and how it was cut. The action often moves quickly, so the UI had to communicate story points clearly and efficiently. When you’re spending days or weeks on a shot, it’s easy to forget that it may only be onscreen for less than two seconds.

Q: Can you describe the work that went into the UI development for the starship Vengeance?

Early on, there was a focus placed on the starship “Vengeance.” They were shooting the Vengeance towards the end of the schedule, but Scott wanted to get a clear direction before production started and other priorities took over. He provided us with some imagery to use as inspiration- most of it pretty abstract, but the shapes definitely felt interstellar. There were many overlapping circles, and cloud-like clusters. They reminded me of some of the space station research I had done. I presented him with ideas and he started to narrow it down from there.

The “Vengeance,” like the “Enterprise,” featured 4 sets of monitors that wrap around the top half of the bridge walls and act as a 360º radar monitor. Some of the images Scott had provided us felt like nautical maps, so I kept that in mind when coming up with ideas. Thinking of the monitors as windows of a submarine, I tried to make what was happening outside feel slightly ominous and alive.

Once we started testing the animations on set, Scott asked us to desaturate them quite a bit so that they would blend in better with the black interior. I really liked the effect. Here are some of the finals (the viewscreen was done in post):

Q: There’s some really interesting heads-up display work. What was involved in their design?

All of the heads-up display shots were obviously done during post-production, so we worked under the direction of Visual Effects Supervisor Roger Guyett. We presented our work regularly to Roger and VFX Producer Ron Ames for comments, and eventually they would present our work to JJ.

The entire space jump sequence was definitely a highlight for me. It was obvious from the first edit I saw that this scene was going to be a lot of fun. We were asked to create the UI for the viewscreen, the glass panel display, and for the helmet heads-up display.

My goal with the HUD was to minimize the interface as much as possible. I wanted to frame it around the actors face in a way that didn’t feel too tech. I was trying to make it feel soothing, with a steady pulse- that way the animation had somewhere to go when things get dangerous.

The projected flightpath was something they had as a rough concept in their original edit, so I just took it from there. I had seen some POV video of an olympic luger, and thought it had the right rhythm and movement to use as a starting point for the animation. I showed our 3d artist the videos, as well as some sketches I had done, and he started building elements in Maya. He rendered a variety of frames and I started combining them in photoshop until we came up with a style that production liked.

From there, it was a matter of animating the individual shots. I animated all of the shots using After Effects. I would create the animation, then put together rough comps so Roger and JJ could see the graphics in context. Once approved, I provided the flat HUD graphics as separate passes for ILM so that they could have flexibility when doing final compositing. The whole process went pretty smoothly.

Q: How did you approach the Enterprise viewscreens?

One of the major challenges in post was designing the Enterprise viewscreen interface. There were only one or two viewscreen interfaces in the first film, but in “Star Trek Into Darkness” there were several. The obvious challenge was keeping the look consistent with the rest of the bridge. Like Scott, Roger also wanted to avoid any design that felt too grid-like or text-heavy.

I don’t really have a set process for how I work. Sometimes I draw thumbnails, sometimes I just start throwing elements onto a photoshop or ae file and start mixing and matching. Generally my philosophy is to keep fixing it until it breaks, then take it back a step. I heard Iain McCaig say that in a video once. Made sense to me.

In practical UI, you are trying to give the user an elegant way to make choices. With film UI, I am trying to give the viewer the illusion of choice. I am trying to deliberately direct the viewers eye to whatever story point the director wants revealed at the time he wants it revealed. The job becomes more about illustration, especially in post where we can see how the interface is framed within the shot. We paint a small part of a much bigger picture, and our work needs to visually support what’s on screen so that we don’t disrupt the rhythm of the viewing experience.

One technique that I often use is to design in greyscale (using an adjustment layer). It reduces the composition to it’s basic values so that I can design without being distracted by color. We also often use Adobe bridge to review various concepts and composites at thumbnail size. It’s an easy way to see which designs are the most effective.

The viewscreen for the volcano sequence was one of the first priorities we had, so the developmental process took place with that interface. I began with thumbnail sketches and tried to work out compositions both on paper and in photoshop.

The volcano viewscreen quickly exposed an issue with trying to make the design too nonlinear — that we might lose the distinction between what was being projected on the glass and what was floating behind it. The view screen needed some type of framing to visually attach it to the ship and easily distinguish it from the environment. We had used translucent glass panels as border elements in the first film, so I started enlarging and reconfiguring them to break up the shape of the viewscreen. I then added and rearranged graphic elements within that framework until the interface had a balance between design and functionality that everyone was happy with.

Once the first couple of viewscreens were approved, the look took off from there. We provided the elements to ILM in separate passes so they could make adjustments and dial in the final composites with Roger and JJ. ILM, as always, did a fantastic job. I couldn’t be happier with how our graphics looked onscreen.

Q: Any final thoughts?

“Star Trek Into Darkness” did a lot of shooting in Los Angeles, so I was much closer to this production than I have been on any film in a while. We were on set a lot, so I was reminded first-hand of just what an enormous operation film production is. Multiple sets being built simultaneously. Trees being painted red on one stage, and a giant Starfleet shuttle on the next. I was humbled by the tireless efforts of our producer, Jennifer Simms, as well the playback producer Cindy Jones. They took on many of the headaches of the job and helped facilitate the constant flow of information between our team and production. This is not easy when you’re talking about creative notes one second, detailed technical issues the next, and budget issues in between- all while this giant train is in motion.

I was also reminded of just how much we depend on the playback crew on set to make our animations work within a scene. We’ve worked with Monte and the guys at Cygnet Video for years. Aside from technical issues, they are also responsible for cueing our animations in sync with the actor’s movements. Ultimately, what you see on screen is an elaborate dance between a large number of people both onscreen and off. It’s pretty amazing to watch it all come together so effectively.

Thank you.

Thanks for the interest in our work. Hopefully people enjoy the movie as much as I did.

You can see more of OOOii’s work on their website oooii.com. And Jorge has posted more of his developmental stuff on his website: jorgeonline.me.

Related posts:

1. Interview: Jorge Almeida (Lead Designer: MI:4, TDKR)
2. Star Trek: PADDs
3. Interview: Jayse Hansen (The Avengers)

More great work from Bradley Munkowitz (aka GMUNK) — this time a reel of GFX work from the film Oblivion. Take a look:

The vimeo page as well as a page on his own website gives plenty of details on what’s what.

A nice overview describes the “Graphic Language stressed functionality and minimalism while utilizing a bright, unified color palette that would appear equally well on both a dark or bright backdrop.” and the bonus that, because the design team worked on all the UI designs they succeeded in “establishing a consistent graphic language that rendered all the interfaces with a loverly cohesion rarely seen in them massive-budget Sci-Fi productions.”

There’s plenty of detail on the Light Table UI, the Bubbleship UI, and the heads-up displays — good reading, as well as fun to scrub through the video and zoom into the still images to see the precision here.

Update: There’s also this fascinating video talking about how many of the UI graphics were filmed live, and with GMUNK talking, and showing, lots of how the graphics were composed. (Think: grids!)

“Super-ninja on the grid!”

Related posts:

1. Process Videos
2. Interview: GMUNK (TRON: Legacy)
3. Interview: Jorge Almeida (Lead Designer: MI:4, TDKR)

Sprint – process

GMUNK, who I previously interviewed for his work on “Tron,” recently put up a Pintrest page full of eye-candy fantasy UI and GFX process videos. They’re all worth a look, but here are a couple cool highlights…

The “Tron” video shows some of the graphics from the Solar Sailor sequence. Very beautiful. It’s interesting to see the composition of live action and globe effect, and the way in which the interface works (or doesn’t quite work) with the live action hands.

This “Iron Man 2″ reel show shows the evolutions of the graphics as well how the the interactive sequences were sketched and integrated with the actors.

I’ve seen Sprint’s “The Dream” movie preview ad more times than I want to count. But did you know that the effects were shot live, or “practically”?

And for something completely different, here’s a very handmade process for the Mad in Spain 2012 titles.

In all – lots of great work. And inspring to see the level of attention that’s paid to something that may only be on the screen for a short period of time.

Related posts:

1. Oblivion
2. Movie: Tron
3. Complexity and Quantum of Solace

“Mission: Impossible – Ghost Protocol”

Jorge Almeida has worked on a wide range of fantasy UIs for film — the most recent being “Mission: Impossible – Ghost Protocol” (MI:4) and “The Dark Knight Rises” (TDKR). I’m so happy that he was able to take some time to talk about his work, as well as to share some images.

Q: How did you get involved in interface design for film?

I started working for Black Box Digital in 1999. They were a small design house in Santa Monica who specialized in producing user interfaces for feature films. They had created UIs for movies like “Enemy of the State” and “Armageddon.” I was originally hired to work on an online comic book for a client of theirs, and eventually started helping with their UI work. I had years of experience in newspaper layout and ad design, so UI design wasn’t too much of a stretch. I also love movies, so I was eager to get involved. My first UI work was for “Impostor,” and I’ve worked on many feature films since- with the most recognizable definitely being “Minority Report.”

Black Box Digital has since changed its name to OOOii (pronounced “ooh-wee”), where I have been serving as a creative director for the last couple of years. I’ve also done some freelance UI work for Pacific Title (“Eagle Eye”) and Prologue (“Iron Man 2″).

I’ve been working in motion graphics for close to 10 years now, with the vast majority of it being film UI work. It’s sort of become my niche, and I really enjoy it. I’m naturally more of an illustrator than a designer, so having a storyline to design around plays to my strengths.

“Mission: Impossible – Ghost Protocol”

Q: How did you get involved with MI:4? The Dark Knight Rises?

OOOii has done some work for Bad Robot in the past. We created the UIs for MI:3 as well as “Star Trek,” so we’ve developed a great working relationship with those involved. Being a fan of Brad Bird, I was pretty psyched to work on his first live-action film. As for TDKR… I’m not sure exactly sure how we became involved, but I’m glad we did. I love the character, as well as the first two films, so having a chance to work on Christopher Nolan’s final Batman film was awesome.

Q: What was your role? Were there a lot of others involved in the design and production? What software did you use?

I was lead designer on both projects. I designed the look and animation style for the UIs, and oversaw the completion of all graphics. I normally work with just a few artists, depending on the amount and type of work involved. On these two projects there were two animators in particular, Alex Gibbs and Paul Luna, who were instrumental in getting the work finished. As far as software, I stick to Photoshop, Illustrator, and After Effects – and will incorporate additional elements from our 3d artists when necessary.

We primarily created graphics that played live on set. We therefore used Flash or Director to create cued animations that could be timed to the actors’ movements. This can be a time consuming process, as we try to give the director as many options as possible. All of the graphics we created for TDKR were for on-set playback. As for “MI:4,” there were only two major sequences done in post — the dust-storm GPS and the BMW heads-up display.

“The Dark Knight Rises”

Q: Was there a general design brief or design direction that you were given? What were your design influences?

For both films I was briefed on the various shots we’d be working on, and shown concept imagery for some of the sets and props that would require UI designs. I always love seeing that stuff. Not only is it a great help in determining the style of the graphics I need to design, but it also gives me a sense of connection to the entire production. It’s a great motivator seeing the work of such talented people. I also read each script beforehand to further understand the various story beats that need to be communicated to the audience. The next step is usually to find UI reference to show the production designer, assuring that we are on the same page style-wise before I move forward with generating original concepts. Both of these films feature characters using cutting-edge technology in a real world setting, so it was primarily the differing production designs that determined the look of the UIs.

For MI:4, I had seen a conceptual design of the traincar safe-house. It had a stylized metallic feel, which I used as the starting point for the IMF interface. I tried to design something that I felt would fit within that world. I wanted to suggest a feeling of secrecy, almost as if the agent is using a flashlight to view the information. I also tried to give it a utilitarian, government agency feel. I worked off of the idea that an agent would need information as efficiently and clearly as possible- almost like a powerpoint presentation. Not only so that the agent could quickly analyze crucial data, but also to reduce overall file size. It also provided me with a justification for using oversized text for crucial story points.

For TDKR, I was told to keep the UI style real-world, which is obviously consistent with the style of the first two films. I read the script and was shown concept art for various sets, including the batcave and the fusion reactor. Both of these sets had a very sleek high-end style which was well constructed and designed, not hacked together. For the batwing and tumbler, the production designer had specific military-style reference which I stuck to pretty closely. The one set that we didn’t work on was the government war room, but I believe everything else was ours.

Q: What were a couple interesting interfaces shown in the films: what was the task, how did you approach the design?

The Batcave:

The production designer, Kevin Kavanaugh, showed me production art for the batcave, which included a 9 monitor workstation which rose out of the ground. We discussed the scenes where the workstation would be used. He wanted it to look powerful without being slick or sci-fi. The challenge was to make it look interesting without feeling designed.

“The Dark Knight Rises”

As far as my approach, I’ll first do plenty of research, possibly draw some thumbnails, or just start designing in Photoshop or Illustrator. I try to establish a color palette early. Cool dark greys felt appropriate, and matched the stone interior. I just started building shapes and basic layouts and adding elements as I went. We purchased a great set of icons from webalys that fit nicely with the subdued look I was going for.

When Bruce Wayne was doing research on Selina Kyle, the goal was to keep the UI from looking like a web browser. Gotham is an old city, so I thought using images of newspaper pages and arrest reports would suggest more of a historical archive than a website. I like mixing photoreal elements with the graphics when possible. I think it adds warmth to the design, and helps the audience register the information quicker.

“Mission: Impossible – Ghost Protocol”

MI:4 Mission Video:

I was pretty psyched to work on this, as it is the most iconic UI from the Mission: Impossible series. I was given an audio recording of the mission, as well as fake surveillance photos and satellite imagery. Production pretty much left it up to us to fill in the rest. Again I incorporated photographic elements into the UI by creating a series of fake top-secret documents and composited them on burnt and scuffed paper textures. I wanted to give the data a history, as if IMF field agents took tremendous risks in retrieving it. The goal was to make it feel like the classic slide projector briefings seen in spy movies, but with a layer of digital tech. During each stage of completion I would post updates for Gladys Tong, the video playback supervisor, and worked closely with her throughout the production. She would regularly review our work and provide script notes or director feedback when necessary. She was great.

“Mission: Impossible – Ghost Protocol”

MI:4 Kremlin Hallway Animation:

The Kremlin Hallway animation was one I was pretty happy with. It was one of many concept-driven animations we did for MI:4, where the purpose is to visually explain what the computer is doing. In this case, we were showing the Kremlin hallway being scanned and transformed into a duplicate 3D environment. These can be tricky to pull off, because you want it to look visually interesting without feeling cartoony. The whole thing was animated in After Effects, using 2D elements placed in 3D space. Gladys took a series of set photos, which I then used to trace elements (like the statue) in illustrator and create fake texture maps. I like this approach, because I find I can get some pretty cool results that feel different than traditional 3D.

Q: Can you talk about the UI in the BMW concept car? How did you approach the HUD and dashboard graphics?

I can’t take any credit for the design, as the majority of elements are based directly on concept art provided by BMW. I did create the map and other hero elements, but tried to keep them consistent with BMW’s design style. While I did not have any direct contact with BMW during the process, they did have final approval on the HUD animations. Fortunately, they were happy with everything I produced and approved the sequence without any changes.

One interesting element of windshield heads-up displays is how to depict them from outside the vehicle. In reality, what you would see on the outside of the windshield would be a mirror image of the driver’s POV from inside the car. Environmental indicators that move towards the driver from his POV can therefore appear to move towards the audience from the exterior, almost giving the impression that the driver is moving in reverse. So we decided to cheat a little for the exterior shots and project the environment graphics as if they were moving towards the driver. Even though it’s technically wrong, it keeps the focus on the actors.

Q: Any crazy stories?

Aside from the long hours, no. 90% of my job is sitting on my butt in front of a computer, which is about as exciting as it sounds.

Speaking of which, I highly recommend to anybody who is beginning a career in visual effects to take care of themselves physically by stretching, having your eyes checked, using correct posture, etc. This industry is notorious for working long hours, so you need to take care of yourself or it will catch up to you.

Q: What’s next?

We finished all of the on-set UI work for “Star Trek 2″ back in May, and now I’m now doing some post-production work on the film. We also have a couple of very cool movies coming up that we’ll be working on, but I can’t say what they are yet.

Eventually, I plan to resume my art training at Watts Atelier so that I can slowly transition into a career in fine art/illustration. I love doing UIs, but I just don’t see how I can continue such intensive computer work over the long run. We’ll see…

Thank you.

Related posts:

1. Interview: Jorge Almeida (Star Trek Into Darkness)
2. Interview: Jayse Hansen (The Avengers)
3. Interview: Neil Huxley (Art Director, Avatar)

Ash Thorp, who I interviewed recently about his work on Prometheus, has been busy. His work is also in the just released Total Recall. And he took some time to talk about that work…

Q: So, as you got started, what was the brief?

The brief was to build iconic, yet functional, interface designs that fit and interacted with the actors and environment that Len Wiseman and his team created for Total Recall 2012.

Q: And what was the team like that worked on this?

It was a VERY small team which consisted merely of: myself as the Designer, and the very talented Ryan Cashman, who took my crazy ideas and concepts and gave them creative life with motion. Together, we provided graphic content for about 200 shots towards the movie.

Q: As you approached the project, what were the design inspirations?

When I first got awarded the project, I took a moment to digest that I would be working on a very iconic film. I knew I wanted to try something different, but yet also keep it in line with the sci-fi era this film was built upon. The inspiration for this project was multi-level and open-ended, just as the world itself is very broad and all encompassing. So I researched many avenues of influence, and I mainly looked into circuit board patterns, computer technology, and current day science & math for some of the ideas we built. For example, in one particular concept design, I was really inspired by the way the back of a jet fighter’s engine component appears to function. I loved how it maneuvered and adjusted based on the control of the operator, and Ryan emulated that motion concept into the design; it was very satisfying to see the results of being able to join such very different concepts together. Another design we worked on was creating the icon that displayed messages on the front shield of the synthetic police robots’ helmets. The robots’ face shield design was very aggressive looking, which matched their role in the story to their physical appearance perfectly. With that in mind, I gravitated towards nature as an inspiration and thought of the praying mantis’ mouth and antennas from other insects. I loved the idea of this creepy looking digital icon that could open up and activate in a way that felt natural, yet in a digital would be very menacing and intriguing. My goal with this design was to do something no one had really seen before.

Q: Were there any influences from the original film?

The original film is one of those movies I always remember watching and being a part of my childhood. It’s one of those great films that will never get old to me, because it was so inspiring and ahead of its time. Philip K. Dick writes some really great stories. For this version of the film, I tried to think about what they may not have been able to do in the original film based on technological limitations of that decade. With that in mind, I developed the intricacy of detail and design to a science fiction level that is more to today’s standards while also pushing forward a few decades to give it that out of reach sci-fi twist.

Q: Can you talk about some of sequences that you’re especially proud?

This project had a very wide scale of needs, consisting of everything from simple train schedule diagrams to more complex robotic schematics. One concept that Ryan and I worked pretty laboriously on was the security body scanner sequence. In the original film, Arnold walks through the scanner and we see an X-ray skeleton of his body possessing his fire arm. Since the new set design Len and his team built for this film was more streamline and modern, I needed to come up with an even more futuristic idea to match that same visual impact. I remember trying many different composition ideas and sending them through to Patrick Tatopoulis, who is the production designer on the film. Patrick is wickedly talented and had this great idea of windows popping out around the user, so that it exposed all their personal information and dissected their citizenship. So I extrapolated off that idea and sent comp designs through the pipeline for Len to review. Once everything was on the right visual track, I took his notes to make a final edit for Ryan to set into motion. I remember this particular scene as an iconic moment of the original film that I really loved, so I hope our modern day take on this same scene does the original justice and inspires the next generation.

Q: What was the process of working with the director like?

A director’s time is in high demand by everyone working on the film and so you are sure to ask any and all questions during the moments you have with them, because you never know if and when you will get that window of time again. With the aid of new communication technology, we were able to conduct many review sessions via video conference, where Len could review our designs or motion tests and draw directly onto them with a Wacom for us to discuss and review later. This process was incredibly valuable as I could go back and review notes to remind myself of key requests. It was such an honor to work with Len; he was very approachable, witty, and always open to a good idea to help solve problems.

Q: is there anything you’d like to re-do, or have done differently?

I am never absolutely satisfied with my work as I always strive for a better result each day. I think there are always things on any project that I wish I had more time to play with, but there never seems to be enough time to address numerous shots while multiple deadlines must be met. If I had more time, I think I would have wanted to refine some things like the synthetic robot point of view concepts. The idea was there, but I felt the final execution could have really pulled through even more with another few days of thought and design.

Thank you.

For even more images, take a look at Ash’s web page on the project.

Related posts:

1. Interview: Jayse Hansen (The Avengers)
2. Territory’s Prometheus UI
3. Interview: Jorge Almeida (Lead Designer: MI:4, TDKR)

For The Avengers, Rise of the Planet of the Apes and other blockbusters, Jayse Hansen has created many of the UI elements in the films. I’m really excited that he took the time for this interview in which, besides lots of cool details and background about the designs, he also shares some fantastic behind-the-scenes graphic elements that lead to the final design…

Q: Can you talk a little about your background and how you got started.

Yeah, I always thought it would be amazing to work on feature films, but I took a rather roundabout path. I started in print design with grid based layouts in Pagemaker and Quark. I did a bunch of pixel-perfect organic UI Flash web-design when that was all the rage – and then got into motion design just out of frustration with web browsers.

Like almost everyone I fell in love with Star Wars as a kid, big time. I noticed that I gravitated towards two things: The graphic design in interfaces and on physical parts, and the actual models of the ships and vehicles. I always wondered what all the symbols and graphics on the pilot’s helmets meant and when I was like 10 years old I used to pause the movies and redraw them by hand. Such a nerd, right?! But that stuff was so cool.

If they were still using physical, painted models in films, that might have been the route I would have taken. I’ve always loved the fact that there were details there you’d never see – but they must be there or the scenes would just feel fake. I tend to look at screen designs for film the same way.

Q: Who are your design inspirations?

There may be too many to name. Actually I discovered your site back in 2010, and a lot of the work and designers on here have been super inspirational to my work. Gmunk, Ilya Abulhanov, Danny Yount, Jake Sargeant – they’re all doing such gorgeous work. But also definitely check out complexity artists like Tatiana Plakhova. I really love the new trend of generative, or even faux-generative art.

In the film world I was always in love with the ridiculously detailed blueprints and designs by Joe Johnston for Star Wars – and then the modern masters like Phil Saunders and Ryan Meinerding inspire me to push beyond designing in just two dimensions.

Q: Have you worked a lot on interactive projects?

A few. I did too many terrible interactive projects back in the days with Director and then later with Flash. I was always unhappy with the quality level and the limitations. I suppose I always wanted the same supercomputers they have in films. Film UI design might be my way of still trying to fulfilling that desire.

Q: How did you get involved in interface design for film?

I’m actually pretty new to screen design, still figuring it out as I go. But I started after I saw the work that my friend, FUI (faux-User-Interface) master Mark Coleran was doing. I really loved it and it seemed right up my alley. I had done interface work and theming before, and motion graphics, but never combined the two. I thought, “That’d be about the coolest job in the world.” After doing some FUI stuff for an Intel project I was working on, he thought they were decent enough to refer me to a few great places. One was an awesome company called G-Creative, who’ve done screens for some of the biggest blockbusters in history. G-Creative founder Gladys Tong is so awesome to work with, and she took a chance and began working with me on concepts for X-Men Origins: Wolverine. That led to other films like 2012 and Rise of the Planet of the Apes.

Q: So how did you get involved with The Avengers?

I met Stephen Lawes (Cantina Creative co-founder and former PLF creative director) at the MGLA (Motion Graphics Los Angeles) meetup when we were both presenting. He was this totally cool and chill guy who had done just the most amazing graphics and vfx work on some of my favorite films like Sky Captain and the World of Tomorrow. We immediately hit it off as friends. He invited me to their new studio to check out a few new projects and when I got there he put the Iron Man HUD up on the screen and asked if I was interested. I was like, “Oh heck ya!” I had no idea then what a huge project it would become.

Q: Were there a lot of others involved in the design and production?

Yeah, Jonathan Ficcadenti and Alan Torres threw down a lot of awesome design on the Science Lab and Loki-Search monitors, as well as on the HUDs. Navarro Parker, Asuka Ashizawa, Takashi Takeoka, Sarah Blank, Lukas Weyandt and Leon Nowlin crafted up a lot of sexy goodness for a bit of everything as well. So Cantina was this super-rad shrink-and-grow team of artists, compositors and designers. [Jayse credits the full team as ‘Club Suave’ on his site.] On the production end we had the most down to earth and genuinely cool producers I’ve had the pleasure of working with, Cantina co-founder Sean Cushing, and VFX Supervisor Janek Sirrs along with Stereo Supervisor Wes Sewell to guide us through the depth specifics of the HUDs.

At Cantina, Stephen Lawes completely revised all my preconceptions on what After Effects could and couldn’t do – he is an absolute master. An amazing artist named Venti, or Ventzeslava!, Hristova led our team of crazy artists and designers with the help of super-sweet Lily Shapiro. They kept our crazy-train on the tracks. Organization was no small task as the helicarrier screens alone took up such a large percentage of the film. The Cantina crew also did the Loki-Search monitors, the Stark devices like the phone, ‘laptop’ etc., so it was actually quite a small team considering the amount onscreen time and detail they wanted on these things. Some things went through several iterations through to the very end.

Q: What was your role?

My role was pretty much whatever needed to be done design and animation wise. I ended up designing the UI look and feel of the glass screens on the Helicarrier, as well as leading the design and animation of the Iron Man Mark VII HUDs.

Q: What was the project’s brief? And what was the scope and timeframe of the project?

There was definitely a lot to design and animate on this project. When I first started at Cantina, we went down to their theater and watched the rough cut showing just our scenes involving the helicarrier screens. It was something like 40 minutes long! And they added more after that. And that didn’t include any HUD shots. So we knew we were in for a decent amount of work!

The first thing on my plate was designing the UI framework that would be the basis for all the glass screens on the helicarrier. These were shot as just empty blank panels on set. My designs needed to accommodate Nick Fury’s main 4-up arrangement, Maria Hill’s tri-up display, and, in a modified version, the science lab screens where Bruce Banner and Tony Stark are analyzing the Tesseract and Loki’s scepter.

Once the design base was set, I drilled into designing the look and feel of the hero elements that were needed and did some animation development. Those designs became the framework that the team could then create new elements for and animate as I moved on to starting the HUD designs.

Q: What was the working process like? How did the designs evolve?

So, the process is pretty simple. Like most screen projects – the process begins with research, which, in the screen-design world is quite fun actually. We were handed a spreadsheet which listed all the major story points that the screens would need to handle. I saw the Helicarrier as a cross between a Nimitz class aircraft carrier and some type of combat helicopter or flying government fortress like Air Force One. So I researched real aircraft carrier screens and master cockpit layouts such as what you’d find on the Space Shuttle or commercial airliners. I even pulled out my old copy of the Space Shuttle Operator’s Manual, because, well, you always need a good excuse to learn how to fly a Space Shuttle!

As my personal preference of working, I also like to get to know the characters in order to design for them. So for instance Fury’s monitors are straight up, hard edged and no-nonsense. They’re almost harsh in a way, kind of like Fury. Hill monitors are a little more elegant, with softer curves and have a bit more color while still living in the established Helicarrier UI look.

Venti (Hristova, Cantina’s VFX Supervisor) and I both really loved orange and felt it was rather underused on film Ui’s – so I began exploring different versions of it as the accent color. In the first week, I did a quick mock up of Fury’s screens with these angular expandable semi translucent panels that echoed the Helicarrier hardware – and that exact base UI survived to the final screens.

I always expected to evolve it a bit more, but the evolving happened much more on the hero elements both by myself and the team. So, just as one example, I started out by creating a mock up of the damaged ‘Engine 3′ as a generic ‘found’ 3d model engine, just for reference.

As we got more info it became a turbine engine, so I modified the first engine and jammed on some new looks and expanded views.

Then we received actual gorgeous models from ILM of the helicarrier and its engines, and I did yet more looks where we could get really detailed and all tricked out. So the end look was similar to the first slap comps – but just more exact and clear as we went along.

Colors, contrast and opacity levels were also changing as different versions of glass-screen-compositing were done. Luma Pictures and Evil Eye did a fantastic job making them look sexy in the final composites and ended up darkening down the transparency of the screens quite a bit which made them really sit well in the scenes.

Q: How did you start on the HUD design?

A lot of simply gorgeous work had been done on the HUD before with Kent Seki and Dav Rauch figuring it all out in Iron Man 1 with the Mark II and Mark III, and Stephen Lawes, Venti Hristova and Takashi Takeoka designing the Mark IV, V and VI in Iron Man 2. But the new Mark VII HUD was an open book at first, and we all wanted to do something very organic and very different with it. But, because the comic-book idea of the direct-neural-interface was not something we’d explore as a story-point in Avengers, it was decided it might be confusing to viewers. So we kept the HUD more in the already established Iron Man Universe.

I started designing something a bit more real-world and much more tech based, looking for queues I could keep from the previous designs, while working with a bit of a new, more fine lined design language. When my friend Mark Christiansen saw my designs, not knowing where we had started from, he commented that they looked ‘nicely organic’. So I suppose that original organic direction worked its way into the final design a bit anyway.

We knew from our Helicarrier designs that Joss was a director who put story first, but liked to have a reason for each design element. It couldn’t be just a bunch of animated circles with no purpose, in other words. So I began creating a ‘HUD Bible’, in which I would list the reason for each and every widget in the HUD, even the micro text that could be zoomed into.

Q: How did you approach the main element designs?

I saw that Tony Stark has the same problem most of us face with our current data feeds; we have too much information to make sense of it all. In a way it becomes useless. Stark is extremely comfortable with dense data displays, so I wasn’t trying to design a simplified ‘iPhone-in-a-HUD’ type of look. But at the same time, he also needs to get a read of his most useful data in milliseconds.

So I designed the HUD with the idea that he should be able to get his most important information at a glance. A lot of the design work in the main diagnostic is pattern-recognition based. He can look at it, and in an instance see if a part of his suit is failing or performing properly. This is based partly on research I had done on Rise of the Planet of the Apes where scientists were using patterns in circular ‘connectograms’ to show healthy and/or deteriorated neural relationships in the brain.

This type of data-display may look new and confusing to some people now, but it’s actually a very good way of displaying complex data and is currently being used across everything from tracking relationships between Facebook friends to planetary systems. In fact, in a few years this may look as familiar to us as a family tree.

Q: Were there any special challenges as you worked?

There were a few. Design wise, designing in multi-dimensions is the challenge with the HUD. You’re designing it to look good and function from Tony’s point of view. That’s a must. But in the film, you mostly see it from the point of view of the ‘impossible camera’ looking back at Tony’s face. So in a way – it has to look even better, and more dynamic in that view. We also knew that Joss wanted to do another first – side views of the HUD. That meant the widgets also had to read well from the side.

I began designing the UI a bit more like product design, referencing physical shapes such as combat gun scopes, lenses and optical equipment. This way the graphics look a certain way when viewed straight on, but from the side have a completely different, more dimensional view.

This was also the first time the HUDs were done in stereo. Using the standard ‘curved planes in space’ set up from the first Iron Man films, they began to feel flat very easily. But we ended up using that as a design tactic, making the previous Mark VI HUD (seen at the beginning of the film) purposely a bit more flat to contrast with the new Mark VII HUD. With the new HUD, I pushed what After Effects could do to dimensionalize every piece.

Q: What software / tools did you use?

We were working on the older iMacs with just 16GB of RAM, so we kept it to just the basics. I’d sketch out super-rough ideas on paper and then go straight to Illustrator.

The 3D elements were done in Cinema 4d and we passed a lot back and forth between it and After Effects.

After Effects was used and abused for animation, compositing and final stereo delivery of the shots as 32bit dpx sequences.

Q: Looking at the film now, would you have done anything differently?

Yes! We should have gone out for more Shawarma!
Nah, it was a fantastic time and I think the film turned out awesome. I’m really happy to have been a small part of Cantina in making it all come together. In the process we all came up with lots of cool unused ideas that I’m sure we’ll develop in future films and projects.

Q: What would your ideal next project be?

My ideal project would be any project that is cool and next level, done with cool people. You can’t beat working with cool people that also happen to completely nerd out on crazy UI’s.

Related posts:

1. Interview: Neil Huxley (Art Director, Avatar)
2. Interview: Ash Thorp (Total Recall)
3. Territory’s Prometheus UI

Quorra Hologram Sequence. © Disney Enterprises, Inc. All Rights Reserved.

For Disney’s “TRON: Legacy,” Bradley Munkowitz, better known as GMUNK, was the lead animated graphics artist. He assembled and led a team of GFX all-stars who conceived, designed and animated approximately 10 minutes of UI sequences and holograms at Digital Domain for director Joseph Kosinski and visual effects supervisor Eric Barba. I was so happy that he agreed to do this interview about his involvement in that film.

Q: Can you talk a little about your background?

I was born and raised in Minneapolis and moved out to California when I was 18. I attended Humboldt State University up in Arcata and I studied Fine Arts and Filmmaking there for 6 years while cultivating some extra dendrites in my brain. Upon graduation I moved to London to work in interactive. I worked on interfaces, web design and interactive media, doing a lot of Flash work for about 3 years after college, and that’s where I got a reputation for building interactive experiences through my site gmunk.com. I finally ended up in LA, and got into motion graphics and commercial directing through working hard and knowing the right people to make it happen.

Q: It’s an interesting transition to move from interactive to motion graphics…

Yeah, I was sick of the limitations of the interactive medium, like having to deal with making file sizes really small so people could download it, and of course the slow playback issues trying to push too much data through. I wanted to make pieces without that concern, focusing purely on the creative, knowing I’d be creating something that people could just watch and would play flawlessly.

However, I’m finally veering towards getting back into interactive, now that I’ve seen it mature into things like installation art and concert visuals, which is the coolest shit right now. Holographic projections, interactive art, data visualization, the maturation of the mobile platforms… I think all that stuff has come of age, so that now you can mix the desires of motion graphics and a reliable experience with the interactive facets and not have to worry about the delivery medium anymore… Give it 5 more years and it’s all gonna be completely immersive 3D and almost real-time transfers.

Opening Titles. © Disney Enterprises, Inc. All Rights Reserved.

Q: How did you get involved in “TRON: Legacy?”

I knew [director] Joe Kosinski through a mutual friend from New York, back in 2001, who had worked for him at KD Labs. But I didn’t actually work with him until a few years later when I did an animated UI for a Hummer commercial that he was directing. That was the first time that I really worked with him, and we had a lot of fun together. It was a natural fit, our two minds — mine completely hyperactive and on permanent ffwd, and his wickedly brilliant and under control.

For the TRON gig, he hit me up a year before my actual start date, as originally we were talking about me doing the on-set graphics for the shoots. In the end, that got outsourced to a different company. But a year later he brings me in and shows me a video clip that I’ll never forget. It was called “hologram_REF.mov,” and it was all this previs of the hologram sequences for the movie that we were being asked to do; it was like 8 minutes of content… And I’m all, “we’re gonna need to build a GFX black-ops swat team for this…”

Throneship Rectifier Extraction. © Disney Enterprises, Inc. All Rights Reserved.

Q: What was the scope of the project?

It started as about 8 minutes of content and our original booking was for three or four months. Eight minutes became 12 minutes, and the GFX team started to inform Digital Domain’s (DD) Houdini team on some sequences as well, like the fireworks and portal climax. And then they ask, “Can you do the graphic portion of the opening titles?” Insane! Of course there was never the word ‘No’ in any of these conversations, so it ended up being a year and a couple months for the entire booking, me going the full duration and a couple team-members on rotation. We were so inspired and so up for anything they threw at us – it was such a great gig.

Q How many people were involved in the project? What was your role?

I don’t think we were ever bigger than five at one time, but our team, in total, was seven on rotation. They was me, functioning as the point-man for Joe / DD and I guess Creative Director of the team… Jake Sargeant was another lead designer and my right-hand for a majority of the gig — we worked in close tandem as much as possible to define the design and animation directions for specific sequences. . The multi-talented David Lewandowski, “dlew,” was the lead animator on a majority of our sequences and was deep deeep in the trenches with me all the way til the end. Others included the wicked-awesome Houdini artist Adam Swaab; Joseph Chan, a designer / animator and a helpful hand; and our core mojo, the genius code-artist Josh Nimoy, who built us all sorts of little graphic applications to use in both the conceptual stages and during production. Of course, a lot of us functioned in multiple roles… for instance the Solar Sailor sequence would have all of us credited as designers, as there was so much to design and execute.

Disc Game. © Disney Enterprises, Inc. All Rights Reserved.

Q: What was the working process like? How did the designs evolve?

It was a really nice organic creative process working with such high-level creatives as Joe and visual effects supervisor Eric Barba. We definitely came away from it feeling like no idea was compromised too much. In the commercial world, you’ll throw up all sorts of ideas during the pitch — but often ad agencies have a very set vision of what they or the client wants, so they won’t let you flex those ideas and explore as much during the initial phases. Whereas with Joe, he supported every idea we threw at him, and wanted us to develop them further. He pushed our creative in the right direction.

Early on we would get a bit more time with Joe. He would come and sit down at our computers and we would show him stuff, talk, and sketch in our sketchbooks with him. Joe was very accessible during that process and it really helped bring the graphics ‘to their maximum potential.’ Towards the end of the gig, when he was getting a lot busier with the sound design and finishing the movie, we would post dailies and look at it together with Joe and all the creative leads from DD. So of course, then everyone started to chime in. We called it “the firing squad” — it wasn’t as awesome.

Q: Can you talk about some of the different interfaces in the film…

Quorra Hologram Sequence

This sequence was definitely the most conceptually challenging for us and the one I’m most proud of. It started with a very loose brief from Joe — he wanted the representation of Quorra’s DNA to be “beautiful, like a flower” and something that has ‘never been seen before.’ We were told Flynn was to identify the ‘damaged code’ in her DNA and then extract it, healing her data with a blow, allowing her arm to grow back… Because she’s an ISO — she’s one of a kind — we wanted to take her DNA and make it super-unique, resembling something from nature, yet still remaining very graphic and obviously holographic. We asked ourselves, “What would the DNA of an otherworldly being look like?” And “how the hell does Flynn traverse the layers of her data foundation to access it?”

For design references we looked at a lot of Ernst Haeckel, the German Biologist who rendered these really amazing organisms that were like graphic prismic coral, for lack of a better explanation. He was one of our primary inspirations because we wanted all of our designs to look and behave like they could be living organisms, like flowers, while retaining some graphic structural rules. We also researched infinite fractals, hexagonal mesh cages and studied data visualizations of voronoi noise algorithms and isometric surfaces. In the end, all of this research informed the designs used for the container that held her DNA.

We presented to Joe a bunch of different design examples and a sequence. The presentation was like a little science presentation. I’ll never forget that night, late after dailies, and all the DD producers were anxious to see what the hell they’d been paying so much for, haha… Thankfully, after asking me what I’d been smoking, Joe ate it up and it was blue-light forward.

The sequence started with opening up the data through navigating a hexagonal outer mesh, or the ‘HexSphere’ as we coined it… We wanted to align with the hexagon metaphor used throughout the film, so the initial layer needed to have the most commonality with its surrounding world. Once Flynn breaks through the outer layers of the HexSphere, he reaches the IsoSurface — which we called the ‘Contour Heart.’ It was a Nimoy creation, with our direction, and quite amazing. Too bad it’s only on screen for like 5 seconds. The IsoSurface holds Quorra’s DNA, so to break through the IsoSurface, Flynn uses a Voronoi noise algorithm, wading through a web-like interface to break open the DNA.

Then the DNA forms (with some amazing sound design — thank you Joe and Co.), Flynn ultimately finds the damaged code, and, as he releases it into the wind, it flutters away. (Joe insisted that the damaged code have wings that fluttered like a butterfly — TRON world has it all, man.)

Looking back on the sequence, I mean, the design could have been the most complicated thing you’d ever seen. It could have been hundreds of layers all at the same time pushing through — like “Iron Man 2″ craziness. But instead we chose to make it more slow moving and elegant, with each element carrying a heavy and substantial feeling. Every single detail that we put into it had a purpose — just say no to greeble. (Although, I still think the IM2 motion graphics are the sickest ever done to date.)

Rectifier Extraction

Another prominent graphics task was the Disc Rectifier extraction scene. Clu gets his dirty hands on Flynn’s disc and he puts it into the rectifier to extract all its data. Our task was to represent that data, first as a chaotic assemblage, then organizing it into concentric rings of decoded data… We primarily studied disc defragmentation diagrams and sought to modernize that aesthetic, because for Flynn, creator of the TRON universe, his disc defrag diagram had to look like an other-worldly disc defrag data representation. We came up with a visual language that felt more natural and insanely detailed. dlew flexed his moGraph muscles to the max, and we worked with compositing supervisor Sonja Burchard to bloom the graphics with a gorgeous shallow depth of field, making it feel even more extraordinary and natural, even though the core structure is informed by the disc defrag diagram.

Opening Title Sequence

The most challenging in terms of pressure, by far, was the opening title sequence. The original TRON title sequence is probably still one of my favorite graphic title sequences ever made. It’s beautiful — really simple but graphically dense, especially for the time period it’s from. So, of course, our first inclination was to pump insane amounts of detail into our portion of the OT sequence, making it the most epic city build ever put to screen. We hired another code artist named Karsten Schmidt to help us previs how the city builds, giving us sliders to control their behaviors, and how the lines interact with the buildings… In animation phase, we pushed that high-level of detail even further, filling the streets with interesting grid-based design patterns and allowing the blocks to gradually form from these initial patterns. And for the buildings, we were basically drawing every single window as the buildings were forming… Lead animator dlew animated the whole thing by hand, in Cinema 4D, carefully weighting each keyframe to follow the VO and punctuate key phrases… We were set to execute a really impressive display of detail. But then the sequence got more and more simplified – to a very tasteful, almost minimal aesthetic… Joe loves his minimalism, and looking back, it was definitely a safer execution that won’t date as much.

Q: Were there any design references from the original “TRON” that you brought into Legacy?

A few, sure. In the original film, at the end when they defeat Master Control and the world comes alive with light — they show the mountains and the lines with light points on them cleansing the world and making all those beautiful geometric patterns and shapes. It’s like a Syd Mead moment. We referenced that over and over because, aesthetically, we thought they were the nicest lookn’ frames from the original. There was some nice animation they did with the Disc game courts – how they animated on and off – that we referenced for the Disc Game scoreboard and in our concept art for the Portal Climax… We referenced the graphics on the wall in Zark’s main ship for its amazing design and density. And we used the supplied Encom font for a lot of our interfaces… But for the majority of our sequences, we stayed away from the original in our design references — just so the graphics in this film could be their own thing.

Q: How did you approach designing interfaces in the TRON world, a world that’s inside the computer? What does it even mean to have an interface inside a digital world? Do these interfaces need to hold-up in the real world?

Oooh really good question… You know, I gotta be honest, we never had a briefing where the rules of the world were defined.. Nobody ever told us exactly what can and can’t go down in TRONland, so we just made up our own rules regarding holographic design and interfaces, which were: they are very hi-res projections that can be controlled, interacted with, spun, flicked, plucked etc; they give off a lot of pure light and come from a natural technological foundation; and Flynn, since he was the creator, could call up these interfaces wherever and whenever, on surfaces, in the air, on peoples discs, etc.

During the Solar Sailer sequence, we got to really push the design language because he doesn’t really need to use an interface, he created everything… He knows exactly where he needs to go, so the interface is basically around his hand as it moves and he directs the interface with simple gestural commands — everything directly at his fingertips. He can move and touch and tap anything in space and an interface immediately comes to him. We did that for the elevator, too: when he stops the elevator and he throws his hand at the screen, we just put an interface in his hand…

Of course there were a lot of tasks that were by-the-book graphic design, for tablets, projection screens, glass panels etc… The aesthetic we used for those interfaces was a very clean, grid-based UI — like all the other stuff you see out there.

Q: Were there any special challenges as you worked?

Yes, many. First and foremost were the growing pains of integrating a bunch of motion graphics artists into DD’s high-end vfx pipeline. The key nemesis was getting depth of field (DOF) and motion blur into our renders. Because some of our sequences were shot with large apertures, everything had exaggerated DOF so it was tough for us to get it looking right, especially getting approval through “master blaster” Eric Barba, the vfx supervisor. We had to change our renderer from Cinema 4D to V-Ray, and port all our openFrameworks apps to Houdini. We even had to bring in our own Houdini master to design and render the DNA out of Quorra to save on all sorts of sabotage etc…

We never saw anything with sound design or music, so we couldn’t really animate anything to a specified beat or audio hits… I’m a really big audio guy, I have been editing and animating to pre-design tracks for over a decade, so to not have that audio direction from the get-go proved challenging. To compensate, we put in a bunch of animation cues assuming that they’d nail the sound design later on… And hearing the sound design that they came up with for some of our sequences was such a treat, it completely changed some of our stuff from where we were taking it… For instance, when Clu takes Sam’s disc and he looks through the clips from Sam’s past, the sound design that they did for that was suuper awesome — what a treat. Thank you, Skywalker Sound.

A big challenge for us was choreographing the actor’s hand performances when they interact with the graphics, as they did the hand filming way before we got involved. I feel like the graphics could have been considered a little bit more when they shot the hands, especially Flynn’s during the Solar Sailor sequence and the EC Elevator shot… Like I said before, a lot of sequences were captured with large apertures, so, on some of our shots the focus wasn’t on the graphics during key story point moments… In addition, characters’ eye lines were different from shot to shot and sometimes hand gestures were very lackadaisical, which we had to match the graphics animation to… All in all, we worked with what we were given and it was all good, just challenging to say the least…

And lastly, doing the stereoscopic renders for graphics was hard, especially for all the particle heads and simulations we were doing. For stereoscopic renders, everything has to match perfectly in both eyes so nothing becomes fuzzy or soft. Some of it was just doing graphics on cards that would then go through the DD stereo pipeline, which was easy. But in some scenes we were rendering both eyes, even supplying stereo pre-comps of the elements, so we had to test things over and over, adjusting frame by frame certain particles or bits of data. It was tricky for sure, but well worth it… DD offered a lot of help to get the tools we needed to integrate into the pipeline, assigning mega geniuses Jonathan Gerber (digital effects supervisor) and Douglas K. Wilkinson (lighting artist) to get us up to speed with V-Ray and integration into the pipeline. Without those two, it wouldn’t have been possible. They were our superheroes.

Q: Other than the custom programming, what other software tools did you use?

We used the Adobe design tools, Photoshop, Illustrator, AfterEffects, etc. We also used Cinema 4D, a 3D package aimed more towards the motion graphics industry, with its insane MoGraph plugin suite… We used it heavily, and also rendered a bunch of key graphics out of c4d V-Ray for proper DOF and motion blur, dlew was in control. We also used Maya for some pipeline enhancements, and Houdini for the DNA and as a host for Nimoy’s openFrameworks applications, which were ported over to Houdini by “The King,” effects animator Andy King. It was definitely the way forward, getting our stuff deep into the visual effects pipeline.

That’s how we did the fireworks during the light cycle sequence. We first wrote an openFrameworks app with Nimoy, creating the design and behaviors of the fireworks, as well as the shape and all the other attributes. We then perfected the app with feedback from Joe; I’d create slider presets of the key design settings that we then ported to Houdini, which ran them exactly the same once the app was ported over. Being able to re-create the designs exactly, we rendered them out of Houdini through the DD pipeline and off to comp it went. Pretty solid design process for sure…

Q: Anything you’d like to re-do, or do differently?

There were a couple tasks that I didn’t feel we nailed… Definitely, the scoreboard, the first graphic task we had. I felt we could have made it more natural and ethereal, like our later designs. The final result was just too much simple graphic design and not much else, although we did put a lot of time and effort making sure it was functional and that it properly simulated the bracket behaviors of match play… But overall, I would love to keep working on the scoreboard.

For the opening titles, I wanted to pump more detail into our graphic portion. I think it came out too simple for what it could have been. We had a really sick design for the linework that got pushed in a different direction. Conceptually, it was a better direction, but the design suffered… I mean, we’ve received a lot of positive feedback on our part of the sequence, but we definitely would’ve pushed it further if we got another shot at it …

Q: Any interesting Easter eggs in the graphics?

Yes indeed. We put a bunch of our personal icons in the UI’s, and our names all over the boardroom scene, on the projection, the light table, and when Marv shuts down, which won the award for outstanding achievement… Mr. dlew, our lead animator, got his name in a frame that’s legitimately visible and beyond, os12dlew forever and ever…

Q: Thank you for your time to do this interview.

My pleasure David, hopefully I made some sense of it all. TRON: Legacy was an amazing experience and we’re excited to share our design process with the community…

Want more GMUNK? He’s going to be speaking at FITC Toronto 2011 — May 2-4, 2011 in Toronto, ON, Canada. And the cool people at FITC are offering a 10% discount to Inventing Interactive readers. To get it, use the discount code “inventinginteractive”.  (They also gave away a pair of Festival Tickets to one lucky Inventing Interactive reader. But that raffle has ended.)

Related posts:

1. Movie: Tron
2. Process Videos
3. Interview: Neil Huxley (Art Director, Avatar)

Google Earth - Fly To

Over the weekend I finally got around to renting “Catfish.” I liked the movie a lot, despite the controversy about whether or not it’s a really documentary. As I watched it, I was especially fascinated by the way the filmmakers used interactive technologies to advance the narrative — and the degree to which audiences can accept these new references.

For example, rather than showing an airplane flying over a map, an old-fashioned film technique (lovingly copied in the Indiana Jones films), they used Google Earth’s “fly-to” feature. Elsewhere, Google’s Street View was used to show locations; SMS messages and Facebook pages show the evolution of a relationship; and car navigation systems add to suspense when driving down a dark road. They even remade the opening Universal logo using Google Earth.

The close-ups of screens – maybe because they’re light-sources themselves – them look super-crisp and inviting. In an interview, director Ariel Schulman commented on this, saying “You see every pixel off the screen. You just accept that this is the modern canvas, and there’s something beautiful about pixels.”

The awesome “Scott Pilgrim vs. the World” similarly used digital elements to help tell its story, except it used cues from gaming conventions rather than web and social media services.

Google Earth - Street View

Car navigation system

iPhone SMS

Facebook - messages

YouTube

Related posts:

1. Modernista! CP+B. Timtastic!
2. Windows Phone 7 Series
3. Serendipity and the Unexpected