Feedback on my Calculator GUI

So I was laying in bed ready to sleep… Until I had the urge to make a calculator Gui. (Probably script it as well) And this is my attempt on it:

I would like to know your opinion and what can I do to improve my Ui and make it look a bit more interesting? Because right now I think it’s bland and I don’t know what should I do to improve it.

9 Likes

Looks nice, I would round the corners of the Gui!

Keep up the good work! :slight_smile:

4 Likes

I’d say you don’t have enough padding.

Some designers often underestimate the importance of padding in GUIs. After all, it’s just empty space. Why have it?

Padding can be (and is!) useful for two main reasons:

  1. When done right, it establishes a consistent “rythm” in your design, which guides the eye along the layout gracefully, directing the user to the components that you want them to focus on.

  2. It provides breathing room so that the UI feels less cramped. When a button has minimal padding, either the text is too big to read comfortably, or the button is too small to click! You will generally want good-sized text on a good-sized button, which requires padding.

I think the lack of padding is especially noticeable on the parenthesis buttons and the int button. However, all of the buttons suffer from it to a certain degree.

1 Like

I kinda like the corners though, makes it seem the GUI is “serious”

1 Like

Input is a little bit too big and the Output way too small. I feel like I’m straining my head when looking at the Output, and the Input looks as if it’s popping out at me which I don’t like.

Maybe make the corners round like a real calculator.

Maybe just add some more shades and colors eventually?
Look, the default windows calculator:


It has a lot of gray and black, but has kinda has a variety of the shades. You could try that.
And maybe instead of showing all the functions, add a button where the GUI changes and then shows them all, because your GUI feels like there is a lot of thing there. See the image above? Many functions are hidden and can be shown by clicking a button.

Besides, keep up the great work and good luck scripting it! :happy2:

1 Like

Just woke up from a long nap and I sure have a lot of things to unpack here.

Amazing, I would like to try it when it gets released

Would suggest using the actual multiplication symbol (‘×’) instead of the letter ‘x’ for the multiplication button which looks slightly off.

While you’re at it, the actual subtraction symbol is . 1 − 2 + 3 > 1 - 2 + 3.

+− - Subtraction symbol
+- - Hyphen

1 Like

Ah yes, upon closer inspection the hyphen does look visibly shorter, making it inconsistent with the plus sign (though both the hyphen and real subtraction symbol are adequately aligned to the middle).

Thanks for pointing it out.

image