Spider-Man's Holographic Wrist User Interface, designed by Jayse Hansen

Spider-Man

Spider-Man HUDs, Holograms & Augmented Tech

Spider-Man's Holographic Wrist User Interface, designed by Jayse Hansen

Spider-Man

Spider-Man HUDs, Holograms & Augmented Tech

Spider-Man's Holographic Wrist User Interface, designed by Jayse Hansen

Spider-Man

Spider-Man HUDs, Holograms & Augmented Tech

Role

Art Dir./Lead Design /3D

Director

John Kass

VFX Supervisor

Janek Sirrs

Designed for

Cantina Creative

Franchise

Spider-Man, MCU

Role

Art Dir./Lead Design /3D

Director

John Kass

VFX Supervisor

Janek Sirrs

Designed for

Cantina Creative

Franchise

Spider-Man, MCU

Role

Art Dir./Lead Design /3D

Director

John Kass

VFX Supervisor

Janek Sirrs

Designed for

Cantina Creative

Franchise

Spider-Man, MCU

03

Design PrØcess

01

03

Design PrØcess

01

03

Design PrØcess

01

The brief

“Whoa, Mr. Stark really overdid it.

The goal of the advanced Spidey UI was to completely overwhelm Peter Parker and make a few humorous story points throughout the film with it.

Sean Cushing, from Cantina Creative called me one day and said, "We need a new Stark UI, but not for Iron Man…" I said, "I'm in."

The brief

“Whoa, Mr. Stark really overdid it.

The goal of the advanced Spidey UI was to completely overwhelm Peter Parker and make a few humorous story points throughout the film with it.

Sean Cushing, from Cantina Creative called me one day and said, "We need a new Stark UI, but not for Iron Man…" I said, "I'm in."

A note from Tony Stark, "A Minor Upgrade"

The upgraded Spider-Man suit, "Designed" by Tony Stark…

(Spider-Man HUD: Insta-Kill Mode)

I designed two versions of the OS - A simpler “Training Wheels Mode”, and a more advanced mode, which includes the “Insta-Kill” Mode that Peter activates by accident.

(Spider-Man HUD: Insta-Kill Mode)

I designed two versions of the OS - A simpler “Training Wheels Mode”, and a more advanced mode, which includes the “Insta-Kill” Mode that Peter activates by accident.

(Spider-Man HUD: Insta-Kill Mode)

I designed two versions of the OS - A simpler “Training Wheels Mode”, and a more advanced mode, which includes the “Insta-Kill” Mode that Peter activates by accident.

Concepts / R&D

Concepts / R&D

Jayse Hanse's drawings of Spider-Man's Holographic Map in Spider-Man: Homecoming

(Research)

My first task was to get up to speed with everything that the famous Spidey suit could do by studying the books, comics and cartoons over the past 50 years. The suit could do a lot more than I thought.

(Research)

My first task was to get up to speed with everything that the famous Spidey suit could do by studying the books, comics and cartoons over the past 50 years. The suit could do a lot more than I thought.

(Research)

My first task was to get up to speed with everything that the famous Spidey suit could do by studying the books, comics and cartoons over the past 50 years. The suit could do a lot more than I thought.

sc22

It's like a skin-tight

It's like a skin-tight

Iron Man Suit!

Iron Man Suit!

Peter Parker

06

Research

4705

Jayse Hansen's office while designing Spider-Man's "Iron Man" Hud
Jayse's office while researching Spider-Man for the MCU Holograms and HUDs
Researching Iron Spider's Capabilities
Drawing by Jayse Hansen of film UI Graphics
Jayse Hansen's drawing of a hologram for Spider-Man's spinnerette, for webslingers

The Spidey Manual

The Spidey Manual

The Spidey Manual

- Rough Draft

I created a 50+ page user-guide for the new Spidey Suit.

This allowed the different holograms, HUDs and UI’s in the film to all function together as a Spidey Operating System.

(Process)

Concept/Sketches

Vectors

3D

Comp/Layout

Final Film

HUD

Web Menu

Web Slinger UI

Spider Tracker HoloMap

Iron Spider Blueprints

03

Spider-Vision: The HUD

02

03

Spider-Vision: The HUD

02

03

Spider-Vision: The HUD

02

The brief

42

The directions were simple: Make it ‘Iron Man’, but definitely ‘not’ Iron Man. We want it to be distinctly Spiderman, but of course, we need to know it comes from Iron Man. And, "we want it blue and red, like the suit."

The brief

42

The directions were simple: Make it ‘Iron Man’, but definitely ‘not’ Iron Man. We want it to be distinctly Spiderman, but of course, we need to know it comes from Iron Man. And, "we want it blue and red, like the suit."

(Designing for Stereo)

I design UI with stereo in mind (most films will be shown in 3D.) In the rough mockup above, the grid doesn’t just sit on a plane. It becomes a tunnel. A layered structure where UI elements live at different depths. That z-depth-stacking helps the audience (and Parker) parse dense info more easily. I think of it like spatial bullet points: grouping, prioritizing, and guiding attention in ways 2D can’t.

(Designing for Stereo)

I design UI with stereo in mind (most films will be shown in 3D.) In the rough mockup above, the grid doesn’t just sit on a plane. It becomes a tunnel. A layered structure where UI elements live at different depths. That z-depth-stacking helps the audience (and Parker) parse dense info more easily. I think of it like spatial bullet points: grouping, prioritizing, and guiding attention in ways 2D can’t.

(Designing for Stereo)

I design UI with stereo in mind (most films will be shown in 3D.) In the rough mockup above, the grid doesn’t just sit on a plane. It becomes a tunnel. A layered structure where UI elements live at different depths. That z-depth-stacking helps the audience (and Parker) parse dense info more easily. I think of it like spatial bullet points: grouping, prioritizing, and guiding attention in ways 2D can’t.

Web-Lines

I’m always on the hunt for a signature that can drive and unify a design across many disparate devices, holos, HUDs and shots.

For Spidey’s UI, I found it in the beautiful gradients and specularity of web lines.

I would use this shape language across all of the UI designs to make them feel cohesive and part of a design system unique to Spider-Man

This idea became the main driver for how elements could attach to the border elements of the UI, as well as how they’d animate in and out.

This idea became the main driver for how elements could attach to the border elements of the UI, as well as how they’d animate in and out.

Iconography

The icon set was based on a mini version of the Spider-Grid. Their functions are based on suit-features from the comic books and the film script.

Anatomies

There are numerous hidden design decisions that go into what you see on screen.


I first did "anatomies", or, design breakdowns, for Joss Whedon (director) on Avengers for the Iron Man HUDs, since he was fascinated by all the suit functions.


But it actually served to get us all on the same page.

Production moves fast, so having clear language on what's a Reticle, Diagnostic, or Radar widget helps the editors, producers and directors all communicate more efficiently.


These tend to be favorites amongst directors and visual effects supervisors, so I've created them on every film since.


Below you might note that the 'window borders' are the spider legs from the film's Spidey logo.


Or that the old-school camera viewfinder on the lower right is a nod to Peter Parker being a Daily Bugle photographer in the comics and cartoons.

Int. 82

Spider-Man, the most popular superhero we have

is finally part of the Cinematic Universe.

Stan Lee

03

Web Slingers

03

03

Web Slingers

03

03

Web Slingers

03

The brief

.. ..

The web-slinger AR holograms had multiple functions in the film:

To introduce the audience to the advanced Stark-tech present in the new suit. To show web-fluid status To select web-types (576 options) To project a 3D holo-map that tracks the "Mini-dot Spidey-Beacon Tracker".

The brief

.. ..

The web-slinger AR holograms had multiple functions in the film:

To introduce the audience to the advanced Stark-tech present in the new suit. To show web-fluid status To select web-types (576 options) To project a 3D holo-map that tracks the "Mini-dot Spidey-Beacon Tracker".

This is the coolest thing I've ever seen!

This is the coolest thing I've ever seen!

Peter Parker

Peter Parker

Slinger Concepts

Slinger Concepts

Slinger Concepts

()

Early drafts were done in VR using Gravity Sketch and Tilt Brush, along with pen, paper and Procreate.  These were then finalized using Illustrator, Cinema 4d and After Effects.

()

Early drafts were done in VR using Gravity Sketch and Tilt Brush, along with pen, paper and Procreate.  These were then finalized using Illustrator, Cinema 4d and After Effects.

()

Early drafts were done in VR using Gravity Sketch and Tilt Brush, along with pen, paper and Procreate.  These were then finalized using Illustrator, Cinema 4d and After Effects.

sc22

Shall I activate

Shall I activate

Instant Kill Mode?

Instant Kill Mode?

Karen OS

06

Design Process

2025

Jayse Hansen's office while designing Spider-Man's Iron Man Hud
Jayse's office while researching Spider-Man for the MCU Holograms and HUDs
Researching Iron Spider's Capabilities
Drawing by Jayse Hansen of film UI Graphics
Jayse Hansen's drawing of a hologram for Spider-Man's spinnerette, for webslingers

03

Web Menu

04

03

Web Menu

04

03

Web Menu

04

The brief

.. ..

The director wanted an overwhelmingly complex menu to disorient Peter Parker after he hacked his way past the initial "Training Wheels Protocol".

Through research of books, comics and Spidey cartoons I assembled a farily long database of actual Spidey Web-Types. Working with the famed UX designer Carolyn Farino, we categorize them by type: "Projectiles", "Web-Lines", "Web-Nets", "Weaponized", "Bridging", "Electrified" and purpose: "Defensive", "Offensive", "Containing", and so on.

The brief

.. ..

The director wanted an overwhelmingly complex menu to disorient Peter Parker after he hacked his way past the initial "Training Wheels Protocol".

Through research of books, comics and Spidey cartoons I assembled a farily long database of actual Spidey Web-Types. Working with the famed UX designer Carolyn Farino, we categorize them by type: "Projectiles", "Web-Lines", "Web-Nets", "Weaponized", "Bridging", "Electrified" and purpose: "Defensive", "Offensive", "Containing", and so on.

You have Five Hundred and seventy six Web types

You have Five Hundred and seventy six Web types

Karen, aka "Suit Lady"

Karen, aka "Suit Lady"

Early Concepts

Early Concepts

Early Concepts

()

Early drafts were done in VR using Gravity Sketch and Tilt Brush, along with pen, paper and Procreate.  These were then finalized using Illustrator, Cinema 4d and After Effects.

06

Design Process

2025

Jayse Hansen's drawing of a hologram for Spider-Man's spinnerette, for webslingers
Jayse Hansen's office while designing Spider-Man's Iron Man Hud
Jayse's office while researching Spider-Man for the MCU Holograms and HUDs
Researching Iron Spider's Capabilities
Drawing by Jayse Hansen of film UI Graphics

03

Holo Map

05

03

Holo Map

05

03

Holo Map

05

The brief

.. ..

The Spidey OS really came alive with the Holo Map and the magic of the Cantina team. Was cool to see this also become a collector's toy from Hot Toys.

The brief

.. ..

The Spidey OS really came alive with the Holo Map and the magic of the Cantina team. Was cool to see this also become a collector's toy from Hot Toys.

HoloMap Concepts

HoloMap Concepts

HoloMap Concepts

()

Early drafts were done in VR using Gravity Sketch and Tilt Brush, along with pen, paper and Procreate.  These were then finalized using Illustrator, Cinema 4d and After Effects.

()

Early drafts were done in VR using Gravity Sketch and Tilt Brush, along with pen, paper and Procreate.  These were then finalized using Illustrator, Cinema 4d and After Effects.

()

Early drafts were done in VR using Gravity Sketch and Tilt Brush, along with pen, paper and Procreate.  These were then finalized using Illustrator, Cinema 4d and After Effects.

03

Blueprints

06

03

Blueprints

06

03

Blueprints

06

The brief

All the research and design culminated in several 16 foot tall blueprint walls, where Tony Stark presents Peter Parker with yet an even more advanced suit: Item 17a: The Iron-Spider. This suit would go on to be used in Avengers Infinity War, Avengers: Endgame, Spider-man: Far From Home and Spider-man: No Way Home.

The brief

All the research and design culminated in several 16 foot tall blueprint walls, where Tony Stark presents Peter Parker with yet an even more advanced suit: Item 17a: The Iron-Spider. This suit would go on to be used in Avengers Infinity War, Avengers: Endgame, Spider-man: Far From Home and Spider-man: No Way Home.

Yeah, give that a look.

Yeah, give that a look.

Tony Stark

Tony Stark

Early Concepts

Early Concepts

Early Concepts

()

For the finale of the film, you'd see all of the blueprints for Tony's newest version of the suit: The Iron Spider. These would be displayed on giant backlit, wall-sized displays. So I was asked to illustrate the unseen tech inside the simple leotard. This was definitely a fun one to model and create as many parts as I could.

()

For the finale of the film, you'd see all of the blueprints for Tony's newest version of the suit: The Iron Spider. These would be displayed on giant backlit, wall-sized displays. So I was asked to illustrate the unseen tech inside the simple leotard. This was definitely a fun one to model and create as many parts as I could.

()

For the finale of the film, you'd see all of the blueprints for Tony's newest version of the suit: The Iron Spider. These would be displayed on giant backlit, wall-sized displays. So I was asked to illustrate the unseen tech inside the simple leotard. This was definitely a fun one to model and create as many parts as I could.

Spider-Man Suit Blueprints

To design and model the underlaying Flex Armor, I referenced different types of flexible lattice structures.

For the lenses I referenced augmented reality glasses I've been involved in developing such as the Meta Pro, as well as augmediated audio devices for augmented hearing.

sc22

I'll introduce to the world

I'll introduce to the world

to Our newest official member of the Avengers: Spider-man.

to Our newest official member of the Avengers: Spider-man.

Tony Stark

03

Toys

07

03

Toys

07

03

Toys

07

The brief

Sideshow and Hot Toys are known worldwide for their insanely detailed Iron Man and Marvel replicas, many of which I own. They released a "Hologram Edition" of their large format "quarter-scale" Spider-Man. Also various other toys, like the mask with the HUD, incorporated the designs. Always fun to see.

The brief

Sideshow and Hot Toys are known worldwide for their insanely detailed Iron Man and Marvel replicas, many of which I own. They released a "Hologram Edition" of their large format "quarter-scale" Spider-Man. Also various other toys, like the mask with the HUD, incorporated the designs. Always fun to see.

The Hologram Edition

The Hologram Edition

Quarter Scale Spider-Man

Quarter Scale Spider-Man

sc22

Sorry I took your suit.

Sorry I took your suit.

Tony Stark

03

VFX Reel

08

03

VFX Reel

08

03

VFX Reel

08

03

Credits

09

03

Credits

09

03

Credits

09

Art Direction/Lead UI HUD and Holo Design/3D : Jayse Hansen

Spidey UX Assistant to Jayse: Carolyn Farino

Slinger Breakdown Animation: Darby Faccinto

The good people I worked with

Production: Columbia Pictures, Marvel Studios, Pascal Pictures
Director:  Jon Watts‍

VFX Supervisor: Janek Sirrs

Designed for:  Cantina Creative

VFX Executive Producer: Sean Cushing
VFX Supervisor: Stephen Lawes
Design Supervisor: Venti Hristova
VFX Producer: Grace Hendley


Lead Spider-Man HUD and Hologram Design: Jayse Hansen


Design/Animation: Carly Cerquone, Andrew Hawryluk, Aaron Eaton Matt Eaton, Sang Kim, Shawn Lee, Daniel Zhan


CG/Compositors: Julianne Dome, Jay Grunfeld, Jeff Olney, Brian Sales