
Spider-Man
Spider-Man HUDs, Holograms & Augmented Tech

Spider-Man
Spider-Man HUDs, Holograms & Augmented Tech

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."

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
Concepts / R&D

(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





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.
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
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

[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.
[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.
[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.
sc22
Shall I activate
Shall I activate
Instant Kill Mode?
Instant Kill Mode?
Karen OS
06
Design Process
2025








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














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

[CONCEPT]
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.
[CONCEPT]
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.
[CONCEPT]
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
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
Art Director UI HUD + Holo Design/3D : Jayse Hansen
Spidey UX Assistant to Jayse: Carolyn Farino
Slinger Breakdown Animation: Darby Faccinto
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





