L3 INTEGRATION EXAMPLE
DINOTRASH
Video soon WIP.
PRODUCTION READY INTEGRATION
3 CHARACTER RESPONSIVE SELECTION SCREEN: 5.5 days.
For this L3 project, we delivered a production-ready Unreal UI flow.
With responsive layouts for the targeted platforms and a complex scalable widget architecture with around 10 widgets. 3 different character cards.
CTA buttons, card buttons and card titles can be instantiated and most of the parameters or visual elements can be customized for each use case later on. It is a practical started design system.
Advanced navigation and interaction included. Items can be hovered to display extra information and selected. Console focus navigation is also included.
Blueprint logic includes instantiation, instance customization, navigation, animation and advanced responsiveness for PC, console, tablet and mobile.
Each card included 3 animation: hovered, selected and unfocused. CTA buttons and card buttons also include hovered animations. All inside the material.
Everything is delivered PIE-ready and prepared for migration.
VISUAL SYSTEMS
Complex and rich visual systems done with a few fluid images. Each one a visual system on its own that adapts to containers and screen layouts. Easy to setup and iterate. That is the key to a quick delivery and solid results.
RESPONSIVENESS
One visual system, ready for every context. Everything is responsive. You can preview and control how visuals adapt across sizes, ratios, platforms and inputs before responsive issues become expensive fixes.
RICH VISUALS
From the simple buttons to the cards, fluid images can display multiple textures, colors and the variety of visual elements that along with motion create a full story. We do not need many images to obtain this result.
ANIMATION
Material parameters animated in the timeline creating depth, adding a narrative and motion feedback that make the screen feel alive. 3 animations per car and all the buttons are also animated on hover.
DESIGN SYSTEM
L3 integration provides reusable patterns for your future design system, production-ready, scalable and consistent from the start. Add parameters, customize anything from the materials and you are ready to go.
NAVIGATION
Characters can be selected by mouse and controller. Controller navigation is focus based with natural navigation patterns. On hover or focus we display extra information and when we select them actions are shown.
SIGHT SHIFT & DEPTH
Depth through parallax. Using a Fluid image I can pan textures in opposite directions and the result is a sight shift, a good old depth effect and tells the story of each character along the way. L3 delivers advanced responsiveness, optimized material systems, polished interactions and scalable widget architecture—reducing bugs, duplicated work and costly rework across platforms. Earlier work efforts pays out at the end.
INTEGRATION EXAMPLES
Whether you need a quick MVP for user testing, a vertical slice for stakeholders, or a commercial-ready implementation for production, each delivery level follows the same principles: responsiveness, maintainability, and fast iteration.
Get a quote
or Linkedin I chooma@visuall.ca
Integration services
I provide 3 integration levels to bring your new features and new screen flow designs to Unreal
L3
PRODUCTION READY
Commercial release I Scalable integration
Solid cross platform (targeted platforms) responsive layout. Complex widget structure.
Well optimized Material-centric UI integration. As few materials as possible.
Advanced UI Interactions and UX motions plugged into materials and blueprint logic
Delivered in Unreal, PIE able and ready to be migrated into your project.
Estimation is based on 1 section or screen flow with 1 to 3 screens and shared widgets.
L2
MOST VIABLE PRODUCT
Stakeholder reviews I Vertical Slices
Cross platform (targeted platforms) responsive layout. Medium nested widget structure.
Medium level Material-centric UI integration. As few materials as possible.
Basic UI Interactions and UX motions plugged into materials and blueprint logic.
Delivered in Unreal, PIE able and ready to be migrated into your project.
Estimation is based on 1 section or screen flow with 1 to 2 screens and shared widgets.
L1
PLAYTEST PROTOTYPE
Fast validation I User testing
Minimum cross platform (targeted platforms) responsive layout. Simple widget structure.
Minimum Material-centric UI integration. Speed determines the amount of materials.
Minimum UI Interactions and UX motions plugged into materials and blueprint logic.
Delivered in Unreal, PIE able and ready to be migrated into your project.
Estimation is based on 1 screens
flow and shared widgets.
A SMARTER AND FASTER WAY TO MAKE GAME UI
A responsive, material-centric approach designed for scalable game production
RESPONSIVE
SYSTEMS
FLUID
INTEGRATION
SMART
TOOLING
Design once and adapt across platforms, inputs and aspect ratios
A streamlined workflow that connects design and implementation
Plugins & automation built to accelerate cross-platform development
Illustrations: WIP AI placeholders. To be replaced!
RESPONSIVE SYSTEMS
Design once and adapt across platforms, inputs and aspect ratios.
FLUID INTEGRATION
A streamlined workflow that connects design and implementation
SMART TOOLING
Custom plugins and automation built to accelerate development
Illustrations: WIP AI placeholders. To be replaced!
