Need Feedback on Menu Design (I'm too hard on myself)

[Winter_Beetle]

Again, I'm not sure if this is the best place to post. Its more feedback and advice on graphic design more than anything else, really.

Spoiler

(DON'T worry about the misaligned text and actor images, those still need to be aligned. I'm focusing on drawing up custom graphics for the menus first.)

I've been spending a ton of hours every day trying to make Custom menus on VX Ace and its disheartening when I don't feel like they look good. Truth be told, it looks like a ms-paint nightmare, as I can't draw and I feel like I've hit my limit with my ability to draw well. As well as this...
-I despise the default RTP. So many games on steam use it, I want to make something that's of my own creation.
-I don't feel right ripping assets from somewhere else as I don't feel like its my original content.
-I don't feel right commissioning someone, as I fear our mixed art styles might clash and end up making the game look even worse.

And with all these factors going on, I'm constantly trying to make compromises with myself, constantly telling myself to do better when I can't and... I just can't.

...I would really appreciate it if you guys could help me. Tips, honest critique, anything that's going to help me out with my graphic design. Am I doing the right thing?

 

[cekobico]

First of all, let me applaud you on your courage and effort to customize the default look of your menu. It is indeed a rare sight within RM games to have customized menu. So, kudos and good luck on improving it.

Second, it's hard to judge your design with the misaligned elements. I think you should fix it first so we can have a better look on how it's going to be.


My advice on the custom boxes is that it's still look basic-ish. For a game with modern-setting, simple rounded-rectangle might work, as Persona did it. But you really wanna go crazy with bevel/emboss (ok maybe not too crazy) with RPG setting, ornate frames and decoration sell the look better like in this example.
If you have vector program, take a look at www.freepik.com has many royalty-free graphics you can use if you're going the non-commercial route.

 

[HexMozart88]

Red: Why are they uneven?
Orange: How come the other two have black borders but this and the command window don't? What's even going there?
Pink: Why is there a different font?
Green: What's that thing? Is that your cursor? It looks rather out of place.
Turquoise: Those would look nicer as portraits rather than faces.
Blue: Those should either be at the top or the bottom of the boxes, instead of right smack in the middle.
Purple: I'd suggest you play around with the colours a little bit with those HP/MP bars. Because the two colours are so close, there's hardly a gradient.
General note: I agree with the previous statement. Your frames are far too simple. If you'd like to stick with the purple and black, you may want to
try adding some gradients or bevel it a bit. Those borders need to really make your characters pop.
I have to commend you for your efforts, though. Pretty good for just starting out.

 

[Kes]

[move]Resource Support[/move]

This is a section of the site which deals specifically with helping people create resources.

 

[Sharm]

Graphic Design (which includes layout and UI design) is a field of art significant enough to have a separate degree in schools. Getting good at it is not an insignificant investment. Don't be worried that you can't get it on your first try. It's a skill, and you'll need to do some study and practice to get that skill for yourself.

There are some free online courses you could take to learn about it, and I've seen some really good tutorials. Unfortunately the tutorials can get technical quickly so they might not be useful if you don't have an artistic background.

On the positive side, even though you'll have to learn a lot to get a good UI you don't actually have to have any artistic ability to create the artwork.

I wish you luck. I went to college to learn Graphic Design and I still haven't got the hang of it, so don't feel bad if you need to reconsider hiring someone else. I wouldn't worry so much about matching styles. A good artist can change their style to match you after all.

 

[Alarkus]

It's a bit confusing. Are the portraits intended to sit in the middle of the boxes?

 

[Winter_Beetle]

Red: Why are they uneven?
Orange: How come the other two have black borders but this and the command window don't? What's even going there?
Pink: Why is there a different font?
Green: What's that thing? Is that your cursor? It looks rather out of place.
Turquoise: Those would look nicer as portraits rather than faces.
Blue: Those should either be at the top or the bottom of the boxes, instead of right smack in the middle.
Purple: I'd suggest you play around with the colours a little bit with those HP/MP bars. Because the two colours are so close, there's hardly a gradient.
General note: I agree with the previous statement. Your frames are far too simple. If you'd like to stick with the purple and black, you may want to
try adding some gradients or bevel it a bit. Those borders need to really make your characters pop.
I have to commend you for your efforts, though. Pretty good for just starting out.

It's a bit confusing. Are the portraits intended to sit in the middle of the boxes?

The Menu is still a WIP, everything needs to be arranged properly. A third party member is meant to take up that empty space on the right, but the menu disappears and I just want the actor's details to disappear, not the menu itself. But that's something I'll work on.
I'll also play around with gradients and see what can be arranged with that.

Thank you, everyone.

 

[Sharm]

Are you trying to make it with programming first? That's not a good way to do it. Start with a mock-up, getting the programming to match your vision will be easier than trying to figure out how to get a working setup to look good. You can then show us your intentions and we can give you feedback on that and it'll be less frustrating to make changes.

 

[Winter_Beetle]

[move]Resource Support[/move]

This is a section of the site which deals specifically with helping people create resources.

I'll keep that in mind next time, thank you. Still getting the hang of this forum.

Are you trying to make it with programming first? That's not a good way to do it. Start with a mock-up, getting the programming to match your vision will be easier than trying to figure out how to get a working setup to look good. You can then show us your intentions and we can give you feedback on that and it'll be less frustrating to make changes.

Spoiler

Did you mean a mock-up like this? Either way, using the actual in-game menu sprite I'm using, here's a planned actor menu. There's lots of empty space though, not sure what to do with it.

 

[Sharm]

That's close to what I mean, but a full mockup would show how it all looks at once, as if it was a screenshot.

 

[Winter_Beetle]

Spoiler

Its been a couple of days now, but I'm slowly working on my mockup menu in SAI, as well as custom selection bars as Yanfly's icon script doesn't work.
I'm still deciding on a font I want to use, I'm not adding any text to the mockup yet.
Actor information layout is still upcoming.
How does this look so far?

 

[HexMozart88]

The buttons themselves look a little strange, but that's because they're cut off. For the actual panels, that's a little bit better, but I'd angle the gradient a bit and add a bit of beveling. Also, try to smooth out the edges a bit. It looks pixel-y, but not like normal pixel art. More like the quality is really low. I think that's one of the contributing factors to making it an "MS Paint nightmare".

 

[Winter_Beetle]

The buttons themselves look a little strange, but that's because they're cut off. For the actual panels, that's a little bit better, but I'd angle the gradient a bit and add a bit of beveling. Also, try to smooth out the edges a bit. It looks pixel-y, but not like normal pixel art. More like the quality is really low. I think that's one of the contributing factors to making it an "MS Paint nightmare".

Spoiler

I've smoothed out the edges of the actor menus, also closed off the edges of the selection menus. Also angled the gradients and added another in the other corner, just to see what it looks like. What's beveling?

How does this look...?

 

[HexMozart88]

Hmm. Beveling is only for Photoshop, I think. It's basically where you add lights and shadows to an object. But that's coming along nicely. I'd make the lighter colour just a wee bit lighter.

 

[Winter_Beetle]

Spoiler

I've lightened the colour between the gradients a little, how does this look?
(Your critique is honestly helping a lot, thank you.)

 

[HexMozart88]

Ah, perfect. You may not even need the beveling there. And, it's not a problem, LOL. Critique is... according to my teacher... the only thing I do well in art, so I'm happy to give it if it means improvement.

 

[Winter_Beetle]

Spoiler

Nothing specifically bad has happened, I just wanted to show what my main menu currently looks like. Still need to re-arrange everything (even though I did say I would work on that, haha...) but for now I just want to thank everyone for helping me out.

You're all good people.