UE5 Technical Art Breakdown: Widgets & Materials (videos on this link)
A showcase of various UI tools and materials developed in Unreal Engine 5.
Core Technologies & Techniques:
• Frameworks: Slate, C++, and UMG.
• Visuals: UI Post-processing & advanced Material Graph.
• Logic: Applied maths for dynamic behaviors.
Key Feature: Developed a custom "CSS-like" system to globally drive the glass material theme, removing the need to manually edit individual widgets.

From UX Audit to Shipped Interface: My Work on InReplica at Gambi-M

At Gambi-M, I worked on InReplica, a 3D solution built on Unreal Engine that lets industrial companies edit and visualize their facilities in a virtual environment, from mapping hazard zones to tracking radiological readings at every workstation. In practice, a technician can walk through a digital replica of an industrial site, check the risks tied to each piece of equipment, and document an intervention without ever going back on-site.

My work on this project happened in two phases. First, a full UI/UX audit of the existing application, delivered as a set of concrete, benchmarked proposals. Later, as tech artist, I implemented a large part of that new direction directly inside Unreal Engine 5, building the widgets, the icon system, and the visual "skin" that shipped in the new version of InReplica.

Phase one: auditing before proposing

InReplica already solved a real technical problem: centralizing site editing and visualization in one tool. But a tool that works technically isn't necessarily pleasant to use. A few signals justified the audit: a user base expected to skew younger, growing competition on this type of solution, and Gambi-M's ambition to ship a product people actually want to reopen, not just tolerate. The goal wasn't to rebuild the app, it was to make life easier for the user who receives no training and has to figure the tool out alone.

I inventoried the existing interface screen by screen, always separating two layers: UI, the visual layer that makes people enjoy the tool, and UX, the feel and fluidity of the journey itself. The two work in tandem, a button that doesn't look like a button breaks the experience just as much as a poorly thought-out flow.

Rather than inventing solutions from scratch, I benchmarked each piece of InReplica against conventions already proven in professional software users likely already know: Blender, Photoshop, Affinity, AutoCAD, SolidWorks. The logic is simple, a user who has already used one of these tools brings their reflexes with them. Leaning on those conventions cuts the learning curve instead of adding one more proprietary system to memorize.

The main menu. Originally, InReplica relied entirely on a radial pie menu bundling every tool, editing, display, navigation, into a single ring of icons. Efficient for power users who want the full toolset in one glance, but invisible and unintuitive for anyone new, who has no way to tell tool families apart.

Existing radial menu

My proposal wasn't to remove the radial menu, but to complement it: keep it for advanced users who value its speed, and add a classic top menu bar for beginners, closer to what any desktop application offers. Multiply entry points instead of forcing everyone through one.

Proposed menu bar

The same logic applied to the toolbox (moved from a horizontal top bar to a vertical sidebar, following the pattern nearly every creative and technical tool has converged on) and to the minimap, which took up a disproportionate amount of screen space in the bottom-left corner and wasn't always visible. I proposed a smaller round minimap in the top-right, a coordinate grid, a dedicated floor-switching control, and an "M" shortcut (and a button) to pull up a full-screen map on demand.

Phase two: building the shipped version

After validation, I moved from proposing to building. As the project's tech artist, I implemented the new widget system directly in Unreal Engine 5, the navigation menu, the toolbar, generic window frames, the minimap, the full map window, tags, tooltips, toast notifications, filtering tools, and the closing/window-management interface. Most of the audit's core ideas made it into this shipped version.

The round minimap and the expandable map window are a direct continuation of the cartography proposal from the audit, round shape, coordinate awareness, and a dedicated full-screen view reachable in one click.

Beyond layout, this phase also meant technical UI work: building custom materials for rounded interface elements, and designing a full icon set, clean, borderless, animated, and consistent across every application in the suite (V-isite, Id-Entity, G-Ray, Re-Design). Icons went from mismatched glyphs scattered across the interface to a coherent white icon language overlaid directly on the 3D scan itself.

I also documented the process behind this work, the widget architecture, the material setup, the icon pipeline, specifically so the rest of the team could pick it up without depending on me for every change. Reducing that single point of dependency was as much a part of the deliverable as the interface itself.

Under the hood

A lot of this shipped visual language lived below the surface, in custom materials and reusable widget systems built specifically for InReplica.

Selecting and highlighting objects in the 3D scene relies on two custom post-process materials driven by Unreal's stencil buffer: one draws a scene-wide outline around any flagged object, the other renders a translucent "ghost" silhouette for the current selection by hiding its regular mesh and depth pass and showing only the post-process material instead. Both read the same custom depth-stencil write mask, so switching an object's visibility mode is just a matter of which stencil value it carries.

Some bicolor icon set followed a similar path from design tool to engine: icons were authored in Photoshop, then rebuilt as a two-texture Unreal material, so a single icon asset can recolor itself dynamically instead of needing a separate baked variant for every color using different color channel of an image.
Exemple of a bicolor Icon using RED and BLUE channel

Two of the more involved systems were the color picker and the time-series chart, both built as reusable UMG/Slate widgets any application in the suite can drop in. The color picker drives its hue/saturation/value spectrum through dynamic material instances, and adds a hex input, an eyedropper that samples pixel color straight off the screen, and a saved color history synced to disk. The chart widget — used to plot readings like radiological measurements over time — is a small custom C++ Slate widget wrapped in a UMG layer, with zoom, pan, point selection and hover tooltips on live data series, and auto-generated legends for whatever curves get added.

The tag system in the Id-Entity app ties both worlds together: a billboard material renders the glowing marker in 3D space, while a companion widget draws the connecting line through its own dedicated material — adjustable thickness, smoothness, and an optional underline — and anchors the label, icon and text at the end of it.

Tag system

What this project left behind

The project's own wrap-up captured it well: it gave the new version of InReplica both an artistic and a functional direction. Interface improvements have kept going since, driven by the product team's evolving needs, and some systems are due for another review as new applications get added to the suite. Nothing here was ever meant to be "finished and validated", it was meant to open a conversation grounded in real benchmarks instead of opinions.

Five principles ran through the whole project, from the first audit slide to the last shipped widget: multiply entry points rather than forcing a single path, lean on conventions users already know, simplify the journey without cutting corners on the actual need, unify the different applications with one visual language, and strip out unnecessary friction wherever it hid. The target was always the same, stated plainly in the original audit: InReplica should be easier to use than a sheet of paper and a pencil. If the digital tool is more of a hassle than the paper it replaces, the mission isn't accomplished, no matter how solid the engineering underneath.

That tension between technical robustness and everyday usability is what made this project worth doing twice, once on paper, once in the engine. It's never really about making something look nice. It's about making a genuinely complex tool accessible to the people who have to use it on-site, every day.