Graphics Flat GUI Design Choice

M

Moon Goat

Guest
I'm creating a GUI for something I'm working on, but I'm kind of skeptical about which design I should go with:

GUI 1.png GUI 2.png
Please tell me which design you think is better, or if I should go with something completely different.
Thanks!
 
M

Moon Goat

Guest
I mean which one is better in general, in terms of visuals. I'm afraid the buttons in the first one might be too foamed in; that kind of thing.
 

Hyomoto

Member
Meh, modern UIs. There's a really, really fine line between 'looks clean' and 'looks lazy'. It's mostly about interaction feedback and intuitiveness than the actual shapes and colors, none of which I can see. I can't say either one of them jumps out. Honestly, they look too busy. It's probably just having too many clashing elements side by side that makes it cluttered and unfocused but it means that it's hard to say one looks better since the only other difference is color. I do like your radio buttons and check boxes with the 'cuts' though. Simple, but stands out more. The fonts on the other hand, no thank you. @Ethanicus has that logo in his signature, that's a fine type face. Not that it would work great for your menu or anything, just example of something that is pleasing to look at.
 

GMWolf

aka fel666
The first one for a horror, or grungy military game.

The second one for a more light hearted casual game.
 
M

Moon Goat

Guest
Meh, modern UIs. There's a really, really fine line between 'looks clean' and 'looks lazy'. It's mostly about interaction feedback and intuitiveness than the actual shapes and colors, none of which I can see. I can't say either one of them jumps out. Honestly, they look too busy. It's probably just having too many clashing elements side by side that makes it cluttered and unfocused but it means that it's hard to say one looks better since the only other difference is color. I do like your radio buttons and check boxes with the 'cuts' though. Simple, but stands out more. The fonts on the other hand, no thank you. @Ethanicus has that logo in his signature, that's a fine type face. Not that it would work great for your menu or anything, just example of something that is pleasing to look at.
If it were up to you to make something like this, would you go with the same basic "flat" design, or something entirely different? I'm trying to make something that makes the hovered/clicked elements stand out, regardless of whether the keyboard or mouse is is being used to navigate the thing.
 

NightFrost

Member
First thing I'd change is the font. I don't feel that round-ended fonts feel professional. I'm not sure I'd go for a greyscale UI either, unless that ties to the game's theme or were going for a four-color challenge. On the bluish one, the writing feels like it is getting squeezed, coming too close to button edges. I'd write in all caps and make font size at most half the height of buttons. The shapes of the widgets - scrollbar, radio, checkbox, toggle - I do like.
 

Hyomoto

Member
@Moon Goat - I'll be honest, I do like modern UI, I think it's hard to get just right. I think I described this badly, but what I was saying is that these elements matter less than the feedback the user receives when interacting with them, and I can't see any of that from a picture. Reading my comment again it sounds really mean, but I just meant I don't have enough information to say which one is better beyond what colors I like best. Someone posted a menu they did recently .... who was it? It was a nice flat style, but the animation and input feedback was on point, it just looked really good. Let me see if I can dig that up real quick ... here it is, the menu is just the first forty seconds or so.
@DukeSoft's project:

Also, this is Google's material design guidelines https://material.io/guidelines/.

The point is that a minimal or modern UI is more about the user being able to tell at a glance what is going on, what they can interact with and what they can't. In your pictures, you have the flat down but from this static image it's just too busy. I don't think any of it's bad, it's just all out of context so it's not easy to say 'that looks good'. I would gladly recommend a nice flat visual style with bold, easy-to-recognize information but just keep in mind it's really easy to overdo it and quickly escape the point of being a minimalist UI in the first place. For example, text? Don't use a lot of it. Basically don't make the user read unless they have to, save that for concepts that need explaining. If you do use text, make sure you pick a sharp type face that is nice and legible. Lastly, make sure it's evident what is useful and what isn't. In your first picture the buttons along the bottom seem useful, but it's not obvious if one is selected or not. Here's my edit of your above, this is a lazy edit and I apologize for that but it should explain some of what I mean.

I could keep playing with it but as you can see I've elevated some elements, uncluttered the screen a bit and tried to add some emphasis to whatever is currently being interacted with. I don't know if you'll find this information useful, but if it does, there you go! The only issue with flat design is when everything is flat and then you can't tell anything apart. That said you have the shapes down, and I like the clean lines so run with it and see what you come up with!
 
Last edited:

Yal

šŸ§ *penguin noises*
GMC Elder
There's more than one subdesign in each design, so I'll just copypaste the ones I feel work the best:
upload_2017-6-5_16-25-39.png
The broken edges here increases contrast and makes the boxes pop out more.

upload_2017-6-5_16-27-1.png
Having circles broken just feels disharmonic, though.

upload_2017-6-5_16-25-52.png
This is how a slider should look - not only showing you the current position clearly, it's also showing which side of the slider corresponds to the actual value. HOWEVER, sliders should have the 'fill' anchored to the left or bottom side, NEVER to the top or right side. We associate fills with liquids, and we read from left to right; top and right origins are harder to relate to.

upload_2017-6-5_16-26-14.png
The buttons without an outline just doesn't pop out enough, and black-on-white contrast just isn't easy on the eyes. I also really like the shadow edit by @Hyomoto too because it adds more 'pop' without adding more hard contrast.
 
M

Moon Goat

Guest
After some time, I created another design incorporating what you've all told me. In this one, the GUI components turn bright and invert their labels when hovered over.
Also sliders increase their width, and buttons shrink and darken when clicked on.
rect4136.png
 

Ethanicus

Ethan L!
Suggestion. Make the white a shade of gray instead? It seems to contrast too much and make it hard to see.
 
Top