5 ms·

Map UI – Ghost in the Shell

158 points by aspenmayer 2y ago

w-ll 2y ago
I love GitS, but is this post just blog spam?
- aspenmayer 2y ago
  I'd say not, since they also have reviews of UI that the site is exhibiting, but beauty is in the eye of the beholder. The curator of the site is Fey Vercuiel, who apparently has done UI/UX on some AAA games, so it's not exactly nobody, and besides, I think the main site stands on its own fairly well. They have a whole section for GitS: https://ilikeinterfaces.com/tag/ghost-in-the-shell/ https://ilikeinterfaces.com/tag/ghost-in-the-shell/ There are also a lot of categories you can explore. I think for this kind of site, having clear examples of something you already have in mind as inspiration can help in ideation as a jumping off point, and having a site to share that context with others to collaborate is useful to me, and perhaps to you? The naviagation is kind of broken, so you have to click on the menu headings as links instead of expanding them, since the contents flow behind the content in the foreground for some reason. I posted it because I was reminded of this fictional map UI when I saw this actually existing map UI on these AR glasses I saw today: > I've waited 10 years for Glasses like this – Even Realities G1 [video] https://news.ycombinator.com/item?id=42285596 https://news.ycombinator.com/item?id=42285596 If you like GitS related content, you may also like these: > Architecture from Ghost in the Shell in Hong Kong https://news.ycombinator.com/item?id=42286193 https://news.ycombinator.com/item?id=42286193 > Teruhisa Tajima, logo designer: story behind designing Ghost in the Shell's logo https://news.ycombinator.com/item?id=42286243 https://news.ycombinator.com/item?id=42286243
- nurettin 2y ago
  If this is blog spam, everything is. The disappointment sinks in when you realize that they are people who are waiting for things rather than trying to create functional equivalents.
- mosselman 2y ago
  What is 'blog spam'? Someone can write a blog post and post it here if they deem it relevant. The community then decides through voting whether or not it is worth our attention no? This isn't Reddit where everyone is allergic to self-promotion.
sprobertson 2y ago
Seems like a great resource but I would have hoped a site focused on UI would have proper z-indices for the main menus.
- aspenmayer 2y ago
  Yeah, I found that the menu contents would overflow behind the content on some pages, which is frustrating and ironic. A workaround is to open the menu heading you wish to explore as a link in another or same tab, then explore the contents on the resulting page.
- lelandfe 2y ago
  Fix: `.site-header { z-index: 2 }` - 1 is used by the header's text.
  - aspenmayer 2y ago
    I messaged them on LinkedIn, but we're not connected so I used the note feature as I am not a paying member of LI, and if I don't hear back, I'll try sending them a message on ArtStation. I have directed them to your post. Thanks for your help!
keiferski 2y ago
I’ve always loved cyberpunk-style interfaces (and even have an inspiration folder on my computer for them) but sadly it doesn’t seem to be particularly popular style. I suppose because app designers are generally aiming to be as inoffensive and easily understandable as possible, which usually means a bland minimalism with some friendly corners. Whereas the various iterations of cyberpunk tend to be maximalist, use colors considered “outdated” (I’m thinking of that Matrix green so ubiquitous in the 90s-00s), or just too cold and machinic seeming.
- yjftsjthsd-h 2y ago
  I might suggest the opposite, actually; (many) real interfaces prioritize function over looking fancy. Ex. When I use vi, there's basically nothing to see; it would be kind of awful as entertainment, because it's not geared for appearance.
- ericrosedev 2y ago
  Hey some fellow green line enjoyers! I'm working on a small side project I'm calling a "Terminal-punk Fantasy Art Game" at spellkaster.app to scratch my cyber-itch. Escape from New York has some amazing cyberpunk UI aesthetic, so does Jurassic Park and the 90's Lost in Space movie. Lost in Space in particular has some absolutely gorgeous scifi UI. There is also a youtube channel called 'Datawave FM - midfi synthwave radio for retro computer funk' that has amazing music and visuals.
  - keiferski 2y ago
    Great suggestions, thanks for this. I agree, Escape from New York (and many other 80s films) do have some awesome green line graphic design.
glup 2y ago
There's this one GitS (SAC I think) UI thing that I think about pretty often: a bot needs to work faster so its fingers pop open revealing a huge number of additional cursed sub-fingers, such that it can type on a keyboard massively faster. I love thinking of this as such a wonderfully naive early 2000's view on HCI — there's no direct-access data API, the bot needs to use the keyboard so.... more actuators!! How much of technology has this same flavor?
- MrLeap 2y ago
  Think about it from an animator's point of view. What's more fun, plugging a cable in or typing your heart out? There's a whole dotted outline where I could put a plug for my indie game...
  - yjftsjthsd-h 2y ago
    I'm sure there's something to be said for the visual appeal, but I think they actually did justify it in universe as an isolation mechanism; physically using a keyboard means no BadUSB or such.
- discordance 2y ago
  That was in the original Ghost in the Shell (nswf): https://youtu.be/x-zUAb_ndDk https://youtu.be/x-zUAb_ndDk
  - GauntletWizard 2y ago
    The full movie is free on Youtube (In the US, anyway): https://youtu.be/iHil4Y4r3Wk https://youtu.be/iHil4Y4r3Wk And a link directly to that scene: https://youtu.be/iHil4Y4r3Wk?t=2748 https://youtu.be/iHil4Y4r3Wk?t=2748 and the other time they show it: https://youtu.be/iHil4Y4r3Wk?t=3297 https://youtu.be/iHil4Y4r3Wk?t=3297 Moreover, this almost makes sense as a security mechanism. A keyboard is a one-way input device; You don't get feedback from it. A monitor provides feedback that's fuzzy - Harder to exploit via a visual image where you're expecting and parsing text than a direct digital link.
hombre_fatal 2y ago
People have raised the bar so much that after the intro images I was let down when it wasn't a blog post of someone recreating it with Javascript.
voodooEntity 2y ago
While im not a big fan of alot of anime, GITS always has been my favorite to a degree that i actually own the DVD's , Mangas, a tachicoma figure and a giant custom GITS image on my wall :D Also i created a custom PnP rulebook for a GITS-world based PnP (would love to publish it but i prolly would just get sued sadly). Whenever i see gits i upvote <3
- amatecha 2y ago
  Hell yeah. I still have the original 1996 VHS English-dubbed release from Manga Entertainment. Having a KMFDM song be the soundtrack to Manga Ent's intro video[0] absolutely blew me away because this was my favorite band at the time I got the copy of the VHS! Great memories :D [0] https://www.youtube.com/watch?v=cCbUMEooHhI https://www.youtube.com/watch?v=cCbUMEooHhI
- BlueTemplar 2y ago
  And then there is GitS 2, which is... something else...
  - voodooEntity 2y ago
    If with GitS 2 you mean that strange thing that appeard on netflix some time ago... i couldn't even watch it completly because its that bad. And lets not talk about that bu*** live action movie with Scarlett Johansson ....
    - BlueTemplar 2y ago
      No, I don't know what you are talking about, I'm talking about the second animated movie (that came out two decades ago) based on the second manga : both very weird and philosophical, probably just too weird and philosophical (at least for who I was two decades ago).
flanbiscuit 2y ago
I love UIs from Sci-fi films. Mamoru Oshii also made a live action film in 2001 called Avalon and in it the main character uses a terminal interface that I always thought was pretty cool. It's almost a classic monochrome terminal interface except there's no vertical scrolling when new data pushes away the old data. Old data goes backwards/behind on the z-index and blurs. You can see it here: https://youtu.be/m6NKhXlFU-s https://youtu.be/m6NKhXlFU-s
- anileated 2y ago
  I wonder why no terminal app implemented Z-axis scrollback like in Avalon, since they increasingly (e.g., Alacritty) boast GPU-based rendering it seems like it wouldn’t be such a resource hog but can look gorgeous. And practical, too. It would make going through multi-screen lengthy program output much more palatable. Part of the problem here is scrolling by arbitrary offsets, of course (imagine being able to just say “it’s N screens back at this point”, where each screen is an unchangeable recognizable landmark), and once that anti-feature is gone pushing screens back on Z becomes the logical next step, allowing for more spatial reasoning. — I use tmux, what’s the point? — Add a button to push a screen back on demand, a way to bookmark screens, and it would elevate multiplexer & TUI experience just as well.
amatecha 2y ago
There are a few movies that are my immediate "go-to's" to try a new monitor, computer or otherwise multimedia-capable setup (like when I got a projector)... Ghost in the Shell is absolutely one of them (two others being Hackers and Vampire Hunter D: Bloodlust) :) There is just so much unbelievably good animation and art direction in GitS that is the perfect thing to enjoy on a new screen or computer or so on.
Peteragain 2y ago
As a study of UI the piece is pretty interesting in that it reminds one of all the maps in GitS. I'd like to suggest that the interesting thing about GitS maps is what they don't show. Each map shows exactly what the protagonist wants at that point in the plot. The green screen attribute of the maps is perhaps a feature - colour is only used if it is necessary to present the required information.
jayloofah 2y ago
A friend of mine recreated the UI in TouchDesigner here https://www.instagram.com/p/DC5roCqSPUQ/ https://www.instagram.com/p/DC5roCqSPUQ/ !
ramijames 2y ago
This is one of the coolest websites that I've ever seen
deleted 2y ago
[deleted]
relaxing 2y ago
The map UI in Oblivion feels much more thought out in terms of being a usable, communicative interface. I really appreciate the care that went into its design. https://ilikeinterfaces.com/2015/02/14/map-ui-oblivion/ https://ilikeinterfaces.com/2015/02/14/map-ui-oblivion/
jumpoddly 2y ago
Ghost in the Shell is one of the best sci-fi visual media I always loved the look of this UI, but now that we have the same tech I am glad our UIs look the way they do, and shudder at the thought of using the GitS UI for any real map interactions

158 points by aspenmayer 2y ago

w-ll 2y ago

I love GitS, but is this post just blog spam?

aspenmayer 2y ago
I'd say not, since they also have reviews of UI that the site is exhibiting, but beauty is in the eye of the beholder. The curator of the site is Fey Vercuiel, who apparently has done UI/UX on some AAA games, so it's not exactly nobody, and besides, I think the main site stands on its own fairly well. They have a whole section for GitS: https://ilikeinterfaces.com/tag/ghost-in-the-shell/ https://ilikeinterfaces.com/tag/ghost-in-the-shell/ There are also a lot of categories you can explore. I think for this kind of site, having clear examples of something you already have in mind as inspiration can help in ideation as a jumping off point, and having a site to share that context with others to collaborate is useful to me, and perhaps to you? The naviagation is kind of broken, so you have to click on the menu headings as links instead of expanding them, since the contents flow behind the content in the foreground for some reason. I posted it because I was reminded of this fictional map UI when I saw this actually existing map UI on these AR glasses I saw today: > I've waited 10 years for Glasses like this – Even Realities G1 [video] https://news.ycombinator.com/item?id=42285596 https://news.ycombinator.com/item?id=42285596 If you like GitS related content, you may also like these: > Architecture from Ghost in the Shell in Hong Kong https://news.ycombinator.com/item?id=42286193 https://news.ycombinator.com/item?id=42286193 > Teruhisa Tajima, logo designer: story behind designing Ghost in the Shell's logo https://news.ycombinator.com/item?id=42286243 https://news.ycombinator.com/item?id=42286243
nurettin 2y ago
If this is blog spam, everything is. The disappointment sinks in when you realize that they are people who are waiting for things rather than trying to create functional equivalents.
mosselman 2y ago
What is 'blog spam'? Someone can write a blog post and post it here if they deem it relevant. The community then decides through voting whether or not it is worth our attention no? This isn't Reddit where everyone is allergic to self-promotion.

sprobertson 2y ago

Seems like a great resource but I would have hoped a site focused on UI would have proper z-indices for the main menus.

aspenmayer 2y ago
Yeah, I found that the menu contents would overflow behind the content on some pages, which is frustrating and ironic. A workaround is to open the menu heading you wish to explore as a link in another or same tab, then explore the contents on the resulting page.
lelandfe 2y ago
Fix: `.site-header { z-index: 2 }` - 1 is used by the header's text.
- aspenmayer 2y ago
  I messaged them on LinkedIn, but we're not connected so I used the note feature as I am not a paying member of LI, and if I don't hear back, I'll try sending them a message on ArtStation. I have directed them to your post. Thanks for your help!

keiferski 2y ago

I’ve always loved cyberpunk-style interfaces (and even have an inspiration folder on my computer for them) but sadly it doesn’t seem to be particularly popular style. I suppose because app designers are generally aiming to be as inoffensive and easily understandable as possible, which usually means a bland minimalism with some friendly corners. Whereas the various iterations of cyberpunk tend to be maximalist, use colors considered “outdated” (I’m thinking of that Matrix green so ubiquitous in the 90s-00s), or just too cold and machinic seeming.

yjftsjthsd-h 2y ago
I might suggest the opposite, actually; (many) real interfaces prioritize function over looking fancy. Ex. When I use vi, there's basically nothing to see; it would be kind of awful as entertainment, because it's not geared for appearance.
ericrosedev 2y ago
Hey some fellow green line enjoyers! I'm working on a small side project I'm calling a "Terminal-punk Fantasy Art Game" at spellkaster.app to scratch my cyber-itch. Escape from New York has some amazing cyberpunk UI aesthetic, so does Jurassic Park and the 90's Lost in Space movie. Lost in Space in particular has some absolutely gorgeous scifi UI. There is also a youtube channel called 'Datawave FM - midfi synthwave radio for retro computer funk' that has amazing music and visuals.
- keiferski 2y ago
  Great suggestions, thanks for this. I agree, Escape from New York (and many other 80s films) do have some awesome green line graphic design.

glup 2y ago

There's this one GitS (SAC I think) UI thing that I think about pretty often: a bot needs to work faster so its fingers pop open revealing a huge number of additional cursed sub-fingers, such that it can type on a keyboard massively faster. I love thinking of this as such a wonderfully naive early 2000's view on HCI — there's no direct-access data API, the bot needs to use the keyboard so.... more actuators!! How much of technology has this same flavor?

MrLeap 2y ago
Think about it from an animator's point of view. What's more fun, plugging a cable in or typing your heart out? There's a whole dotted outline where I could put a plug for my indie game...
- yjftsjthsd-h 2y ago
  I'm sure there's something to be said for the visual appeal, but I think they actually did justify it in universe as an isolation mechanism; physically using a keyboard means no BadUSB or such.
discordance 2y ago
That was in the original Ghost in the Shell (nswf): https://youtu.be/x-zUAb_ndDk https://youtu.be/x-zUAb_ndDk
- GauntletWizard 2y ago
  The full movie is free on Youtube (In the US, anyway): https://youtu.be/iHil4Y4r3Wk https://youtu.be/iHil4Y4r3Wk And a link directly to that scene: https://youtu.be/iHil4Y4r3Wk?t=2748 https://youtu.be/iHil4Y4r3Wk?t=2748 and the other time they show it: https://youtu.be/iHil4Y4r3Wk?t=3297 https://youtu.be/iHil4Y4r3Wk?t=3297 Moreover, this almost makes sense as a security mechanism. A keyboard is a one-way input device; You don't get feedback from it. A monitor provides feedback that's fuzzy - Harder to exploit via a visual image where you're expecting and parsing text than a direct digital link.

hombre_fatal 2y ago

People have raised the bar so much that after the intro images I was let down when it wasn't a blog post of someone recreating it with Javascript.

voodooEntity 2y ago

While im not a big fan of alot of anime, GITS always has been my favorite to a degree that i actually own the DVD's , Mangas, a tachicoma figure and a giant custom GITS image on my wall :D Also i created a custom PnP rulebook for a GITS-world based PnP (would love to publish it but i prolly would just get sued sadly). Whenever i see gits i upvote <3

amatecha 2y ago
Hell yeah. I still have the original 1996 VHS English-dubbed release from Manga Entertainment. Having a KMFDM song be the soundtrack to Manga Ent's intro video[0] absolutely blew me away because this was my favorite band at the time I got the copy of the VHS! Great memories :D [0] https://www.youtube.com/watch?v=cCbUMEooHhI https://www.youtube.com/watch?v=cCbUMEooHhI
BlueTemplar 2y ago
And then there is GitS 2, which is... something else...
- voodooEntity 2y ago
  If with GitS 2 you mean that strange thing that appeard on netflix some time ago... i couldn't even watch it completly because its that bad. And lets not talk about that bu*** live action movie with Scarlett Johansson ....
  - BlueTemplar 2y ago
    No, I don't know what you are talking about, I'm talking about the second animated movie (that came out two decades ago) based on the second manga : both very weird and philosophical, probably just too weird and philosophical (at least for who I was two decades ago).

flanbiscuit 2y ago

I love UIs from Sci-fi films. Mamoru Oshii also made a live action film in 2001 called Avalon and in it the main character uses a terminal interface that I always thought was pretty cool. It's almost a classic monochrome terminal interface except there's no vertical scrolling when new data pushes away the old data. Old data goes backwards/behind on the z-index and blurs. You can see it here: https://youtu.be/m6NKhXlFU-s https://youtu.be/m6NKhXlFU-s

anileated 2y ago
I wonder why no terminal app implemented Z-axis scrollback like in Avalon, since they increasingly (e.g., Alacritty) boast GPU-based rendering it seems like it wouldn’t be such a resource hog but can look gorgeous. And practical, too. It would make going through multi-screen lengthy program output much more palatable. Part of the problem here is scrolling by arbitrary offsets, of course (imagine being able to just say “it’s N screens back at this point”, where each screen is an unchangeable recognizable landmark), and once that anti-feature is gone pushing screens back on Z becomes the logical next step, allowing for more spatial reasoning. — I use tmux, what’s the point? — Add a button to push a screen back on demand, a way to bookmark screens, and it would elevate multiplexer & TUI experience just as well.

amatecha 2y ago

There are a few movies that are my immediate "go-to's" to try a new monitor, computer or otherwise multimedia-capable setup (like when I got a projector)... Ghost in the Shell is absolutely one of them (two others being Hackers and Vampire Hunter D: Bloodlust) :) There is just so much unbelievably good animation and art direction in GitS that is the perfect thing to enjoy on a new screen or computer or so on.

Peteragain 2y ago

As a study of UI the piece is pretty interesting in that it reminds one of all the maps in GitS. I'd like to suggest that the interesting thing about GitS maps is what they don't show. Each map shows exactly what the protagonist wants at that point in the plot. The green screen attribute of the maps is perhaps a feature - colour is only used if it is necessary to present the required information.

jayloofah 2y ago

A friend of mine recreated the UI in TouchDesigner here https://www.instagram.com/p/DC5roCqSPUQ/ https://www.instagram.com/p/DC5roCqSPUQ/ !

ramijames 2y ago

This is one of the coolest websites that I've ever seen

deleted 2y ago

[deleted]

relaxing 2y ago

The map UI in Oblivion feels much more thought out in terms of being a usable, communicative interface. I really appreciate the care that went into its design. https://ilikeinterfaces.com/2015/02/14/map-ui-oblivion/ https://ilikeinterfaces.com/2015/02/14/map-ui-oblivion/

jumpoddly 2y ago

Ghost in the Shell is one of the best sci-fi visual media I always loved the look of this UI, but now that we have the same tech I am glad our UIs look the way they do, and shudder at the thought of using the GitS UI for any real map interactions