Warning UI feels wrong

I’m trying to create a warning UI, but for some reason I feel like there’s something wrong with it:

I’ve tried getting rid of the context info and shrinking it to make it more generic, but that makes it feel too empty:

Removing the context and shrinking the UI makes it too clumped:

I can’t for the life of figure out how to get it right. Any suggestions?

1 Like

There’s too much empty space surrounding the UI. You have to find the right fit in the scale of the button, description, and possibly add other details rather than just text, a title and a button. Gradients also help make the UI feel more lively.

It’s meant to be a simple, minimalistic UI, and I’m afraid adding too many elements may distract from that. Finding the right fit for the scale of it is exactly what I’m trying to get feedback on.

I didn’t really consider gradients, but it seems interesting. I’ll definitely play with them a little, thanks!

more padding above the title, and you’re missing a “cancel” button too, since you’re asking for confirmation. otherwise the first one looks great

2 Likes

the “Executing” text is really large. shrink it, then shrink the frame.

also like @cxmeels said, add a cancel button.

1 Like

The “Proceed” button should be a light gray, along with the text.

Make the warning text red and in all caps. Then add a Ui stroke to the frame(it adds a stroke to the UI). Then copy paste the color of the frame into the color of the Ui stroke. After that make it darker. That’s what I’d do.

This is just my 2 cents, but here

Notice how the text at the sides don’t have much of a border to meet. Honestly speaking it would be better if you could add side borders into the GUI, visible or not
image
Color would probably be better too, said above

i think you can try making the distance between the warning text and the top then the distance between proceed and the bottom

you can try adding a bigger outline of the GUI but a slight bit so it may be noticeable if you focus harder

I don’t know how nobody is talking about this, but colors play a big role in video game design. I think using hazardous colors such as red, or yellow could easily help implement a sense of urgency and caution.
Also, adding a slow, flashing fade in and out could also really benefit he panel to even more grab the player’s attention.
TLDR; Add red coloring, and// or add hazard-like colors + Flashing things grab attention, make it flashy.

2 Likes

the button is too close to the bottom and too big

Seems like you’re going for a simple design, but here’s some stuff you should change:

  • Add a material “warning” icon
  • Color the outline of the proceed button red
  • Add a cancel button
  • Change the title to a bold font, and make it full-caps

Here’s what I’d vision it to be.

1 Like

I created mockups that you could reference from, or use as inspiration. Hope this helps.