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.
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.
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.
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.
In the image below I do a test with Microstyle to see if it is indeed the same font:
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
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.
Colors
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.
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.
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.
We’ll forgive them for those moments when Sam uses a Windows keyboard 😉
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.
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.
As the movie progresses Sam uses the video archive to reveal key plot points.
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.
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.
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.
Sometimes the UI can give friendly reminders to Sam like that he should drive carefully. I’ll let you figure out what happens next 😀
These medical diagnostic screens help to shape the medical bay environment.
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.
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:
http://ilikeinterfaces.com/tag/moon/
