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
01
Design PrØcess
01
01
Design PrØcess
01
01
Design PrØcess
01
The brief
The writers wanted Stark's Spidey UI to completely overwhelm young Peter Parker. What is normal to Iron Man is ultra complicated to Peter. This provided several humorous story points throughout the film.
Executive producer Sean Cushing, from Cantina Creative called and said, "Spidey needs your Iron Man UI, but more fun…" I said, "I'm in."
The brief
The writers wanted Stark's Spidey UI to completely overwhelm young Peter Parker. What is normal to Iron Man is ultra complicated to Peter. This provided several humorous story points throughout the film.
Executive producer Sean Cushing, from Cantina Creative called and said, "Spidey needs your Iron Man UI, but more fun…" I said, "I'm in."
The brief
The writers wanted Stark's Spidey UI to completely overwhelm young Peter Parker. What is normal to Iron Man is ultra complicated to Peter. This provided several humorous story points throughout the film.
Executive producer Sean Cushing, from Cantina Creative called and said, "Spidey needs your Iron Man UI, but more fun…" I said, "I'm in."
The upgraded Spider-Man suit, designed by Tony Stark…
(Spider-Man HUD: Insta-Kill Mode)
There are two flavors of the OS - A simple “Training Wheels Mode”, and an advanced mode, which includes the “Insta-Kill” Mode that Peter activates by accident.
(Spider-Man HUD: Insta-Kill Mode)
There are two flavors of the OS - A simple “Training Wheels Mode”, and an advanced mode, which includes the “Insta-Kill” Mode that Peter activates by accident.
(Spider-Man HUD: Insta-Kill Mode)
There are two flavors of the OS - A simple “Training Wheels Mode”, and an advanced mode, which includes the “Insta-Kill” Mode that Peter activates by accident.
sc22
Shall I activate
Instant Kill Mode?
Karen OS, aka "Suit Lady"
sc22
Shall I activate
Instant Kill Mode?
Karen OS, aka "Suit Lady"
sc22
Shall I activate
Instant Kill Mode?
Karen OS, aka "Suit Lady"
Concepts / R&D
Concepts / R&D
Concepts / R&D
(Research)
I start on paper. I study the books, comics and cartoons over the past 50 years of Spidey. The suit could do a lot more than I thought.
(Research)
I start on paper. I study the books, comics and cartoons over the past 50 years of Spidey. The suit could do a lot more than I thought.
(Research)
I start on paper. I study the books, comics and cartoons over the past 50 years of Spidey. The suit could do a lot more than I thought.
sc22
It's like a skin-tight
Iron Man Suit!
Peter Parker
sc22
It's like a skin-tight
Iron Man Suit!
Peter Parker
sc22
It's like a skin-tight
Iron Man Suit!
Peter Parker
00
Research
00
The Spidey Manual
The Spidey Manual
The Spidey Manual
Spider-Man Suit Manual - Rough Draft
I created a 50+ page user-guide for the Spidey suit. On the first Avengers, I created an 11x17 printed guide for director Joss Whedon, explaining "How to Fly the Iron Man Suit". Keeps everyone on the same page. But more importantly, acts as a great gift for passionate directors.
Internally, these allow different 3D holograms, HUDs and user interfaces to all appear to function as a cohesive Spidey OS.
Paper to Screen
Paper to Screen
[Process]
Below shows the general process of my work from pencil to screen.
[Process]
Below shows the general process of my work from pencil to screen.
Concept/Sketches
Vectors
3D
Comp/Layout
Final Film
HUD
Web Menu
Web
Slinger UI
Spider Tracker HoloMap
Iron Spider Blueprints
02
Spider-Vision: The HUD
02
02
Spider-Vision: The HUD
02
02
Spider-Vision: The HUD
02
HUD brief
Directions from Marvel were to the point: 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 the mind of Tony Stark. And, "we want it blue and red, like the suit."
HUD brief
Directions from Marvel were to the point: 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 the mind of Tony Stark. And, "we want it blue and red, like the suit."
HUD brief
Directions from Marvel were to the point: 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 the mind of Tony Stark. And, "we want it blue and red, like the suit."
[ Spatial UI Design ]
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. Think of it like spatial bullet points: grouping, prioritizing, and guiding attention in ways which 2D interfaces can’t.
[ Spatial UI Design ]
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. Think of it like spatial bullet points: grouping, prioritizing, and guiding attention in ways which 2D interfaces can’t.
[ Spatial UI Design ]
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. Think of it like spatial bullet points: grouping, prioritizing, and guiding attention in ways which 2D interfaces 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 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
Iconography
Iconography
The icon set was based on a mini version of the Spider-Grid.
Anatomies
Anatomies
Anatomies
Below you might notice 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 role as a photographer for the Daily Bugle.
Int. 82
Stan Lee
03
Web Slingers
03
03
Web Slingers
03
03
Web Slingers
03
Slinger 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 from 576 web-types To project a 3D holo-map that tracks the "Mini-dot Spider-Beacon Tracker".
Slinger 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 from 576 web-types To project a 3D holo-map that tracks the "Mini-dot Spider-Beacon Tracker".
Slinger 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 from 576 web-types To project a 3D holo-map that tracks the "Mini-dot Spider-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 are done in VR using Gravity Sketch and Tilt Brush, along with pen, paper and Procreate. They are then finalized using Illustrator, Cinema 4d and After Effects.
[CONCEPTS]
Early drafts are done in VR using Gravity Sketch and Tilt Brush, along with pen, paper and Procreate. They are then finalized using Illustrator, Cinema 4d and After Effects.
[CONCEPTS]
Early drafts are done in VR using Gravity Sketch and Tilt Brush, along with pen, paper and Procreate. They are then finalized using Illustrator, Cinema 4d and After Effects.
sc22
Whoa,
Mr. Stark Really Overdid it.
Peter Parker
sc22
Whoa,
Mr. Stark Really Overdid it.
Peter Parker
sc22
Whoa,
Mr. Stark Really Overdid it.
Peter Parker
00
Design Process
00
04
Web Menu
04
04
Web Menu
04
04
Web Menu
04
WEB Menu 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 + 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.
WEB Menu 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 + 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.
WEB Menu 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 + 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 OS, aka "Suit Lady"
Karen OS, aka "Suit Lady"
Menu Concepts
Menu Concepts
Menu Concepts
00
Design Process
00
05
Holo Map
05
05
Holo Map
05
05
Holo Map
05
Holo-Map brief
Peter plants a Spider-Tracer. The holo-map shows where it is. This really came alive with the magic of the Cantina VFX team.
Holo-Map brief
Peter plants a Spider-Tracer. The holo-map shows where it is. This really came alive with the magic of the Cantina VFX team.
Holo-Map brief
Peter plants a Spider-Tracer. The holo-map shows where it is. This really came alive with the magic of the Cantina VFX team.
Map Concepts
Map Concepts
Map Concepts
sc22
This is… so Awesome.
Ned Leeds, "The guy in the Chair"
sc22
This is… so Awesome.
Ned Leeds, "The guy in the Chair"
sc22
This is… so Awesome.
Ned Leeds, "The guy in the Chair"
06
Blueprints
06
06
Blueprints
06
06
Blueprints
06
The brief
Research and design culminated in several epically tall blueprint walls, where Tony Stark presents Peter Parker with yet an even more advanced suit: Item 17a: The Iron-Spider. Variations of 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
Research and design culminated in several epically tall blueprint walls, where Tony Stark presents Peter Parker with yet an even more advanced suit: Item 17a: The Iron-Spider. Variations of 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
Research and design culminated in several epically tall blueprint walls, where Tony Stark presents Peter Parker with yet an even more advanced suit: Item 17a: The Iron-Spider. Variations of 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.
Tony Stark
Tony Stark
Plan Concepts
Plan Concepts
Plan Concepts
[CONCEPT]
For the finale of the film, I was asked to illustrate the "unseen tech" inside the "simple" leotard. The challenge was, how do you make a floppy leotard look like Iron Man tech?
[CONCEPT]
For the finale of the film, I was asked to illustrate the "unseen tech" inside the "simple" leotard. The challenge was, how do you make a floppy leotard look like Iron Man tech?
[CONCEPT]
For the finale of the film, I was asked to illustrate the "unseen tech" inside the "simple" leotard. The challenge was, how do you make a floppy leotard look like Iron Man tech?
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 and augmediated audio devices for enhanced hearing.
sc22
I’ll introduce the world
to our newest official member of the avengers: spider-man.
Tony Stark
sc22
I’ll introduce the world
to our newest official member of the avengers: spider-man.
Tony Stark
sc22
I’ll introduce the world
to our newest official member of the avengers: spider-man.
Tony Stark
07
Collectors
07
07
Collectors
07
07
Collectors
07
The Toys
Sideshow and Hot Toys are known worldwide for their insanely detailed Iron Man and Marvel replicas, many of which I have in my office while designing. I was super proud that they released a premium "Hologram Edition" of their large format "quarter-scale" Spider-Man. Various other toys also incorporated the HUD and holo designs.
The Toys
Sideshow and Hot Toys are known worldwide for their insanely detailed Iron Man and Marvel replicas, many of which I have in my office while designing. I was super proud that they released a premium "Hologram Edition" of their large format "quarter-scale" Spider-Man. Various other toys also incorporated the HUD and holo designs.
The Toys
Sideshow and Hot Toys are known worldwide for their insanely detailed Iron Man and Marvel replicas, many of which I have in my office while designing. I was super proud that they released a premium "Hologram Edition" of their large format "quarter-scale" Spider-Man. Various other toys also incorporated the HUD and holo designs.
08
VFX Reel
08
08
VFX Reel
08
08
VFX Reel
08
sc22
Actually, he's the boss.
I just pay for everything... and design everything... and make everyone look cooler.
Tony Stark
sc22
Actually, he's the boss.
I just pay for everything... and design everything... and make everyone look cooler.
Tony Stark
sc22
Actually, he's the boss.
I just pay for everything... and design everything... and make everyone look cooler.
Tony Stark
09
Credits
09
09
Credits
09
09
Credits
09
Art Direction/Lead UI Design : 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
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
Spider-man is ™ & © Columbia Pictures, Marvel Studios, Pascal Pictures. All Rights Reserved.
Hand-Crafted UI + Site Design in Figma/Webflow/Framer
©2026 by Jayse Hansen.
Spider-man is ™ & © Columbia Pictures, Marvel Studios, Pascal Pictures. All Rights Reserved.
Hand-Crafted UI + Site Design in Figma/Webflow/Framer
©2026 by Jayse Hansen.