For any film or TV fan with an eye for design, the user interfaces that characters interact with are more than just set dressing—they can make all the difference in the believability of the narrative. Whether a flashing ‘Access Denied’ screen, a slow-moving loading bar that creates suspense, or the bright screens of gadgets and gizmos from another world, the plot of more and more movies and shows depend on the creation of these fantasy UIs (FUIs). And, much like film and television themselves, FUIs also say a lot about our real world of technology, too; the good, the bad, and horrifying (Black Mirror, anyone).

“I’m such a film nerd, and I just enjoy talking about film generally. So it was a great way for me to sort of combine these two things that I’m passionate about: my work, and my hobby,” said Khoi Vinh, Adobe’s Sr. Director of Design, about the latest episode of Wireframe, Adobe’s design podcast. In episode 12, he and Wireframe producer James Green dove deep into the world of FUIs, speaking with the people that create these technological fantasies and exploring what the practice says about design in general.

The laser descent scene from 1995's Mission Impossible.
1995’s Mission: Impossible. Even when design is not ‘grounded’ in reality, exaggerated FUIs and technology in film can be used as a vehicle for storytelling.
Image by Variety/Paramount/Kobal/Rex/Shutterstock. 

“One of the recurring themes we’re seeing in Wireframe is that you keep finding different, non-traditional flavors of design that at first seem very different from what the ‘average’ UX designer does. But over and over again they sort of come back to the same bedrock principles. This is one of those, and it’s having an influence on all of us as viewers of these stories.” Listen to the episode below to hear Vinh and Green explore the world of FUIs, and read on for a behind-the-scenes look at what it was like for these two film buffs to explore the bridge between storytelling and design.

Episode 12

How FUIs use real-world reference points, on steroids

“It seems like FUI design is left out of a lot of the mainstream design conversations,” said Green, as he reflected on this episode. “We thought it would be a great idea to shine a light on this highly influential corner of design.” As Green and Vinh spoke with the designers creating FUIs, it became clearer and clearer to them how much their work and processes mirror the UI design world outside of film and TV. Just like any product designer at a tech company, FUI designers need to start with something familiar to the audience, and expand from there.

FUI from 2001's The Bourne Identity. Designer Mark Coleran said they modelled the UI off the Windows operating system, to make it familiar even though it present fictional technology.
FUI from 2001’s The Bourne Identity. Designer Mark Coleran said they modelled the UI off the Windows operating system, to make it familiar even though it presented fictional technology.Image by Mark Coleran.

“You can’t just go off the map and create something completely unrealistic with FUIs, because your users are the audience, and they need to be gently transitioned into into suspension of disbelief. It’s easier to suspend this belief when there is some foundation to believe in,” said Vinh, who also spoke with Mark Coleran, designer on the The Bourne Identity Series, Blade 2, and The Island. Mark stresses the need to model after the real world, but also to exaggerate.

“One thing we did that really did go out way ahead of modern user interface design and that’s animation and user interfaces and UX…To take a screen that sits in a film that doesn’t do anything, it feels dead,” he said. Robyn Haddow, a designer who works on films in the Marvel Universe, agrees with him, adding that this needs to be done quickly in films. She has even quantified how quickly FUIs need to communicate their point in a story.

A hologram FUI from the 2011 film Thor.
A hologram FUI from the 2011 film Thor. Bright, big, and easily communicated in 24 frames or less, which is key, says creator Robyn Haddow. Image by Robyn Haddow.

“The most important thing about the hero graphics [in FUIs] is that the viewer can digest and understand what’s happening in 24 frames or less,” she said, referring to how many frames of film are typically shown to the user each second. “So, a fantasy interface designer, their job is to make the FUI just fantastical enough for you to think, ‘Yeah, of course,’ Vinh added.

FUIs as a (black) mirror to our own relationships with technology

In the episode, Vinh and Green learned more about how FUIs can go deeper than just being props to nudge a story along. They can be critical storytelling mechanisms that also blend the familiar with the fantasy to tap into our own thoughts and even fears about technology.

“If you ever watch any of the Black Mirror episodes you see that [the stories start] with it being idealistic and it seems like a perfect world,” Gemma Kingsley, who designs FUIs for Black Mirror among other films and series, told Vinh and Green. “It seems like everything is going wonderfully. But as it progresses you realize that actually it’s a nightmare. So [the FUI] needs to draw you in, to start with. It needs to look good. It needs to sell itself.”

Gemma Kingsley's FUI in the Black Mirror episode Nosedive.
Gemma Kingsley’s FUI in the series Black Mirror. Kingsley used familiar aspects of social media, coupled with nightmarish outcomes, to tap into our fears about technology trends. Image by Gemma Kingsley.

In this, Vinh sees how FUIs can form a key part of storytelling about technology. “We are really fascinated by what technology is doing to us. I think in each episode of Black Mirror, the interfaces that you see in there are very reflective of our understanding of how technology works and our fears about where it leads us,” he said.

Kingsley also explained how she needs to actually be on set to coach actors how to ‘fake use’ the FUIs she creates. “That was the biggest surprise,” said Green. “It seems like such a small detail but an important one. You could have the most beautiful design in the world, but if it doesn’t seem to be usable by the actor, how do you expect the viewer to believe it?”

An actress In the Black Mirror Episode, Nosedive, interacts with an FUI in the form of a vehicle's HUD that is not visible during the filming of the scene.
Bryce Dallas Howard in a Black Mirror episode uses fake technology. Image by Gemma Kingsley.

Real technology may influence FUIs, but FUIs also influence real technology

While examples of FUI in shows like Black Mirror reflect some of our fears of where technology might be headed, FUI also has a habit of inspiring designers and technologists in their creations; for example, like how voice interactions in the film Her inspired Apple designers to make changes to Siri.

“FUI designers are important because they are essentially creating the blueprint for product designers to build off of in the future…I believe there’s a moral responsibility in these inspirations, especially since they shape our futures to come,” said Green, reflecting on this connection.

For Vinh, the connection between the design of FUI, for storytelling purposes, and UI design in our real world, is clearer than ever; FUI designers are following a similar design process to create an experience for their users, the audience. In turn, these FUIs inspire UI designers to think outside the box, taking the fantasy ideas they’ve seen in film and TV and using the design process to transform them into real technologies. “In many ways, FUI designers are just creating a roadmap for products that have yet to be actually invented,” Vinh said.