Help me with my GUI layout? ;O;

[broken_angel]

Every time I delve into a project, I get hung up on the stupid details of the GUI. I get so focused on trying to make it look "professional" that I'm never happy with anything I come up with, so I end up redoing everything fifteen or twenty times...and still am not happy with it, which leads to depression, which leads to me giving up on the project altogether.

As determined as I was to not let it happen this time now that I've finally gotten back into working on a game again...I keep repeating the same cycle. -.-

This is kind of what I have so far, using placeholder images:


As you can see, I'm trying to go for something kind of similar to DA2's GUI: simple, sleek, semi-transparent black. No, it's not a pretty GUI style, but I figure it's something I can actually make with my limited skills and not butcher completely. Still... trying to adapt that kind of style to what I need is not as easy as I had hoped.

The sample above isn't BAD, but it's not good either. I don't like it. And the worst part is, I don't know WHY I don't like it.

Any suggestions would be greatly appreciated.

[Rewritten Ennui]

I think that the Ren'Py Help section would be more suitable for this kind of thing.

Anyways, I don't think that the side image does much, so you should take that out. You can keep it for the MC, but other characters don't need it.

[broken_angel]

I'm asking for layout advice, for the presentation of it. That's not "Ren'py Help" which is geared towards programming questions, it's more like I'm asking something like "does my background look okay?"

The MC has her own much larger side image. I just figure that it's hard to figure who's talking when there are multiple characters on the screen, so that's why I had the little head there. But I'll consider leaving it out.

Thanks for the quick response.

[Samu-kun]

Psst.... if a suspicious guy with a mustache comes around offering help... make sure you use this! (hands her pepper spray)

[Camille]

I think it's alright, personally! I do think that if you removed the double border around the text box, it'd look better, though I'm just biased against double borders, in general. XD

[Aleema]

For the record, I hated DA2's GUI. Made a thread about it on their forum and everything. BUT I'S NOT GIVES YOU CRITIQUES. I gives you tips.

Consider unifying or bettering the color scheme. You've got black down pat, but the red, yellow, and murky yellowish tan color are more condiments than a good scheme. If I were you, I'd chose HP/MP colors that would compliment your game. I see several splashes of green in your art. For instance, in your avatar her eyes and jewel are green. Maybe that can be one of the highlight colors you use throughout the game. In my game, yellow is the color of life so that is what the color of my health bars (and several other things, it's a trending color).

Your text is very sharp, as in it doesn't look anti-aliased, but your graphics are soft, almost fuzzy. For that crisp text, I'd recommend thin and sharp lines rather than thick or soft ones. Also, if a drop_shadow at all looks good on your text, totally do it. And what are those numbers in the top-left? Maybe an icon like a coin or something would indicate what they are.

With the DA2 style, avoid flourish, such as the 2nd outline in the dialogue box.

Don't use MS Paint. I don't know if you still use it, but you had once said you did. You would you'd be surprised by how much more professional your work becomes if you just get over the learning curve of some more legit photo editors.

Be more creative. Emulating others alone will leave you with superfluous things. Instead, think about if you need things to begin with. Start with a blank canvas and ask yourself, what do I need to show? Do we need to see their side portraits because there will be tons of scenes with more than people you can see on screen? Will battles just spring up outta nowhere in cutscenes that we really need to see their HP/MP constantly? Do we need to know the chapter name at all times, too? Stuff like that. Keep in mind that DA2 was a game where you could freely walk around, and you needed a UI that was always on screen that could accommodate for battles and non-battles alike. Since your game is going to go to a new screen entirely for battle, it's not really necessary for you.

>_> Hope this post was more helpful than not.

[broken_angel]

It was helpful, Aleema. Thanks.

I know you hated DA2's GUI. xD And I know it's not a great example to try to work from, but as I said, I needed something that I could do.

For the record, I've gotten pretty proficient with GIMP now. So I can do a lot higher quality stuff than I could before, but I'm still no graphic artist. I have no eye for layouts at all. That's why I tried to find one that I could kind of copy from; I tried starting from scratch, but just couldn't come up with a good design. Or a more common problem would be that I came up with something amazing, but couldn't make it to save my life.

I know I don't need the little health bars on the screen; those were haphazardly added when I was fiddling around on MS Word, hence why the font is crisp versus the shady edges and whatnot, why the health bars aren't the right color, and why the numbers don't have coin icons. The sample is more like a "sketch" that I'll clean up eventually...or would, if I thought it were decent enough to bother.

The actual current layout looks like this.

As for the colors, my main accent color is red, because roses are a big theme. I'll try to bring that out more with less yellow.

For the layout in general...I'll keep working on it, I guess.

[Aleema]

Hum, I think that looks a lot better already. It would look great if the dialogue box didn't have sharp jaged lines. It's a cool effect, but it's not consistent with anything else. Just round and straighten the edges, and that would be a very decent box. And I would recommend moving the currency down just a pixel or two (there's more margin on the bottom than the top). My last suggestion is to take bold off of the character name. Or get the actual bold font file for the font you're using (you'd still have to toggle the bold off, though).
I think the code is:

Code: Select all

style.say_label.bold = False

Because leaving a machine-rendered bold to design a very important part of the GUI is not too pleasing to see, especially on fancy fonts (you can't see the hole in the E for example).

And that's it. Keep on keepin' on.

edit: Also, DA2 was a large-budget commercial game that had a beautiful GUI in the first game. So I didn't like it for contextual reasons more than anything, so you or anyone else having a similar style is not really an issue to me.

[Tsundere Lightning]

I would lose the font on the top, and use the one you have in the dialog boxes.

The icons on the right side are hard to read because the contrast between black and... grey is low. I have to squint to figure out what they are.

Consider unifying or bettering the color scheme. You've got black down pat, but the red, yellow, and murky yellowish tan color are more condiments than a good scheme. If I were you, I'd chose HP/MP colors that would compliment your game. I see several splashes of green in your art. For instance, in your avatar her eyes and jewel are green. Maybe that can be one of the highlight colors you use throughout the game. In my game, yellow is the color of life so that is what the color of my health bars (and several other things, it's a trending color).

Just chiming in to say that this is very good advice. It made me think of the use of the colors orange and blue in Evangelion (orange for humans and blue for the Angels), which was a recurring motif.

[mugenjohncel]

Psst.... if a suspicious guy with a mustache comes around offering help... make sure you use this! (hands her pepper spray)

No don't take it! It is poison! Once you touch it you will become one of them... you don not want to be a part of the Moe-moe army now right?... You will be forever surrounded by rainbows and flowers and the color pink if you touch that!...

Now about your GUI... the problem I see with it is it's too cluttered and overwhelms the artwork which is the bread and butter of Visual Novels... I suggest you minimize the overlays or position them in a way that will maximize the area allocated to the actual art and remove unnecessary and redundant items... here is a suggestion based on your example...



"POOF" (Disappears)

[broken_angel]

Aleema - Didn't know you could unbold that, but I've definitely been wanting to. Thanks!

Mugen - I actually really like that layout. C:
I'll consider rearranging the elements around like that and see how it looks.