{"id":14030,"date":"2026-04-09T10:25:09","date_gmt":"2026-04-09T15:25:09","guid":{"rendered":"https:\/\/visuall.ca\/gui\/?page_id=14030"},"modified":"2026-09-10T01:53:11","modified_gmt":"2026-09-10T06:53:11","slug":"methodology","status":"publish","type":"page","link":"https:\/\/visuall.ca\/gui\/methodology\/","title":{"rendered":"Methodology"},"content":{"rendered":"
\n
\n
<\/div>\n<\/div>\n<\/div>\n\n
\n
\n
\n

EVERY TOOL<\/p>\n<\/div><\/div>\n\n

PROVEN
EXPERTISE<\/p>\n<\/div><\/div>\n\n

SHAPED & POLISHED INTO<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n

(Illustrations: texturization with AI + Photoshop)<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n

\n
\n
\n

A PLATFORM-AGNOSTIC, RESPONSIVE<\/p>\n<\/div><\/div>\n\n

METHODOLOGY<\/p>\n<\/div><\/div>\n\n

3x Responsive<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\n

BUGS. RUN.<\/p>\n<\/div><\/div>\n\n

Some are AI WIP bugs, still dangerous to be replaced!<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n

\n
\n
\n

I<\/p>\n<\/div><\/div>\n\n

3X RESPONSIVE<\/p>\n<\/div><\/div>\n\n

<\/span><\/div>\n\n

RESPONSIVENESS?
TRIPLE PLEASE.<\/p>\n<\/div><\/div>\n\n

From design to implementation everything must adapt to the available screen space and facilitate the deliver of the best possible experience in the target platform.<\/p>\n<\/div><\/div>\n\n

\n
Show me<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n
\n
\n
\n
\n

When players need to reach tabs on PC<\/em><\/p>\n<\/div><\/div><\/div><\/div><\/div>\n\n

Players use the mouse to move the cursor<\/em><\/p>\n<\/div><\/div><\/div><\/div><\/div>\n\n

Reaching them it is easy no friction<\/p>\n<\/div><\/div><\/div><\/div><\/div>\n\n

On mobile things are quite different<\/em><\/p>\n<\/div><\/div><\/div><\/div><\/div>\n\n

Reaching tabs is not efforless<\/em><\/p>\n<\/div><\/div><\/div><\/div><\/div>\n\n

Accessibily layout changes are often neccesary<\/em><\/p>\n<\/div><\/div><\/div><\/div><\/div>\n<\/div><\/div>\n<\/div>\n\n

\n

(Illustration: texturization with AI + Photoshop)<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

1. PLATFORM + INPUT
RESPONSIVENESS<\/p>\n<\/div><\/div>\n\n

A single UI that naturally adapts to every platform and input method. From mobile touch to mouse & keyboard and controllers, every interaction feels intentional rather than adapted.<\/p>\n<\/div><\/div>\n\n

Using responsive layouts, scalable widgets and flexible interaction patterns, interfaces are built to accommodate multiple devices from the beginning. Instead of maintaining separate implementations, a unified production workflow keeps behavior and presentation consistent while significantly reducing rework throughout development.<\/span><\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n

\n
\n
\n
\n

Data needs UI layouts to be displayed<\/em><\/p>\n<\/div><\/div><\/div><\/div><\/div>\n\n

A good UI adapts to any screen ratio<\/span><\/em><\/p>\n<\/div><\/div><\/div><\/div><\/div>\n\n

UI must be fluid to welcome new widgets<\/em> <\/span><\/p>\n<\/div><\/div><\/div><\/div><\/div>\n\n

Live ops new events may blow any UI<\/em> <\/span><\/p>\n<\/div><\/div><\/div><\/div><\/div>\n\n

A good UI welcomes surprises<\/span><\/em><\/p>\n<\/div><\/div><\/div><\/div><\/div>\n<\/div><\/div>\n<\/div>\n\n

\n

(Illustration: texturization with AI + Photoshop)<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

2. ASPECT RATIO
RESPONSIVENESS<\/p>\n<\/div><\/div>\n\n

Interfaces that preserve usability and visual balance across every screen shape and size. Content adapts to different resolutions and aspect ratios without compromising hierarchy or readability.<\/p>\n<\/div><\/div>\n\n

Layouts are designed around fluid positioning, proportional scaling and intelligent constraints rather than fixed coordinates. The same interface expands, contracts and reorganizes itself as needed, minimizing platform-specific adjustments and making future content additions considerably easier.<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n

\n
\n
\n
\n

Materials are very adaptable to any UI<\/span><\/em><\/p>\n<\/div><\/div><\/div><\/div><\/div>\n\n

Any material can be responsive<\/span><\/em><\/p>\n<\/div><\/div><\/div><\/div><\/div>\n\n

And take many shapes<\/span><\/em><\/p>\n<\/div><\/div><\/div><\/div><\/div>\n\n

Optimized from inside out<\/span><\/em><\/p>\n<\/div><\/div><\/div><\/div><\/div>\n<\/div><\/div>\n<\/div>\n\n

\n

(Illustration: texturization with AI + Photoshop)<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

3. MATERIAL
RESPONSIVENESS<\/p>\n<\/div><\/div>\n\n

Responsive behavior built directly into UI materials instead of individual widgets. Visual adaptation becomes reusable, scalable and consistent across the entire interface.<\/p>\n<\/div><\/div>\n\n

By moving responsiveness into Unreal Engine's Material system, effects such as scaling, masking, borders and dynamic visual behaviors become shared building blocks. One optimized solution can drive hundreds of interface elements, simplifying maintenance while accelerating production across the project.<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n

\n
\n
\n

II<\/p>\n<\/div><\/div>\n\n

PLATFORM-AGNOSTIC<\/p>\n<\/div><\/div>\n\n

<\/span><\/div>\n\n

ONE INTEGRATION, EVERY PLATFORM.<\/p>\n<\/div><\/div>\n\n

Every platform deserves a native experience without requiring a separate implementation. By embedding platform guidelines, input behaviors and responsive rules into a single production workflow, interfaces remain consistent, scalable and significantly easier to maintain. Be fluid my friend.<\/p>\n<\/div><\/div>\n\n

A few unconventional tools included<\/strong>
Because game development rarely follows the manual<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n

(Illustration: texturization with AI + Photoshop)<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n

\n
\n
\n
<\/span><\/div>\n<\/div>\n\n
\n

OPTIMIZED<\/p>\n<\/div><\/div>\n\n

One material. Hundreds of widgets.<\/strong>
Shared rendering logic reduces duplication, simplifies maintenance and keeps interfaces lightweight as projects grow.<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n
<\/span><\/div>\n<\/div>\n\n
\n

SCALABLE<\/p>\n<\/div><\/div>\n\n

Build systems, not screens.<\/strong>
Reusable materials make expanding features, themes and content dramatically faster without rebuilding the interface.<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n
<\/span><\/div>\n<\/div>\n\n
\n

FLEXIBLE<\/p>\n<\/div><\/div>\n\n

One foundation. Endless variations.<\/strong>
Animations, masks, borders, gradients and effects become configurable instead of handcrafted for every widget.<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n
<\/span><\/div>\n<\/div>\n\n
\n

POWERFUL<\/p>\n<\/div><\/div>\n\n

Less complexity. More capability.<\/strong>
The Material Editor becomes a visual programming environment where rendering and responsiveness work together in real time.<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n
<\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n
\n
\n
\n

fun.<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n

\n
\n
\n
<\/span><\/div>\n<\/div>\n\n
\n
<\/span><\/div>\n<\/div>\n\n
\n
<\/span><\/div>\n<\/div>\n\n
\n
<\/span><\/div>\n<\/div>\n\n
\n
<\/span><\/div>\n<\/div>\n<\/div>\n\n
\n
\n
<\/span><\/div>\n<\/div>\n\n
\n

III<\/p>\n<\/div><\/div>\n\n

MATERIAL-CENTRIC UI<\/p>\n<\/div><\/div>\n\n

<\/span><\/div>\n\n

FUN DRAW-CALL WONDERS<\/p>\n<\/div><\/div>\n\n

Because solving hard problems should feel creative.<\/strong>
Material-centric UI turns every improvement into a multiplier. One optimization, one feature or one visual enhancement can benefit hundreds of interface elements, making production faster, maintenance simpler and future iterations dramatically more efficient.<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n
<\/span><\/div>\n<\/div>\n<\/div>\n\n
\n
\n
<\/span><\/div>\n<\/div>\n\n
\n
<\/span><\/div>\n<\/div>\n\n
\n
<\/span><\/div>\n<\/div>\n\n
\n
<\/span><\/div>\n<\/div>\n\n
\n
<\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n
\n
\n
\n

Do you need formation?<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n

<\/span><\/div><\/div>

Material-centric UI methodology<\/p>\n<\/div><\/div>

LEARN RESPONSIVE
PLATFORM-AGNOSTIC
UI IN UNREAL<\/p>\n<\/div><\/div>

6 courses - 12h videos - Fluid plugin
<\/p>\n<\/div><\/div>

Courses<\/a><\/div><\/div><\/div><\/div>\n\n
\n
\n
\n

Anything else?<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n

Let's PlAAAy!<\/h1>
Contact Me<\/a><\/div><\/div><\/div><\/div>
<\/div>
<\/div><\/section><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-14030","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/visuall.ca\/gui\/wp-json\/wp\/v2\/pages\/14030","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/visuall.ca\/gui\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/visuall.ca\/gui\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/visuall.ca\/gui\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/visuall.ca\/gui\/wp-json\/wp\/v2\/comments?post=14030"}],"version-history":[{"count":523,"href":"https:\/\/visuall.ca\/gui\/wp-json\/wp\/v2\/pages\/14030\/revisions"}],"predecessor-version":[{"id":18966,"href":"https:\/\/visuall.ca\/gui\/wp-json\/wp\/v2\/pages\/14030\/revisions\/18966"}],"wp:attachment":[{"href":"https:\/\/visuall.ca\/gui\/wp-json\/wp\/v2\/media?parent=14030"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}