UI Review: Oblivion

You can’t talk about slick futuristic UI without bringing up the movie Oblivion.

Analysis UI - 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.

———————————————-
I have fully documented the UI of this film with screenshots and videos in seperate posts and you can view them by following this link:

https://ilikeinterfaces.com/tag/oblivion/

UI Review: Moon

Moon

Moon is a cult classic. Directed by Duncan Jones, Moon stands out as one of those sci-fi films you just have to watch every now and then. All the UI elements in this movie are beautifully consistent and fits well in the clean and futuristic yet very lived in environment.

Countdown UI - Moon

A lot can be said for the fantastic work Gavin Rothery did as the Head of graphic design/Pre-vis and Motion on the film. The team and budget for Moon was really small and still they managed to release a film that’s right up there with Sunshine, Blade Runner and 2001: A Space Odyssey.

Moon Credits

Graphical Style

The style of the UI in this film seems to contrast beautifully between feeling modern and minimalistic, showing it’s retro influences, with no added bells and whistles or random data flashing across the screen.

The graphical style makes the UI feel believable and current but weirdly retro-futuristic, this all adds to the timelessness of the movie.

Portable Devices UI - Moon

Typography

The typography used in this film is not unfamiliar to the Sci-fi genre.

All interfaces use Microstyle Bold Extended, which is practically the same as Eurostile Bold Extended. Eurostile is used in films like 2001: A Space Odyssey, Terminator Salvation, District 9, The Incredibles and Wall-E.

MICROSTYLE--BOLD-EXTENDED

Moon

In the image below I do a test with Microstyle to see if it is indeed the same font:

notofficial

Bank Gothic Bold is used in the beginning titles, again a very common font used in sci-fi films and quite close to Eurostile/Microstyle

BANK-GOTHIC-BOLD

titletest

OCR-A is a lovely monospaced font that gives the sense of being part of a computer system without looking too much like Terminal or LCD fonts. This font is actually one of the first optical character recognition typefaces. It’s used only once in the film in the beginning establishing shot of the Moon base.

OCR-A

moon

Colors

Communication UI - Moon

The choice of a muted and simple monochromatic color pallette against black fits really well with the Moon base environment and feels very systemic and futuristic. All colors are flat which helps to give the UI a clean and simple appeal.

Iconography, Shapes & Symbols

The images used throughout the station and in the UI are what shape the character of the interfaces and the station. The simple angular and square shapes and rounded corners feel like decals that belong in a large factory. This infographic treatment inside of the UI gives the feeling that this system is corporately owned.

Moon

The symbols might not always serve a particular purpose but they help break apart the layout and create visual appeal. Lines are also cleverly used to give the screens more structure and to create separation.

Moon

And then you get Gerty the friendly yet creepy artificial intelligence which is represented with emoji iconography and gradients… what the hell 😀 Strangely enough it works though!

Motion

The motion of the screen elements is visually consistent with the graphic design, everything is simple and straightforward. Simple fading animation loops are used throughout and when information changes on screen it happens instantly.

The animations all ease in the same way and pop near the end, making even something as simple as a fading loop have life to it.

Storytelling

What I enjoyed most about the UI is that every piece was carefully thought out. The leading role in this film (Sam Rockwell) is constantly interacting with the ships interfaces, used to convey key storytelling points in the film or to help sell the idea of the sci fi fantasy.

Cockpit UI - Moon

We’ll forgive them for those moments when Sam uses a Windows keyboard 😉

Moon

Sam only has 2 channels of communication during the film, his AI colleague Gerty and the communications panel where he receives messages from the corporation and his wife but has no way of sending messages back. I wont spoil it for you go watch the film! The videos played back on these screens play a really important role in showing the viewer how much he wants to go home.

Communication UI - Moon

Gerty is never far away, ready to give Sam emotional support. He talks to him when he feels lonely, his simple expression changes allow for Sam to feel like he is speaking to a feeling being. But let’s never trust AI on a space station, shall we? We should know better.

Moon

As the movie progresses Sam uses the video archive to reveal key plot points.

Security UI - Moon

One of the most emotional parts of the film is when Sam makes a phonecall to earth to try and reach his wife and his daughter answers the phone. He puts his palm over the video camera so that he cannot be seen. Everything about this was just beautifully done.

Portable Devices UI - Moon

A countdown timer is used to help build the suspense of the movie, it is shown twice in the film to help remind the audience that the rescue unit Eliza is on its way.

Countdown UI - Moon

It’s important not to forget that this base is not just where Sam works but it is also where he lives for a very long time, he also needs some entertainment.

Moon

Sometimes the UI can give friendly reminders to Sam like that he should drive carefully. I’ll let you figure out what happens next 😀

Cockpit UI - Moon

These medical diagnostic screens help to shape the medical bay environment.

Vitals UI - Moon

This bulletin board is used in the Moon base to provide information on the condition of the harvesters on the Moon that collect a special moon-dust which is then converted into energy cells that is transported back to earth. It is important for Sam to have good visibility over the base operations and this screen is used throughout the movie.

Moon

Definitely check out this film if you can, it’s a Sci-fi gem and the UI is gorgeous!

———————————————-
I have fully documented the UI of this film with screenshots and videos in seperate posts and you can view them by following this link:
https://ilikeinterfaces.com/tag/moon/