I don’t know how many of you have have attempted to make a nice looking UI yet, but the process is not very friendly at all. The current tools provided are not up the job, but they could be with some simple tweaks.
Take the following link for the Best Practices from the site:
The page talks about how to make an easy to use and versatile UI and shows you some very nice pictures. The problem is, all of the pictures are done in the way they say not to.
This picture is their example at showing how this texture will not scale to a different size without distortion.
The problem is that you cannot currently take their advice and make a UI that scales, without building it yourself with custom objects.
On the UMG page for DPI scaling, they have picture showing this issue in action:
https://docs.unrealengine.com/latest/images/Engine/UMG/UserGuide/DPIScaling/DPIscaling.png
The side edges are much thicker than the top edges, and while it looks ok here on these buttons, the effect is undesired in most UI situations.
It is worth noting that this effect also causes issues with things like an RTS unit selection box for Drag Selecting units.
After just writing it off as a ‘I’ll come back to it later/they will have a new system by then’ in 4.9, and now we are in 4.13 and it is the same state.
Achieving a popup window box like shown on the website below, is rather complicated unless you either accept non-uniform scaling or just stay at 1:1 ratio with your content.
This does not solve all the issues still, as borders will be stretched instead of remaining a nice clean boundary.
https://docs.unrealengine.com/latest/images/Engine/UMG/UserGuide/BestPractices/UserWidgets.jpg
Below is a quick mock-up I did to show this example more clearly. While creating this, I also noticed another issue with the builtin border widget, one of the primary ways to add style your UI.
As you can see below, the border widget does not scale properly as well.
Click for larger image](http://i.imgur.com/2HlPxLe.png)
However the main issue with the border is its current implementation makes it only usable for solid colors, due to strange decisions with the alignment (or rather tiling direction).
You can also see my texture compression artifacts at scale that I have to remember how to fix 
The builtin border widget needs to have 3 image slots, one for the corners, and one for the edges. In addition, they need to be tiled correctly.
Implementing a background is kind of hard if you want it to be something other than a flat square. If you try the pad the edges of the border with nested borders, the effect will only work if the inside edge of your border is exactly square as well…
Not really a flexible option. We cannot even implement the Wood/Stone/Parchment effect from above, even if the border effect worked, the background would just not fit in the right size.
My current implementation is a 5x5 grid panel, using 9 textures (since I couldn’t find a simple way to mirror them). The grid is 5x5 instead of 3x3 to allow the background to fit to the middle of the border rather than the edge.
Ideally the builtin border widget would be able to handle all of this functionality out of the box. It should take 3 images in border mode, Corner/Edge/Background.
I cannot even think of a reason to use the current Border ‘Box’ implementation, i guess it makes a quick 3x3 alternating tile mosaic…
Is there something I am missing here?
Any UMG UI tricks you guys have found to make things look good?
After giving it some more thought, if you are planning a robust ui, you may want to make your own grid container anyways.
The builtin border function would need to have options on the corner tiling to be able to make something like this with only 3 images:
