Interfaces (Part 2): More Fictional UIs

As seen in my previous post on interfaces, I’m in the constant lookout for great fictional UIs.

This time around, I present to you the work of GMUNK and Nawaz Alamgir.

GMUNK (Bradley G Munkowitz) is a seasoned veteran in the VFX world. His name is usually the first to come up when referencing anything related to motion graphics. His work encompasses a wide range of disciplines within motion, including title design, music videos, advertising, and UI animation. It is always a pleasure to admire GMUNK’s incredibly detailed interfaces.

Pictured below are some screens for Oblivion:

01 - OBLVN Light Table UI_02_960

01 - OBLVN Light Table UI_06_960

01 - OBLVN Light Table UI_07_960

01 - OBLVN Light Table UI_12_960

02 - OBLVN Bubbleship UI_09_960

03 - OBLVN HUD GFX_03_960

03 - OBLVN HUD GFX_06_960

The following screens pertain to Nawaz Alamgir, a motion graphics designer based in London, UK. His work resembles a mix between Mark Coleran and GMUNK. Nonetheless, the aesthetic quality of Alamgir’s interfaces is top notch and are some of the best examples of fictional UIs I’ve ever seen.

I’m quite impressed by the amount of work on each UI screen. The overall typographic grid and layouts within these interfaces display a clean and sophisticated look while maintaining a stark tone of efficiency. Big props to Nawaz for these beautiful screens.

aca5cc97722e412423558caeb1ca3e86

10d71300d37d6aae2013eaf8e14abf1c

63ebf50215cdd582064163bbc99b65bd

4e9416a18edbb3f5bbbf9d449527e15c

5f0c2beb08f914bc926c52fe46bc7123

9a28293f4fcd1d1b6d1eacf4c5cd8be8

Below is a pretty interesting time-lapse video of Alamgir’s painstaking UI process:

FUI – Echo – Timelapse of Data Screen from Nawaz Alamgir on Vimeo

Share this post:
FacebookTwitterLinkedInEmail

Interfaces (Part 1): The Art of Screen Design

In the real world, Graphic User Interfaces (GUI) are meant to be simple, usable, and intuitive. However, GUIs on the silver screen are often made to depict an exaggerated view of the action and are usually designed to thrill the audience with suspense.

Jurassic Park (1993)

JP_1
Screenshot from the Jurassic Park DVD (Universal)

For some strange reason, interfaces have always fascinated me, especially the ones I see in movies… and I always wondered who the hell was responsible for them in all of the movies I’d watch. Thus, the main reason for this post is to uncover the obscure art of making interfaces for film. I’ve included only a couple of movies from the past and present of which I thought had strong screen design but I have also included some links at the end of the article for you to learn more on the subject.

JP_2
Screen capture from the Jurassic Park DVD displaying a weather tracking system

JP_3
Dennis Nedry’s sabotage being executed

JP_6
“It’s a UNIX system… I know this!”

I always thought that the 3D UNIX interface depicted in the final minutes of the movie was a fake one (refer to the picture above). However, upon doing some research, I stumbled upon a nice little discovery; apparently, the GUI was a real one. The file system interface, File System Navigator (FSN), was an actual demo that had been released by Silicon Graphics back in the early 90s and it ran under SGi’s IRIX platform:

What’s interesting about watching movies while having obsessions with GUIs is that sometimes I often catch little mistakes here and there (and I’m sure we all do). There is a scene where Dennis Nedry (the chubby guy from Seinfeld) is talking to someone near the dock during a thunderstorm. I could clearly see that it wasn’t a live feed but a .mov QuickTime movie being played back.

JP_5
Here you can clearly see that the movie is a Quicktime .mov being played and synched with the dialogue from Dennis Nedry (Wayne Knight)

Avatar (2009)

I should say that I haven’t really gone out to the movies lately, probably due to the fact that Hollywood movies don’t really entice me all that much anymore. However, Avatar was a must see for me because I’m a self-proclaimed 3D whore. The movie itself was not horrible but I didn’t really care much on the storyline; the interfaces (and 3D) were the real attraction for me.

avatar_1
Screenshot of the Blu-ray edition of Avatar (20th Century Fox)

After the half-hour mark, I was in heaven; watching how the interfaces worked in true 3D was mind-blowing. Everything was beautifully executed, from the graphics placed in 3D space on the webcam to the tablets and rotating computer workstations.

avatar3
Avatar: Webcam transmission — Note: The typography and graphic elements of the webcam transmission live on 3D space.

avatar2
Avatar: I was in awe after drooling over this 3D holographic interface

The genius behind all of the work done for Avatar is Neil Huxley, an art director from the visual effects house known as Prime Focus.

The overall art direction for this movie is obvious. Since most screen designs in this movie are within the context of a military operation, they were rendered to resemble military interfaces such as Heads Up Displays (HUD) and Digital Display Indicators (DDI) found in modern military aircraft.

FA18DDI_a-778x1024
Real-world: DDI displays showing the avionics of an F/A-18 under various functions

F-18_HUD_gun_symbology
Real-world: Heads Up Display (HUD) from an F/A-18C Hornet

avatar4
Avatar: DDI displays of the “Scorpion” VTOL aircraft

avatar7
Avatar: HUD inside main aircraft

avatar8
Avatar: Rotating HUD workstation

avatar9
Avatar: Computer interface

There’s a great interview on Neil Huxley over at Inventing Interactive explaining the rationale and process. You can read more about him here:
Neil Huxley Interview

Additional notes

There’s a lot of great interface designers out there and I might as well point out some of the most recognized faces out there.

Imaginary Forces was responsible for the “Machine Vision” interface design seen in Terminator: Salvation. While I haven’t seen this movie yet, I can tell that a great amount of detail and effort was put into the screen design of this movie.

terminator
Machine Vision in Terminator: Salvation

I remember when Mark Coleran’s reel appeared for the first time in Motionographer, it spread like wildfire across social networks. Coleran is a celebrity figure when it comes to screen design. His interfaces are extremely intricate and detailed and it’s a shame that they usually show them for a couple of seconds in the movies they appear in.

Coleran Reel 2008.06 HD from Mark Coleran on Vimeo.

col4

col2

col1

col3

You can read an interview of Coleran’s process and techniques here:
http://motion.tv/2009/04/11/mark-coleran-on-screen-design/

I hope you enjoyed this article. I will be writing another article concerning other types of interfaces soon. Stay tuned.

Share this post:
FacebookTwitterLinkedInEmail
|