Building Future UIs
In the past two years, there have been so many sci-fi dramas that I suspect the directors of American TVs are all Star Wars fans. It has pushed me to start watching British dramas, like “Slow Horses” and “Vigil.” There are just so many futuristic dramas that it’s overwhelming, but they all share a common feature: their UIs are very futuristic. Even the first Star Wars (1977) has UIs that still feel more futuristic than what I use in my daily life. The meticulous design, combined with clever scenes, leaves a lasting impression.
Let's break down how they can be built, and then to try building a different, futuristic UI.
Here are some articles I’ve found, which are linked below. They always evoke a cool feeling for several common reasons: excellent design, complex artistic background, grand scenes, smooth animations, and interactive feedback that aligns with users’ direct experiences. During my research, I found that someone had already attempted this. Based on their work, I decided to create a small scene using the latest version of r3f.
I have developed various software (desktop), apps, and web, each with different UI styles. A simple classification divides them into Retained Mode (RMGUI) and Immediate Mode (IMGUI). Here, I want to discuss Immediate Mode GUI (IMGUI), which has many examples in desktop and app contexts, such as games and simulation software. I want to try it on the web. During my previous work, I encountered an issue with a long table. When implementing it with an HTML table, it became less smooth with multiple instances. Eventually, I created a table using canvas2d, inspired by Flipboard/react-canvas. This was an early project that probably went unnoticed, and it was also an attempt at IMGUI.
Now, there is already a solid foundation in place. r3f provides the renderer, and flex offers a layout approach similar to yoga. For the UI, I borrowed concepts from designers. The final task is simply to map the scene, which has also been attempted by others.
Currently developing the UI part on Figma.
The map renderer is stuck at version 18.2, while Yoga Flex is at 18.3. Waiting for R3F to reach the next major version before continuing.
PATIENT Medical FUI - Jan Gryc
In Progress