Help me with my GUI layout? ;O;

Use this forum to help develop your game-making skills, and get feedback on writing, art, music, or anything else you've created that isn't attached to a game in progress.
Locked
Message
Author
broken_angel
Veteran
Posts: 322
Joined: Sun Oct 03, 2010 11:49 pm
Completed: Memoirs of an Angel (2010)
Projects: Memoirs of an Angel (Remake); W.I.S.H
Location: United States
Contact:

Help me with my GUI layout? ;O;

#1 Post by broken_angel » Sun Sep 18, 2011 10:53 pm

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:
Image

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.

User avatar
Rewritten Ennui
Veteran
Posts: 279
Joined: Thu Jul 14, 2011 1:50 pm
Organization: TwinTurtle Games
Contact:

Re: Help me with my GUI layout? ;O;

#2 Post by Rewritten Ennui » Sun Sep 18, 2011 11:00 pm

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.
I've swapped accounts to CheeryMoya, so this account is no longer in use. Refer to the new account if you want to contact me.

Twinturtle Games Website

broken_angel
Veteran
Posts: 322
Joined: Sun Oct 03, 2010 11:49 pm
Completed: Memoirs of an Angel (2010)
Projects: Memoirs of an Angel (Remake); W.I.S.H
Location: United States
Contact:

Re: Help me with my GUI layout? ;O;

#3 Post by broken_angel » Sun Sep 18, 2011 11:05 pm

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. :)

User avatar
Samu-kun
King of Moé
Posts: 2262
Joined: Mon Sep 03, 2007 3:49 pm
Organization: Love in Space Inc
Location: United States
Contact:

Re: Help me with my GUI layout? ;O;

#4 Post by Samu-kun » Sun Sep 18, 2011 11:10 pm

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

User avatar
Camille
Eileen-Class Veteran
Posts: 1226
Joined: Sat Apr 23, 2011 2:43 pm
Completed: Please see http://trash.moe
Projects: Spirit Parade
Organization: Cyanide Tea
Tumblr: narihira
Deviantart: crownwaltz
Skype: thievinghearts
Contact:

Re: Help me with my GUI layout? ;O;

#5 Post by Camille » Sun Sep 18, 2011 11:24 pm

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
1/2 of Cyanide Tea | Break Chance Memento (BL) | Spirit Parade (Otome) | Portfolio/List of Works/Contact
I'm not around LSF very much these days; please contact me via Skype/Twitter. Ask me things!

User avatar
Aleema
Lemma-Class Veteran
Posts: 2677
Joined: Fri May 23, 2008 2:11 pm
Organization: happyB
Tumblr: happybackwards
Contact:

Re: Help me with my GUI layout? ;O;

#6 Post by Aleema » Sun Sep 18, 2011 11:40 pm

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
Veteran
Posts: 322
Joined: Sun Oct 03, 2010 11:49 pm
Completed: Memoirs of an Angel (2010)
Projects: Memoirs of an Angel (Remake); W.I.S.H
Location: United States
Contact:

Re: Help me with my GUI layout? ;O;

#7 Post by broken_angel » Mon Sep 19, 2011 12:15 am

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.

User avatar
Aleema
Lemma-Class Veteran
Posts: 2677
Joined: Fri May 23, 2008 2:11 pm
Organization: happyB
Tumblr: happybackwards
Contact:

Re: Help me with my GUI layout? ;O;

#8 Post by Aleema » Mon Sep 19, 2011 12:25 am

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.

User avatar
Tsundere Lightning
Miko-Class Veteran
Posts: 910
Joined: Sun Jul 06, 2008 4:30 pm
Projects: And plenty of them!
Location: Creche Alpha, Treasure Island
Contact:

Re: Help me with my GUI layout? ;O;

#9 Post by Tsundere Lightning » Mon Sep 19, 2011 5:06 am

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.
Aleema wrote: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.
She's sun and rain: She's fire and ice. A little crazy, but it's nice.
Bliss Stage: Love is your weapon! A sci-fi visual novel about child soldiers coming of age. Kickstarter prerelease here. WIP thread here. Original tabletop game by Ben Lehman here. Tumblr here.

User avatar
mugenjohncel
Hentai Poofter
Posts: 2115
Joined: Sat Feb 04, 2006 11:13 pm
Organization: Studio Mugenjohncel
Location: Philippines
Contact:

Re: Help me with my GUI layout? ;O;

#10 Post by mugenjohncel » Mon Sep 19, 2011 8:42 am

Samu-kun wrote: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...

Image

"POOF" (Disappears) :mrgreen:

broken_angel
Veteran
Posts: 322
Joined: Sun Oct 03, 2010 11:49 pm
Completed: Memoirs of an Angel (2010)
Projects: Memoirs of an Angel (Remake); W.I.S.H
Location: United States
Contact:

Re: Help me with my GUI layout? ;O;

#11 Post by broken_angel » Mon Sep 19, 2011 1:03 pm

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.

Locked

Who is online

Users browsing this forum: No registered users