Looks beautiful. This is probably the first time I've seen a UI framework for web that made me want to actually do something _ANYTHING_ with it (short of using it for my own site, for idealistic reasons).
Some cyberpunk sci-fi online game... now I have to make one.
I love how this channels Syndicate Wars. That game probably solidified the cyberpunk aesthetic better than any game before or after it, possibly with the exception of Shadowrun (or the upcoming cp2077).
This specifically reminded me of Syndicate Wars user interface. Partly its the sounds that make it, I guess. I applaud the author for an excellent interpretation.
This reminds me of an older sequence of space games titled “FreeSpace” that were created by Volition. The interface components are very nice!
I might just use this for my blog...
Edit: An additional framework that may pair well with this is augmented-ui[0]. That received quite a bit of attention a year ago[1].
Putting these two together could make a pretty neat interface! I have another project (metareply.net) that I want to complete for a smaller community, Subreply[2], which might be a good candidate for this as well.
I actually used to lurk at hard-light for several years! It's a great community with very dedicated people :)
My father and I were huge fans of the Descent series and, naturally, took up FreeSpace when it came out. Out of most of the games I've played, FreeSpace has always had a unique draw to it.
If anyone happens to be reading this thread I definitely recommend picking it up on Good old Games[0] if you feel that you have the time to spare. It's best played with a joystick and is very immersive.
Try out the knossos [0] front end to install the FreeSpace Open mods. 4k support, up-ressed textures and one of the best single player campaigns ever! And there's a bunch of user created campaigns that rival AAA games [1][2]
How so? On mobile swiping between pages felt very seamless and a well executed transition. That by itself is something most appy sites barely get right.
Still checking it out, but at first glance it’s obvious this person gets the details right.
Thank you for bringing up the name of the 2advanced studio! I tried a couple of years ago, but could not remember it. In 2003, their design[1] just blew my mind, they were way ahead of their time.
The feel of this interface is incredible. What's most interesting is that it evokes lots of memories from the games I played more than 20 years ago, and yet it is very distinct and doesn't copy any of them. Feels almost like something very familiar, but you can't quite grasp where you saw it.
This is incredible and I'll be following this project, and probably will do something with this framework, too.
This actually shows something interesting: that there is a coherent visual language for interfaces within the sci-fi subgenre of graphic design that just kind of appeared by implicit consensus. Which I guess can be said for many visual design trends - many of us can guess both when and for what purpose a product was designed based on its graphic design.
Btw, the Holo interface we saw in Android 4 was very influenced by this type of design. It was rather stylish, even if difficult to use consistently. But of course since then it was replaced by Material Design, starting with Android 5.0
Problem with Holo it was hard to follow this concept and create visually distinct apps. They would all be cold white and blue. Material design gives for more variability.
There were two Holo themes: dark and light. You'd pick one and extend it with the style of your brand. My only gripe with it was that there's no built-in mechanism to add shadows to things — you have to use pre-rendered shadows as bitmaps or generate them on the fly.
It definitely is for me. The LCARS interface is as much of a character of the story as the as the Enterprise herself (substitute with Voyager, Defiant, or São Paulo if you wish) and I’d go a step further of saying ship interfaces and systems inform us as much about the era of Star Trek one is watching as does the plot and narrative at any given moment to the discerning and attentive Trekkie :)
Strongly agreed. Which is why I was glad to see LCARS returning in Lower Decks, and the series is experimenting with tweaking the design a little to include some lessons in UI design learned over the past decades. Despite being animated comedy, I like it better than post-Enterprise installments, because it brings back the design language of TNG/DS9/VOY/ENT era.
It's various minor things. Like PADDs being proper LCARS tablets with a bit more space for content, smaller bevel[0] and even portrait mode[1]. Or the experiments with circular (radial) elements on display, which arguably are now decorative, but still they fit in, so are a good starting point for further exploration.
Or, and I can't find a screenshot of it now, that one tiny joke that made me almost spit out my tea. A scene on the bridge, the captain talking to someone over the viewscreen; she makes a gesture to cut off audio, the tactical officer presses a button on his console, and a small icon of a crossed out speaker appears on said console. Immediately recognizable even for non-StarTrek audience, and still they made it fit the style.
ENT in particular was interesting, when I went back and re-watched it after finally getting to TNG/DS9/VOY (ENT being the first one I saw): They IMO successfully crossed real-world interfaces with TNG-era LCARS [0], creating something that looks vaguely like a tiled window manager, has a minimize function akin to the Windows start-bar (the icons on the right are minimized windows, used on rare occasion in the show for discreet messages), but with a whole bunch of hints of a natural progression into what it would become later in-universe.
It's also interesting how they included design hints of how this would evolve in to TOS era design later (the bulky monitor for example).
It's kind of ironic actually: we as viewers expect that kind of historical consistency, and complain about changes that feel disconnected, but in reality the history of interface design is full of such kind of radical shifts!
Of interest to me is that a lot of the graphics and sounds are based on '70's and '80's tech with the constraints of the circuits and display technology that were "state of the art" then, but then "futurized". Such that advanced tech now spends computer cycles simulating analog circuits, CRTs, etc, for the purpose of nostalgia...
If you take away some of the animations and sound, this looks like around half of all the websites I visited in 1998. (Which mainly revolved around hacking and Quake.)
It's also cool that this is simply a web app. If I want the full desktop experience, I can write the missing components myself (lol) and make this app fullscreen. Nice!
Love this stuff. I wonder what it's like for someone too young to remember the constraints that the design references.
Like the cyberpunk fast scrolling effect is a reference to 300baud terminals being dog slow, and the idea that text could zip in that fast implied something fast and powerful. The image loading screens are complex and fast, like a kind of arpeggio of the individual steps sped up. As though to say, "It's doing the thing, fast, powerful, and specific." It's like old xterm boot processes where by the time they finished, each step was confidence that things were right in the world. What I love about the whole retro cyberpunk aesthetic is it is essentially heroic, with anti-hero origins, and the symbology bundles up so much of what I hope the older generations of hackers are able to pass on.
Beautifully written.
I just finished rewatching Halt and Catch Fire. If you haven't watched it, I recommend for the C64 hype and revisiting of the digital revolution.
That's awesome. Of course not for standard web interface, I would hate my bank to have something like this, but that would be perfect to create a text adventure or other immersive experiences!
You just reminded me of Citibank's virtual number UI. It had sound effects and would play an animation that would show you a temporary credit card number using a slot-machine-like animation. It was hilarious but I would always dread using it whenever I needed it.
233 comments
[ 2.1 ms ] story [ 374 ms ] threadSome cyberpunk sci-fi online game... now I have to make one.
I felt the same way! I wonder if there are other frameworks out there that elicit this response.
I admire that you actually went and built a full fledged framework for this. Most people don't go that far.
Posted 24 days ago by the author:
https://github.com/arwes/arwes/issues/46
That guy just met an angel.
I might just use this for my blog...
Edit: An additional framework that may pair well with this is augmented-ui[0]. That received quite a bit of attention a year ago[1].
Putting these two together could make a pretty neat interface! I have another project (metareply.net) that I want to complete for a smaller community, Subreply[2], which might be a good candidate for this as well.
Thanks for sharing this!
[0]: https://augmented-ui.com/
[1]: https://news.ycombinator.com/item?id=20923792
[2]: https://subreply.com/
My father and I were huge fans of the Descent series and, naturally, took up FreeSpace when it came out. Out of most of the games I've played, FreeSpace has always had a unique draw to it.
If anyone happens to be reading this thread I definitely recommend picking it up on Good old Games[0] if you feel that you have the time to spare. It's best played with a joystick and is very immersive.
[0]: https://www.gog.com/
Try out the knossos [0] front end to install the FreeSpace Open mods. 4k support, up-ressed textures and one of the best single player campaigns ever! And there's a bunch of user created campaigns that rival AAA games [1][2]
[0] https://fsnebula.org/knossos/
[1] https://www.kotaku.com.au/2019/09/get-freespace-2-for-free-t...
[2] http://coin-drop.com/freespace-blue-planet-masterclass-video...
[Edit: you do need the commercial Freespace release to get the most of the mods. Get it from Good Old Games]
Still checking it out, but at first glance it’s obvious this person gets the details right.
The high-pitched noise every time you click on a link will get old very fast.
Here's one from 2001: https://www.youtube.com/watch?v=UHbQmqmmIFk
[1] https://www.youtube.com/watch?v=N-2sKZjawq4
This is incredible and I'll be following this project, and probably will do something with this framework, too.
System Shock (1994). https://youtu.be/qKchS2GeimE?t=9
https://youtu.be/ECHmCzXMFb8
Maybe a bit of EVE Online too.
If I had infinite time I would fuck around Elite Dangerous all day these days, with flight sticks and everything.
Anyway, "dark mode" is totally doable with Holo.
Or, and I can't find a screenshot of it now, that one tiny joke that made me almost spit out my tea. A scene on the bridge, the captain talking to someone over the viewscreen; she makes a gesture to cut off audio, the tactical officer presses a button on his console, and a small icon of a crossed out speaker appears on said console. Immediately recognizable even for non-StarTrek audience, and still they made it fit the style.
--
[0] - https://www.yourprops.com/PADD-replica-movie-prop-Star-Trek-...
[1] - https://www.yourprops.com/Medical-PADD-replica-movie-prop-St..., though there was precedent in DS9, AFAIR.
[0] https://memory-alpha.fandom.com/wiki/Desktop_monitor?file=22...
It's kind of ironic actually: we as viewers expect that kind of historical consistency, and complain about changes that feel disconnected, but in reality the history of interface design is full of such kind of radical shifts!
[0] https://rosenfeldmedia.com/books/make-it-so/
If you take away some of the animations and sound, this looks like around half of all the websites I visited in 1998. (Which mainly revolved around hacking and Quake.)
https://www.introversion.co.uk/introversion/#games
http://csszengarden.com/
Edit: Here is the movie theatre! [0]
[0] http://www.csszengarden.com/202/
I actually think it would go down well with management as it would appear 'futuristic' to those that are not tech savvy.
The fact it comes with sounds included is the cherry on the cake!
Like the cyberpunk fast scrolling effect is a reference to 300baud terminals being dog slow, and the idea that text could zip in that fast implied something fast and powerful. The image loading screens are complex and fast, like a kind of arpeggio of the individual steps sped up. As though to say, "It's doing the thing, fast, powerful, and specific." It's like old xterm boot processes where by the time they finished, each step was confidence that things were right in the world. What I love about the whole retro cyberpunk aesthetic is it is essentially heroic, with anti-hero origins, and the symbology bundles up so much of what I hope the older generations of hackers are able to pass on.
Do you think someone who never played video games with menus like this would feel the same? Or would it look outdated and cliché...