Recently I posted a picture of my administration control panel in WAYWO, and it seemed people felt very strongly that I needed a new style.
Well the issue is, when it comes to graphics in general, I'm just terrible at it.
So when I was told I needed a new style, I was left a bit clueless on what exactly to change and what was wrong with my current style.
What do you guys consider to be essential in a nice looking GUI? Where did I go wrong with mine?
I used this website to help me choose the colors for it.
[url]http://www.flatuicolorpicker.com/all[/url]
Here's what the administration control panel I was speaking of looks like.
[IMG]http://s4.postimg.org/4774q4q4b/banok.gif[/IMG]
how about making the buttons look like the default derma buttons, but colored?
[sp]just brainstorming[/sp]
[QUOTE=mitterdoo;44540572]how about making the buttons look like the default derma buttons, but colored?
[sp]just brainstorming[/sp][/QUOTE]
I thought you could only change the color of the text without repainting the entire button?
Are the borders of the buttons one of the things that look bad?
There's too much white space, the rounded corners are too rounded, buttons look horrible, don't add those thick borders to any elements.
[QUOTE=Robotboy655;44540866]There's too much white space, the rounded corners are too rounded, buttons look horrible, don't add those thick borders to any elements.[/QUOTE]
Thanks, now I have a better idea what the problem was.
Most of that I can easily change, but do you have any suggestions on how to take care of the white space?
Should I make the panel smaller?
Mostly what you want to do is thin EVERYTHING down. You got the fat man version of a menu right there. Make borders and spacing between elements between 2-8, 10-14 to make a distinguishable difference between two things.
Try to stick with even numbers when sizing elements.
Using rounded elements is a very hard thing to pull off in a menu, stick to sharp corners if you want a much better result. I'm sure you can do well with rounded buttons, but never make the borders as thick as you have them, you want them extremely small
Also when you are sizing elements, try to go smaller as you work your way "deep" into the menu, and space things farther apart on your way out. So the biggest gap for example in my eyes would be between the actual command buttons, and the menu that corresponds to it.
Use a website like this to find colors that match well without having to look and guess.
[url]https://kuler.adobe.com/create/color-wheel/?base=2&rule=Monochromatic&selected=0&name=My%20Kuler%20Theme&mode=rgb&rgbvalues=0.5,0,0,1,0.30000000000000004,0.30000000000000004,1,0,0,0.5,0.15000000000000002,0.15000000000000002,0.8,0,0&swatchOrder=0,1,2,3,4[/url]
This is a site I found right away on google by searching things like complementary colors scheme picker.
I feel the best menus are the ones you make stupid simple. Once you are done, then go back and try to add a little pizazz. Focus on making it work, then making it look good.
Just some ideas, I'm not great with derma but I do enjoy them a lot for some reason unlike most people.
[editline]14th April 2014[/editline]
Also when it comes to colors, try to keep it down to one two or three with light shading between the three.
[QUOTE=Jeezy;44540943]Thanks, now I have a better idea what the problem was.
Most of that I can easily change, but do you have any suggestions on how to take care of the white space?
Should I make the panel smaller?[/QUOTE]
Well you take up way too much space on the right with the non-important stuff where you should have the scolling player selector like 80% of the panel's height...
As well as the panel areas with the text should be areas you can type in instead of using StringRequest
[QUOTE=OzymandiasJ;44541122]Well you take up way too much space on the right with the non-important stuff where you should have the scolling player selector like 80% of the panel's height...
As well as the panel areas with the text should be areas you can type in instead of using StringRequest[/QUOTE]
Well there are menus with a bigger scrolling player selection, it just depends on how many other controls need to go into the panel as well.
[IMG]http://i.gyazo.com/b40bde8034497e287e18338a4c34dd2e.png[/IMG]
Also I've been using StringRequest because I can't figure out how to focus in on the text entry, which I think will only allow you to if you have a DFrame and use MakePopup although I may be wrong. Although the issue is, this is a DPanel, and I'd prefer not to use MakePopup because I want to allow the player to be able to move around while the menu is open.
I'm doing something similar to this for creating the panel..
[url]http://wiki.garrysmod.com/page/Panel_Customization[/url]
Thanks for all the tips so far guys, I truly appreciate it. Graphical design has always been one of my weak points, please don't hesitate to tell me what looks bad, I need the criticism.
Make the outline around the button at least half the width of the outline around the inner menu. If you can not half it without making it an even number, increase the inner menu outline by two, then work from there.
Also use a DPanelList:SetSpacing(2) and see how that works for you on the DPanelList the rounded buttons are in.
Bring the Bring Player title up closer to the edge, and have the DPanelList below it do the same. I would say space the text anywhere from 8-22 to get a better feel. Same with the space from the bottom of the title to the DPanelList.
Let me know where that gets you, it does look better, but now you need to tighten up the elements a little more and get most of those button outlines taken care of.
[QUOTE=find me;44541231]:words:[/QUOTE]
Okay, I lowered the roundness and thickness of the outlines a bit.
Is this what you meant?
[url]http://i.gyazo.com/a13f57601069c863ca1d963e59ed944d.png[/url]
Like I said, don't hesitate to tell me it's garbage, I won't be offended. Otherwise it'll be difficult for me to learn what I'm doing wrong.
Oh woops, looks like I missed the part about the button's outlines being half the width of the inner panel's outline. I'll do that right now.
Try removing all outlines. Align buttons on the left with the panel on the left by their tops, make all paddings/margins even/the same.
[QUOTE=Robotboy655;44541488]Try removing all outlines. Align buttons on the left with the panel on the left by their tops, make all paddings/margins even/the same.[/QUOTE]
Do you mean like this?
[url]http://gyazo.com/ffc016e2083743f1a63c00cf188ea3fc[/url]
Or were you talking about the panel for the command's controls?
A tip when choosing colors is choosing with the HSV color space. Pick a nice Saturation and stick with that for all colors, then just change the Value and Hue for the different colors you need. It'll look amazing, I promise.
[QUOTE=Donkie;44541519]A tip when choosing colors is choosing with the HSV color space. Pick a nice Saturation and stick with that for all colors, then just change the Value and Hue for the different colors you need. It'll look amazing, I promise.[/QUOTE]
Heh I thought it was a good idea to use the first site I linked to create a list of predefined colors to avoid have color scheme issues, but I'm starting to think it was a waste of time because it doesn't seem to be helping.
This is what I mean, [url]http://gyazo.com/a82b84ef32e635fa66eda031a54ecfa8[/url]
No, I mean like this: [U][t][/U]http://i.imgur.com/LRdYEOK.png[/t]
And you should totally ditch the blue colors.
I'd suggest adding a Hue slider ( instead of preset color choice ) and using HSVToColor with different brightness for elements.
I do plan to allow the player to change the colors, the only reason I am using so much blue at the moment is because it matches the rest of the GUI in the gamemode I'm working on right now.
Also I see what you mean now, I probably got lazy when setting the sizes and position of the elements.
I did plan to eventually fix that I just wanted to get an idea of what the whole thing is going to look like. Maybe I should have been using the panel align functions this entire time..
Does this look better?
[url]http://gyazo.com/f7567f9739d20bf2f57292de274534bc[/url]
It looks better, but borders totally ruin it for me.
All borders that are thicker than two pixes look bad in my mind. Also, I would make padding between buttons/panel and border like 5px, and leave spacing between buttons themselves like you have it.
Like this?
[url]http://gyazo.com/f9c185eafe0a8643cf201d4371e1ea5d[/url]
If so either I can do what I did in the picture which was reducing the alignment distance, or I could decrease the size of the buttons and/or panel then increase the alignment.
What about the righr and left paddings? And try removing border on the inner box, it just doesn't fit. I guess you could make the buttons lower, because I assume there will be much more buttons than this.
[editline]14th April 2014[/editline]
Lower as in decrease height.
Alright, this is what I'm at..
[url]http://gyazo.com/a8cbf2b42aeafc63052d5d364cfcf68f[/url]
Maybe remove the box on the right and have it so when you click a button it takes you to a new page dedicated to the command / set of commands.
[QUOTE=AIX-Who;44541824]Maybe remove the box on the right and have it so when you click a button it takes you to a new page dedicated to the command / set of commands.[/QUOTE]
It already does that, it has categories for the commands, you click one, it opens a list of the commands, you click the command, and it displays a panel with the controls for the command on the right.
What's up with uneven paddings on the payer list and that box that serves no purpose under the bright box?
I thought of it as a background for the list, I'll probably just remove it.
I played around with it a bit trying to even out everything.
[url]http://gyazo.com/76fd5a6b072cf01eb30c97ef698ef979[/url]
Welp, i believe it's much better than it was when it started.
Thanks for the persistent help Robotboy, and thanks to the others who gave me advice as well.
Just in-case anyone else has anymore input, I'll leave this open for a day or so.
you gonna end with a sleek vgui :v
Anyway, i like how does this looks in the last pic
Too much blue!
Experiment with new colours
I think this would look good.
[url]http://s29.postimg.org/4x85s2xbb/exa.png[/url]
No drawing stuff behind the DPanelList.
Add DPanelList:SetPadding(2) to get off the scroll bar.
Invert the colors, darker on the outside and inside menu, light on the main panel.
Bring up the inside menu to butt up against the bottom of the DPanelList by 2 pixels.
And bring up the outside panel to butt up against the bottom of that one by the same spacing the top and sides are.
You could also probably get away with outlining the outside menu buttons if you like that, just make it a lighter color on the inside. Then when the mouse is over, make that color darker, then when it is clicked down, make the color lighter than the dark color, but darker than the original color.
[QUOTE=find me;44544357]I think this would look good.
[url]http://s29.postimg.org/4x85s2xbb/exa.png[/url]
No drawing stuff behind the DPanelList.
Add DPanelList:SetPadding(2) to get off the scroll bar.
Invert the colors, darker on the outside and inside menu, light on the main panel.
Bring up the inside menu to butt up against the bottom of the DPanelList by 2 pixels.
And bring up the outside panel to butt up against the bottom of that one by the same spacing the top and sides are.
You could also probably get away with outlining the outside menu buttons if you like that, just make it a lighter color on the inside. Then when the mouse is over, make that color darker, then when it is clicked down, make the color lighter than the dark color, but darker than the original color.[/QUOTE]
What's up with that whitespace on the bottom?
I edited his menu in paint, that's why I suggested butting up the outside panel to the inside one.
[editline]14th April 2014[/editline]
Because taking out that white space in paint would [I]actually[/I] leave a massive white space that would take away from the actual menu itself.
Sorry, you need to Log In to post a reply to this thread.
