# Fantasy User Interface (FUI) & Sci-Fi HUD

> Fantasy user interfaces are the screen graphics of films and series: computer screens, holograms and helmet HUDs made to be watched for a few seconds, not used. From Minority Report and The Bourne Identity (2002) to Marvel's Iron Man HUDs, Mark Coleran, Cantina Creative and Territory Studio set glowing cyan and amber hairlines on black or clear glass. The screens carry concentric rings, targeting brackets, wireframe models, maps and dense micro-text in tracked capitals and monospace, packed to the edges around an open centre. Everything moves, and each screen has one big 'read'.

- Period: 1999–present
- Where: North America, Western Europe, Global / networked
- Origin: Specialist screen-graphics designers working for Hollywood and London productions. Mark Coleran designed film screens from the late 1990s (he started on Entrapment, 1999) until 2007, from Tomb Raider and Spy Game to The Bourne Ultimatum; he said he had always loved the 'geometric and mechanical' screens of Dr Strangelove and 2001, which 'work to tell a story'. John Underkoffler, the film's science and technology adviser, designed the gestural interface of Minority Report (2002). Cantina Creative made Marvel's Iron Man HUDs from Iron Man 2 (2010), with Jayse Hansen leading the Mark VII HUD for The Avengers (2012). GMUNK led the screens for Oblivion, and Territory Studio (London, 2010) worked on films from Prometheus to Blade Runner 2049. Its roots are the Eurostile screens of 2001: A Space Odyssey (1968) and the cockpit and command-centre displays of later science fiction; Territory's David Sheldon-Hicks points to Ron Cobb's iconography for Alien. Its nearest relative in the atlas is 1990s techno-futurism (The Designers Republic's identity for the game Wipeout, 1995), which also used interface frames and invented corporate branding. Because the designers trace the work to film screens rather than to that scene, techno-futurism is listed as an influence, not the parent
- Branch: Digital native
- Also known as: FUI, Fictional user interface, Film user interface, Screen graphics, Sci-fi HUD, Movie UI
- Page: https://stylogeny.com/styles/fantasy-ui/

## Use it with care

FUI is built to be watched for seconds, not used. When the look moves into a real product, game or dashboard, keep the single read, size micro-text and contrast to WCAG rather than to a cinema screen, and keep flashing scans and blinking alerts to three flashes or fewer per second. Never present invented data as real data. Its targeting reticles, facial recognition and surveillance feeds come from military and intelligence imagery, so think about what they glamourise before using them on civilian or campaign work.

## How it works

- Give every screen one read: a single word, number or alert (MATCH FOUND, a countdown, a red warning) that the audience grasps in two seconds. Treat everything else as texture around it: pack the edges and keep the centre and much of the black field clear.
- Build from instruments: concentric rings and arcs, tick-marked scales, targeting brackets, bar gauges, radar sweeps and radial network maps, all drawn in hairlines.
- Draw in light on darkness: usually one luminous hue (cyan, blue or amber) on black or clear glass, keeping red for alarms.
- Fill the edges with plausible micro-data in small tracked capitals and monospace: coordinates, timecodes, code and readouts. Tie it to the story point rather than setting random text.
- Stack the interface in depth: translucent panes, holographic layers and wireframe 3D models float between the actor and the camera.
- Animate everything in time with the performance: lines draw on, numbers count, rings rotate and scans sweep.

## Its design choices

Defining choices make the style, characteristic ones are usual, occasional ones turn up now and then.

### Layout & composition
- [Radial & concentric](https://stylogeny.com/design-choices/radial-and-concentric/) (defining)
- [Framed panels](https://stylogeny.com/design-choices/framed-panels/) (characteristic)
- [Central symmetry](https://stylogeny.com/design-choices/central-symmetry/) (occasional)
- [Modular grid](https://stylogeny.com/design-choices/modular-grid/) (occasional)
- [Isolated object](https://stylogeny.com/design-choices/isolated-object/) (occasional)

### Space & hierarchy
- [Layered information](https://stylogeny.com/design-choices/layered-information/) (defining)
- [Horror vacui](https://stylogeny.com/design-choices/horror-vacui/) (characteristic)
- [Illusion of depth](https://stylogeny.com/design-choices/illusion-of-depth/) (characteristic)
- [Single focal point](https://stylogeny.com/design-choices/single-focal-point/) (characteristic)
- [Extreme scale contrast](https://stylogeny.com/design-choices/extreme-scale-contrast/) (characteristic)
- [Repetition & rhythm](https://stylogeny.com/design-choices/repetition-and-rhythm/) (characteristic)

### Typography
- [All caps](https://stylogeny.com/design-choices/all-caps/) (characteristic)
- [Monospace](https://stylogeny.com/design-choices/monospace/) (characteristic)
- [Wide letterspacing](https://stylogeny.com/design-choices/wide-letterspacing/) (characteristic)
- [Geometric sans](https://stylogeny.com/design-choices/geometric-sans/) (characteristic)
- [Grotesque & neo-grotesque](https://stylogeny.com/design-choices/grotesque-and-neo-grotesque/) (occasional)

### Colour
- [Dark ground](https://stylogeny.com/design-choices/dark-ground/) (defining)
- [Fluorescent & neon](https://stylogeny.com/design-choices/fluorescent-and-neon/) (characteristic)
- [Monochrome](https://stylogeny.com/design-choices/monochrome/) (characteristic)
- [Limited spot colours](https://stylogeny.com/design-choices/limited-spot-colours/) (occasional)
- [Gradients](https://stylogeny.com/design-choices/gradients/) (occasional)

### Form & shape
- [Geometric primitives](https://stylogeny.com/design-choices/geometric-primitives/) (defining)
- [Rectilinear](https://stylogeny.com/design-choices/rectilinear/) (characteristic)
- [Angular & zigzag](https://stylogeny.com/design-choices/angular-and-zigzag/) (characteristic)
- [Pictogram](https://stylogeny.com/design-choices/pictogram/) (occasional)

### Surface & texture
- [Frosted glass](https://stylogeny.com/design-choices/frosted-glass/) (occasional)
- [Glitch](https://stylogeny.com/design-choices/glitch/) (occasional)

### Ornament
- [Rules & bars](https://stylogeny.com/design-choices/rules-and-bars/) (defining)
- [Borders & frames](https://stylogeny.com/design-choices/borders-and-frames/) (characteristic)
- [Abundant decoration](https://stylogeny.com/design-choices/abundant-decoration/) (characteristic)

### Imagery
- [Diagram & data](https://stylogeny.com/design-choices/diagram-and-data/) (defining)
- [3D render](https://stylogeny.com/design-choices/3d-render/) (characteristic)
- [Treated photography](https://stylogeny.com/design-choices/treated-photography/) (characteristic)
- [Icons & pictograms](https://stylogeny.com/design-choices/icons-and-pictograms/) (occasional)

### Medium & production
- [Motion & broadcast](https://stylogeny.com/design-choices/motion-and-broadcast/) (defining)
- [App & OS interface](https://stylogeny.com/design-choices/app-and-os-interface/) (characteristic)

### Tone & intent
- [Technological & futurist](https://stylogeny.com/design-choices/technological-and-futurist/) (defining)
- [Authoritative & institutional](https://stylogeny.com/design-choices/authoritative-and-institutional/) (characteristic)
- [Rational & objective](https://stylogeny.com/design-choices/rational-and-objective/) (occasional)

Avoids: Floral & vegetal, Paper & letterpress bite, Script, Pastel, Earth & mineral, Rounded & pill, Warm & approachable, Ironic & self-aware, Light ground

Palette: #04070b, #0b2233, #38d4ff, #e4f6ff, #ff9d2e, #ff3b30

Typefaces: Squared, extended sans in the line of Microgramma (Aldo Novarese & Alessandro Butti, 1952) and Eurostile (Novarese, Nebiolo, 1962), science fiction's screen face since the Eurostile Bold Extended displays of 2001: A Space Odyssey (1968), Blender (Nik Thoenen, 2003), an angular geometric sans that team member Navarro Parker named as the UI font of Oblivion (2013), Monospaced system and code fonts for scrolling readouts, coordinates, timecodes and data streams, Small capitals in a square or extended sans, tracked wide for labels, status lines and warnings

Known for: Minority Report (dir. Steven Spielberg, 2002): the gestural interface in which Anderton 'scrubs' images across a transparent screen. Science and technology adviser John Underkoffler designed most of it after Spielberg asked for something 'like conducting an orchestra'; Mark Coleran, film screen graphics: The Bourne Identity (2002; direction, design, motion and insert-unit direction), Blade II (2002), Mission: Impossible III (2006), Children of Men (2006) and The Bourne Ultimatum (2007). He is widely credited with naming FUI, a credit he said he was not sure he could take; Cantina Creative (creative director Stephen Lawes, HUD supervisor Venti Hristova) with Jayse Hansen, lead designer of the Mark VII HUD: the Iron Man Mark VI and Mark VII helmet HUDs and the Helicarrier glass screens for Marvel's The Avengers (2012). They were designed for stereo, so even the micro-text could be read; Bradley 'GMUNK' Munkowitz and team, screen graphics for Oblivion (2013): Vika's interactive light table, the Bubbleship cockpit and the HUDs of the film's machines and weapons. The brief asked for 'functionality and minimalism' in a bright, unified palette; Territory Studio (London, founded 2010; co-founders David Sheldon-Hicks and Nick Glover), screen graphics for Prometheus (2012), Guardians of the Galaxy (2014) and the NASA mission-control screens of The Martian (2015); Territory Studio, Blade Runner 2049 (2017): over 100 playback assets for 15 sets, deliberately worn, with screen burn, ghosting, colour degradation and glitches in place of clean holographic glow; Territory Studio's interactive Mission Control installation, rebuilt from The Martian across eight screens, in the Barbican's Into the Unknown: A Journey Through Science Fiction (London, June 2017, then touring); Nathan Shedroff & Christopher Noessel, Make It So: Interaction Design Lessons from Science Fiction (Rosenfeld Media, 2012), and Noessel's companion site scifiinterfaces.com

## Where it comes from, and what it’s close to

- Influenced by: [Techno-Futurist Graphics](https://stylogeny.com/styles/techno-futurism.md) (1986–2002)
- Influenced by: [Bitmap & Pixel Graphics](https://stylogeny.com/styles/bitmap-pixel.md) (1977–1995)
- Influenced by: [International Typographic Style](https://stylogeny.com/styles/swiss-international.md) (1950–1975)
- Alike in its design choices: [Dark Tech Minimalism](https://stylogeny.com/styles/dark-tech-minimalism.md) (2019–present), 40% alike
- Alike in its design choices: [Art Deco](https://stylogeny.com/styles/art-deco.md) (1910–1939), 39% alike
- Alike in its design choices: [Demoscene Graphics (Cracktros, Demos & Text-Mode Art)](https://stylogeny.com/styles/demoscene-graphics.md) (1985–present), 37% alike
- Alike in its design choices: [Front-of-Pack Warning Octagons (Latin American Food Warning Seals)](https://stylogeny.com/styles/front-of-pack-warning-octagons.md) (2016–present), 34% alike
- Alike in its design choices: [Acid Graphics / New Ugly](https://stylogeny.com/styles/acid-graphics.md) (2016–present), 33% alike
- Alike in its design choices: [Analog Horror Graphics](https://stylogeny.com/styles/analog-horror.md) (2015–present), 32% alike

## Sources

- Kirill Grouchnikov, 'The craft of screen graphics and movie user interfaces – conversation with Jayse Hansen', Pushing Pixels, 1 June 2012, pushing-pixels.org/?p=7447 (Mark VI HUD 'designed for Iron Man II' and the Mark VII for The Avengers, stereo micro-text, Circos radial network maps, glass screens 'with a lot of negative space, or lots of black', Coleran as Hansen's introduction to film screens)
- ProVideo Coalition / Adobe, 'Marvel's The Avengers: Taking the HUD to new heights' (2012), provideocoalition.com (Cantina Creative team: Stephen Lawes, Venti Hristova, Wes Sewell, Jayse Hansen; Mark 7 HUD radial panels, A-10 pilot consultation, Helicarrier glass screens)
- Michelle Gallina, 'Cantina Creative on Designing HUDs for Movies and Real Life', ProVideo Coalition, 28 May 2024, provideocoalition.com (Cantina's HUD for Tony Stark began with its visual effects work on Iron Man 2)
- Wikipedia, 'Iron Man 2' (US release 7 May 2010)
- Kirill Grouchnikov, 'Pragmatic futurism and screen graphics – interview with Mark Coleran', Pushing Pixels, 21 December 2021 (started on Entrapment; left film work in 2007; Spy Game 2001; Bourne Ultimatum; loved the 'geometric and mechanical' screens of Dr Strangelove and 2001; 'I'm not sure I can take credit for that name, even though I'm given credit for it')
- Wikipedia, 'Entrapment (film)' (dir. Jon Amiel, US release 30 April 1999)
- Mark Coleran portfolio archive, 'FUI' gallery, pushing-pixels.org/coleran/gallery-category/fui/ (The Bourne Identity, Blade 2, Mission Impossible 3, Children of Men, The Bourne Ultimatum, with roles)
- Christopher Noessel, 'An Interview with Mark Coleran', scifiinterfaces.com (Tomb Raider to Bourne Ultimatum; Children of Men screens; 'He also coined the term FUI')
- Wikipedia, 'Minority Report (film)' (John Underkoffler designed most of Anderton's interface; 'like conducting an orchestra'; premiere 17 June 2002)
- Motionographer, 'Bradley G Munkowitz: Oblivion Screen Graphics', 19 April 2013, motionographer.com (light table, Bubbleship, HUDs; brief for functionality, minimalism and a bright, unified palette)
- ProVideo Coalition, 'HUD and GUI graphics in Oblivion', provideocoalition.com (Navarro Parker: the Oblivion UI font is Blender)
- HUDS+GUIS, 'Oblivion – Interface Design', May 2013, hudsandguis.com/2013/05/02/oblivion-interface-design/ (GMUNK's dot grid 'to hang all the design elements on')
- Territory Studio, About page and project pages 'Blade Runner 2049' and 'The Martian: On Set in Mission Control', territorystudio.com (co-founders Nick Glover and David Sheldon-Hicks; 15 sets, 100+ assets, screen burn and glitches; Barbican Into the Unknown installation, June 2017)
- Christopher Noessel, scifiinterfaces.com, tag 'Territory Studio' (Prometheus, The Martian, Avengers films, Ad Astra; studio begun 2010)
- Wikipedia, 'Territory Studio' (established 2010, London; Prometheus, Guardians of the Galaxy, Ex Machina, Blade Runner 2049, The Martian)
- Kirill Grouchnikov, 'The craft of screen graphics and movie user interfaces – interview with David Sheldon-Hicks of Territory Studio', Pushing Pixels, 7 August 2014 (Ron Cobb's 'universal language and iconography for the original Alien movie')
- Nathan Shedroff & Christopher Noessel, Make It So: Interaction Design Lessons from Science Fiction (Rosenfeld Media, 2012), ISBN 978-1-933820-98-9 (Open Library record)
- Dave Addey, '2001: A Space Odyssey', Typeset in the Future, 31 January 2014, typesetinthefuture.com (Eurostile Bold Extended on the Pan Am flight deck and HAL 9000 screens)
- Wikipedia, 'Eurostile' (Microgramma, Novarese & Butti 1952; Eurostile, Novarese, Nebiolo 1962; use in science-fiction film)
- Typewolf, 'Blender' (Nik Thoenen, 2003)
- Wikipedia, 'Wipeout (video game)' (1995; 'visual identity, graphic design, logos, and typography made by The Designers Republic')
- W3C, Understanding WCAG 2.2: Success Criterion 2.3.1 Three Flashes or Below Threshold

---

From Stylogeny (https://stylogeny.com/), an atlas of graphic-design styles by Van Riel Online Services. How it is made: https://stylogeny.com/about/. Cite as: Stylogeny, “Fantasy User Interface (FUI) & Sci-Fi HUD”, https://stylogeny.com/styles/fantasy-ui/