UI REVIEW: OBLIVION

Interface Love




You can’t talk about slick futuristic UI without bringing up the movie Oblivion. When you watch Oblivion it becomes very apparent that an architectural mind is behind this movie. Joseph Kosinski, who studied architecture, directed his second film Oblivion after Tron Legacy. Kosinski worked with Producer Steve Gaub and Lead Interface Graphic Designer Bradley Munkowitz (better known as GMUNK), both of whom were also involved in the director’s previous project.

Ship HUD UI - Oblivion

GMUNK assembled a small team of super awesome graphic designers and motion artists that operated as an independent team working directly with Kosinski.

Jake Sargeant and Joseph Chan were brought on as graphic designers and David Lewandowski (Dlew), Navarro Parker and Alexander Perry did motion.

Oblivion Credits

It’s also good to mention the team over at Prologue films that was responsible for the title sequence, trailers and end credits. The team consisting of creative director Danny Yount , lead animator Taka Sato and animator Yongsub Song, did excellent work.

Oblivion Titles credits

Graphical Style

The graphical style of this movie is unified by the use of a clean and organized grid system. GMUNK and his team kept a consistency throughout the UI.

Control Panel UI - Oblivion

The thin sharp lines, clean compositions and the fact that everything aligns so nicely to the grid system makes everything feel futuristic and slick. When you take this and introduce it to the gorgeous set designs and the Bubble Ship, everything feels believable and you just want to get lost in this fantasy.

Analysis UI - Oblivion

Typography

The main UI font of this film is called Blender, one I’ve not seen used in sci-fi films before. The type designer Nick Thoenen described the font in an interview with gestalten.com, “The font is based on a rational approach following logical principles, and built on grid systems, yet they contain an emotional, human element.” To me that fits beautifully with the graphic design and narrative. A great choice.

Blender Bold Font - Oblivion

Below you can see the Blender font used on Jack Harper’s motorbike.

Blender Font - Oblivion

Another font which is shown on the light table is the main font of the film called DC TET Font, you can see it used here for titles .

Communication UI - Oblivion

DC TET Font was designed by Jens Gehlhaar & Dianne Chadwick.

The font draws clear inspirations from Futura (which ties together with the narrative since Futura is one of NASA’s official fonts) and Stop (a font created by Aldo Novarese who created the most famous sci-fi font Eurostile, used in films like 2001: A Space Odyssey, Moon, etc.)

DC Tet Font - Oblivion

Apart from being used in the UI the font is also used on the stations, drones and rigs.

DC-Tet-Font02 - Oblivion

There is a dot-matrix style font used on the light table that fits neatly in a dotted grid, not sure what the name of this font is or if it is custom made just for this shot.

Decryption UI - Oblivion

They also decided to use a unique font for the NASA pods, which makes narrative sense since it is not part of TET. The closest font I could find to this is Flexo, however its too rounded to be this unless they modified it.

Vitals UI - Oblivion

The flight recorder seems to have 3 different fonts, not entirely sure why they decided on having 2 separate fonts for for the numbers (one being an LCD font). The font used for the text “END OF RECORDING” looks like a custom pixelized version of “Blender”.

Portable Devices UI - Oblivion

What’s interesting about the NASA UI is that no one from GMUNK’s team mentions or takes credit for it. I was able to identify the font used for the telemetry to be OCR-A (The slanted G gave it away)

Cockpit UI - Oblivion

The 2nd monitor in the cockpit is in an entirely different font and I’m not sure what it is.

Cockpit UI - Oblivion

The marketing team over at Universal Studios decided to use a different typeface than DC TET for the poster. My suspicion is that they needed a font that supports localization. They took the font Neutraface and slightly modified it by cutting pieces out of some of the letters.

Oblivion Font - Oblivion

For the titles, however, Danny Yount (working for Prologue) took the “V” and made it wider to fit the TET station inside the letter. Kosinski’s only requirement was that the TET was represented in the titles and I think Danny pulled it off in a clever way.

Oblivion Title Font

William Hastings (working for Imaginary Forces) produced a logo for Oblivion that was used only for the trailer. What is not clear to me is whether or not the DC TET font was inspired by the explorations done by William or if it is just because he also drew inspiration from Futura. You can check out his explorations here. The logotype is originally based on Avante Garde Demi.

Oblivion Font Trailer - Imaginary Forces

Oblivion Trailer Logo

For the end credits and trailer typography Danny Yount took the DC TET font and made some modifications by cutting pieces from the letters.

DC-Tet-Modified-for-trailer Oblivion

His team did a great job animating the text breaking apart, appearing as if they are glitching in and out.

Trailer Font - Oblivion

Colors

Most of the UI in Oblivion uses low saturated blues and oranges, a typical color palette for sci-fi movie interfaces, most films default to this for color grading.

Desaturated colors:
Desaturated Colors - Oblivion

Analysis UI - Oblivion

They kept most of the colors desaturated and used saturated colors for warnings, alerts, important symbols/messages, zoning of dangerous areas, etc. Everything feels really well balanced, the choice to make all video feeds desaturated (with the exception of one of the surveillance feeds) helps to keep everything unified.

Saturated colors:
Saturated Colors - Oblivion

Control Panel UI - Oblivion

The Bubble Ship HUD has almost no colors, only when displaying messages or warnings or in combat mode.

Iconography, Shapes & Symbols

Dianne Chadwick created an iconic symbol for the TET, which is used for buttons and indicators and as the TET brand.

DC-Tet-Font03 - Oblivion

Map UI - Oblivion

Jake Sargeant made some slick icons for the light table.

Map UI - Oblivion

Iconography - Oblivion 2

GMUNK mentioned in an interview that the warning icon used on the bubble ship was originally designed as a skull and was replaced at the end with an exclamation mark.

Ship HUD UI - Oblivion

Motion

If you look at earlier work from GMUNK (which is clearly inspired by Chris Cunningham) you can see how his style had an influence on the animations. When the light table boots up it feels as if its glitching into existence with its fragmentation, flickering and speed.

David Lewandowski was responsible for the Light Table animations and boot up.

lighttable - oblivion

In a way the quick glitchy motion of the UI is trying to tell us that all is not right, this is especially apparent with the glitching that happens on the TET video feed.

Glitches - Oblivion

The motion has a feeling of paranoia and incompleteness, perhaps this comes from the fact that the alien being that is TET could not make a perfect fabricated environment. To me it also shows impatience, that TET does not care for flashy animations – the interface feels mechanical and goal driven.

signal - oblivion

– Navarro Parker (Bubbleship, DNA trace, Drone Vision, Morse Code)
– Joseph Chan (DNA trace, Fuel Meter, Morse Code)
– David Lewandowski (Light Table, Rogue Signal)
– Alexander Perry (Drone Vision, Skav Viewfinder, Gun Reticle)

The following 2 videos showcases all of the motion work that was done for this film.

All of this was done using Cinema4D and AfterFX, you can watch an interview with Navarro explaining how he used AfterFX for his work on Oblivion.

Storytelling

When you need to tell a story in a movie through futuristic UI then who better to cast than Tom Cruise. He’s been in movies such as Minority Report, Edge of Tomorrow, and the Mission Impossible series. Tom Cruise plays Jack Harper, his job is to repair drones. Vika (Andrea Riseborough) is responsible for operating the control tower.

Control Panel UI - Oblivion

Everything in the film is centered around the light table in the control tower. She uses the table for communication, surveillance and data analysis. The table helps drive the plot forward and watching Vika use smooth and natural touch gestures help us stay immersed in this fantasy.

Control Panel UI - Oblivion

Vika is able to control and monitor the harvesters, Scavs and Jack’s Bubble Ship. The light table is, for most of the day, Vika’s only form of communication with Jack, making it an important plot element.

Map UI - Oblivion

Her job is to also make sure Jack is safe, she has a bird’s eye view of all operations and can tap into any camera feed from the drones and Bubble Ship.

Surveillance UI - Oblivion

Both Vika and Jack have to protect the Harvesters from Scavs (short for scavengers), these are people who wish to destroy the harvesting operations.

Control Panel UI - Oblivion

When Jack is on the ground he uses his motorbike, which has radar UI to show him the way to his Scav target.

Cockpit UI - Oblivion

Jack uses his gun scope to search the area for signs of Scav activity.

Scope UI - Oblivion

The Scavs are always one step ahead though. I like that you are able to tell this is a Scav scope just because of the different graphical treatment.

Scope UI - Oblivion

When Jack rescues a mysterious woman from a crash site, the Scavs are watching.

Scope UI - Oblivion

Without any words we’re able to tell that this woman is alive thanks to the vitals UI.

Vitals UI - Oblivion

Jack has a beautiful heads up display giving him clear navigational information while he’s flying.

Ship HUD UI - Oblivion

No futuristic HUD is complete without a combat mode.

Scope UI - Oblivion

Or a warning for radiation zones.

Ship HUD UI - Oblivion

Vika is also the only one that communicates with Mission Control a.k.a the TET. She has to brief Sally (the “face” of Mission Control) on a daily basis and receive orders. Jack does not have any communication with Sally.

During the film Vika loses trace of Jack and tries to find him, I appreciated how this was all portrayed using interfaces. She gets permission to send out some drones to find Jack, they hunt him down by following traces of his DNA. All this was shown through the eyes of the drone. (Something I think was first made popular by The Terminator.)

Scan and Recognition UI - Oblivion

Speaking of Terminator…

Scan and Recognition UI - Oblivion

Jack manages to send encrypted signals back to Vika which she then decrypts. A beautiful example of UI storytelling.

Decryption UI - Oblivion

When Jack is making modifications on a drone he has what looks like a compacted version of the TET software running on a portable device.

Portable Devices UI - Oblivion

You can see the same scaled down software in his work area.

Analysis UI - Oblivion

The flight recorder is used to reveal an important plot point to Jack. The visual feedback on the LED screen confirms that the flight recorder is playing audio.

Portable Devices UI - Oblivion

For the flashback scenes where Jack and Vika are back on the NASA space shuttle, the cockpit interface looks realistic and true to the time.

Cockpit UI - Oblivion

I really enjoyed the work that was done for this film and believe it set a new standard for sci-fi movie interfaces. The director uses UI as a storytelling device, which is something I hope becomes a trend. It also shows a culture of viewers who are aware and comfortable enough with UI to understand what is going on in the movie through it.

This film is a must see for anyone who enjoys good design.