Marvel’s just-released Avengers: Age of Ultron has some pretty cool looking UI design in it. David Sheldon-Hicks, creative director and founder of Territory, the firm that did all the UI work for the film, recently took the time to talk about their work in the film. He also shared a some early sketches, behind the scenes thinking, and a couple interface designs that didn’t make the film’s final cut.
But first, let’s start with a glimpse at all the UI work in the finished film:
Q: David, Can you talk about the background of the project and the initial creative brief?
David Sheldon-Hicks: We pretty much started on Avengers: Age of Ultron straight after completing Guardians of the Galaxy. There was no brief at the very beginning – production designer Charlie Wood brought us into the project very early on while the script was still being developed, so we were able to make the most of suggesting concepts that could be told or enhanced through the use of UI. As we started pulling together mood boards and seeing all the amazing concept work from Charlie’s team, a script came through.
The script and any work by the art department are normally our basis of a brief. Art director Alan Payne, who was overseeing graphics, ensured that what we were doing tied in with everything else.
Both Charlie and Alan had clear ideas about how they wanted us to push the medium in several ways. So, as this film has a darker, more serious tone to the previous film, we were encouraged to explore ways to bring real world technology and content together with the more stylized UI of the Marvel universe. Examples such as MRI scans, ECG and microscopic views of plant cells, we used real world content but surrounded it with a futuristic UI styling.
Reference images of MRI scans and DNA.
Engineering schematics in Stark’s screens:
Also, as director Joss Whedon was digging deeper into each character within the film, finding the human depth within them and also in the chemistry between each hero, it was important to his vision that the UI ‘brand’ each character, and express each one’s personality and interests in digital form.
Q: How much did you have to adhere to previous UI work from earlier Avengers or other Marvel films?
To a degree we imposed our own restrictions, partially set up by the quality bar already in place from other Marvel films. We knew that Iron Man’s Heads Up Display would stay true to previous films, but probably have an upgrade. Other than that we stuck to key colourways for each character (green UI for Banner was a certainty!) but technically and visually Joss and Charlie wanted to explore new systems.
In some cases, we were tasked with creating screens for entirely new characters. Dr Cho, springs to mind as someone who hadn’t been seen before so our only brief was to create a series of incredibly advanced medical screens and systems.
Even characters from the original film needed their UI to be completely reconsidered due to the tonal shift of the film. This was helped by the fact that Stark Tower was pretty much destroyed in the previous film, so, apart from the Stark brand, we developed new UI from scratch.
Q: What was it like working on a Joss Whedon film? His work has a cool intelligence and humor to it. How do you think that was expressed in his directions or in the UI work that you created?
Joss wanted to make a film about the human side of the super heroes and he was very clear that he wanted a fresh sense of reality to underpin the cool ‘near future’ technology. So we looked at each character’s role and what their technology needed to express, and we researched accordingly. So for example, in Dr Cho’s case, we researched advanced clinical diagnostic technology, the latest medical scanning techniques and lab technology and incorporated references from those to make the screens in her lab feel authentically clinical.
Developing the chest screen…
Working with scan data…
Adding elements to the chest screen…
Work in progress…
Banner is a scientist exploring the effects of plants on our biology and we looked at plant cellular structures, spectrographs and chemistry, in general. We explored how all of this real world content could be housed within our stylized Marvel UI, and it was exciting to see these two formats collide, offering an interesting aesthetic and narrative dynamic. We’re often pulled between real world believability and creating entertaining narrative designs in our work, but Charlie and Joss’s direction on this allowed us to push forward with a fresh and informed set of designs.
We went through a similar process with all the other characters and set environments. For the alien technology, which littered New York at the end of the first film, the sets needed to reflect a level of super advanced alien technology with real world interface. So again we mashed together styles/paradigms to discover a new solution. Fortunately we’d just finished on Guardians of the Galaxy, so we’d already explored what alien technology could look like in the Marvel universe. Now we were getting to merge this with more human software.
In Guardians of the Galaxy we treated data in an organic way, letting the randomness of raw data, 3d scans and image manipulation show through. There’s a beauty in showing the defects in which a machine picks up when scanning the analogue world. So when considering the alien aesthetic we embraced these ideas of imperfect data and mixed it with a hard military UI style.
Q: How did you approach different UIs or interaction designs for each of the characters?
We wanted crafted technology, UI and tools that expressed each individual’s unique characteristics in digital form. Alan kept us updated on the latest concepts so that we were surrounded by visual material being developed for the film. We were also constantly checking back in on the script to pick up on nuances of the characters. We’d also pick through all the old films and comics thinking about each character’s background and what back-stories could we build into the screens. For example, maybe Stark has a little side project exploring building engineering designs or Banner is looking at some white papers on a recently discovered orchid in a rainforest.
Reference images of building engineering for Stark’s projects.
With film visuals, especially screens, we have to describe an objects purpose in a moment. In reality, a lot of that information would be shown is in Excel spreadsheets, graphs and emails. While some of our work uses this, it doesn’t translate well into visual storytelling on the big screen – it doesn’t tell the viewer much, it certainly doesn’t say Banner is looking at cellular plant life, or chemistry experiments or Stark’s engineering a new satellite network. We have a requirement to be overt with the images we show. It’s this demand of brief that means we have to work hard to balance out the work with other contextual details to build some authenticity back into it. This is achieved not on a screen by screen basis, but across a dozen screens on the set. Two screens may blatantly show an Iron Man schematic to help place the set as owned by Stark, the other screens however may show non-descript blueprints, motion control software for a new 3d router or an aerodynamic simulation. We’re always trying balance descriptive character displays with deeper thinking around the character’s UI demands and activities.
Charlie and Alan really wanted to mix up styles on each set. On other movies Territory has worked on we tend to keep consistent colour palettes and styles on each set; the thinking being that the character in question has a singular operating system. In early research we looked at NASA control rooms, science labs and medical research facilities and in most cases the screens found in the real world were a hotch potch of technologies and styles. The art department encouraged us to do the same on the set, so we started out with UI specific to each character, but when it came to placing screen on-set we mixed things up a little to play into the idea of multiple technologies.
Q: Were there any ideas or designs that didn’t make it into the final film?
Lots! From my point of view the first few rounds of mood board development threw up lots of interesting references. Architecture is a particular favourite reference of mine. The interlinking of 3 dimensional spaces that architects explore offers plenty of references for UI explorations. A lot of these more experimental ideas in our moodboards didn’t make it through in their purest form but they do appear in flourishes throughout our work.
We had entire sets that didn’t make it into the final cut. The Leviathan screens were one of the more developed series of designs that didn’t make it in. There were lots of ideas that had to evolve along the creative journey, so some were dropped or become something new. This happened with some initial terrain screens we did for Cho, which then became screens for another character.
The following Leviathan screens didn’t make the final cut:
Q: Often film/fantasy UIs need to use existing UI conventions, often simplified, so that audiences can understand them quickly and not get distracted. Are there any new and innovative UI designs in the film that you think might be applicable in future real-world interfaces?
One concept we explored and wanted to develop further was implemented on Cho and Banner‘s UI. It was the idea that each screen on the set was a window onto a much larger 3d canvas, and each screen was seeing a particular part of a larger project.
In the first film the UI had explored collaborative working. We’d see Banner and Stark working on different glass screens, chatting and sharing content and ideas, and we were seeing technology being used as an expression of the characters’ professional dynamic.
We liked the idea that a project could essentially be one large 3d matrix, with each screen viewing one small part of it. A user could go to this window and navigate around it in 3d space, a bit like Google Maps. Maybe another user joins at another screen and has a more macro view of the project and also starts working on it. I think as we become more networked, with projects in the cloud, collaborative project workflows will become increasingly important in what we do. In a film about teamwork it seemed to be quite apt. I like the idea that UX is being built around not just an individual user but around a team. In film we’re constantly working out ways to work efficiently as a team; often our software is focused on the individual artist but we end up creating work-arounds to make the most of a team-based project. In that respect, crafting a collaborative UX for the film is inspired by our own hopes for a dynamic workflow.
Notice how, in the images below, Banner & Cho’s screens mirror each other:
(Image © 2015 Marvel Studio)
Q: It sounds like an intense and epic project. What was the project’s duration? And can you talk a bit about the size of the team and their roles?
It was epic! And our biggest project to date. Each set had multiple rooms,
The project took about a year, beginning in Nov 13. The team grew from 6-15, on average it was 10 and included creative director, art director, motion graphics designers, 3D artists, animators. There were 11 sets, each with multiple rooms, making this Marvel’s biggest production to date at Shepperton Studio.
To give you an idea of the number of screens on each set, Dr Cho’s lab featured 32 screens, Star and Banners labs both had 20 screens each, the Quinjet had 18 screens. The Fortress Command centre had 55 screens, and the Leviathan rooms had 32.
We delivered over 200 screens/animations in total, (not including iterations which amounted to over 600 files). There are 80 minutes of unique animations, each one approx 20-30 secs long, which seamlessly loop.
Fantastic work. Thank you.
