GUI Design Tips?

[Broodelin]

Hi, everyone!

I've decided to make an original GUI for my kinetic novel project, but I'm not a visually creative person by nature (I'm more of a writer/programmer myself) so I was wondering if the wonderful people of Lemmasoft could give me some direction/(eventual) feedback based on my themes and message.

I've done some GUI work before (my previous kinetic novel, A Harder Battle, was my first time releasing something of my own design/construction) but I'd like to improve with the help of the community.

Anyways, here's a basic summary of the story:

Dora is an average 3 1/2 year-old. She's friendly and energetic, with a strange obsession with cutting her own hair and making her own clothes. The only problem she has is that most people don't take kindly to her being an experimental robot. That's where Ellie comes in. After forming a friendship, the two of them are torn apart by their basic natures as human and machine, though they never forget each other entirely.

So it's basically a rip-off of The Fox and the Hound.

The theme of the KN is that friends can be torn apart, but there's always going to be that unbreakable thread between them.

The sort of aesthetic I'm thinking about is something that includes this idea but also has sharp lines, perhaps by incorporating scissors like the wonderful crestforge suggested.

I'm also linking to my artist's (Angeliclily) sprite work so you can get a feel of the art style:

Here's Ellie...

...and here's Dora!


That's about all I have for you right now, but if you have any questions, I'll try my best to answer them!

[sendo]

I recommend reading up Auro-Cyanide's article about Design Theory: Link here. As pointed out in the article, it doesn't talk about how to make a GUI, Logo, or any other graphic design but instead talks about the foundations of a good design and how to use these on your designs.

Friendship as a design theme is pretty broad. Maybe you could try to narrow it down. You mentioned cutting hair and robots, maybe you can use these as part of your design? For example, robotic fonts, robotic shapes (as in sharp, angular shapes and forms), maybe a GUI that incorporates scissors in it?

[Broodelin]

Thank you for the link to Auro's blog post! I'll try to learn as much as I can from it.

My apologies for being so vague with the theme. I'll amend the OP to include more detail about the aesthetic (because I was thinking literary themes when I wrote it for some reason).

I think scissors would be an interesting idea to theme the UI around, considering one of the WIP names for this project is Patchwork Girl. Thank you for the suggestion!

[Broodelin]

Here's a basic mockup of the main menu. Any feedback you have would be greatly appreciated!

[sendo]

Graphic design has never been my strong point, but here goes anyway.

I like the scissors in the center, it catches my attention. It does however make the words a bit hard to focus at. How about putting "Patchwork Girl" on top of the scissor graphic?

You could also try to make the "A Kinetic Novel" text smaller? Just to give more emphasis on the title itself.

You may also want to use a more colorful color palette. Perhaps use a color scheme application (there are a lot of free on the web)? You can also browse http://www.colourlovers.com/, it has a really big collection of nice color swatches.

And since this is the main menu, keep in mind that you also have to show buttons for Start, Load, Preference etc. So consider including them in your mockups.

That's about it I guess. If you want, I could try to take my own spin on it, just to give another idea? (okay this is just an excuse to exercise graphic design but still )

[Broodelin]

That's about it I guess. If you want, I could try to take my own spin on it, just to give another idea? (okay this is just an excuse to exercise graphic design but still )

Go right on ahead!

Thanks for your feedback and the link to that color scheme website!

[Broodelin]

I've been playing around with a few color schemes and placement on the main menu. Attached is the best looking one I've gotten so far.

[2dt]

I've been playing around with a few color schemes and placement on the main menu. Attached is the best looking one I've gotten so far.

Not an expert by any means, so feel free to ignore what I say.

I like the design a lot, but is there a particular reason why you're using pixelated font?

It looks out of place in an otherwise really sharp (pun sorta intended) and modern design.

I would also omit the "Game" from "A Kinetic Novel Game". It doesn't really add anything, especially since as a kinetic novel it's much more about story than gameplay.

Finally, I would move the scissors more down so the tip of the blades are beyond the blue stripe, mainly to add symmetry between top and bottom halves of the scissors relative to the whole picture.

Hope this helps.

[Broodelin]

Thanks for the feedback, 2dt!

I was trying to evoke a robotic/mechanical feel. I'll do a mockup of the main menu with a different, sleeker font and see how it looks.

Removing the "game" from "A Kinetic Novel Game" and moving the scissors both make sense to me, design-wise. I'll mess around with it and post some pictures later.

[Broodelin]

Here's another mockup, based on 2dt's suggestions.

[sendo]

Okay so here's my version (I slept on it because I couldn't get it right last night haha)

I added a 'cut-out' element that I think goes well with the torn apart theme. Also used a pretty muted color palette, and used colors to emphasize the title part. And yes, I replaced the pixel font because I didn't know how to make it fit with the design. I'm sure there are other fonts that would look better than what I picked.

But somehow it gives off a stationary feel, which I don't think is what you're going for >_>. Ah well, anyway, feel free to use my idea as you see fit

Edit: Attached the PSD file for this as requested.

[Broodelin]

I really like the idea of your design, crestforge!

Maybe, to make it less stationary-y, replacing the dotted lines with code snippets or 1s and 0s would be best?

Anyways, I'll mess around with that later. Thank you so much for helping out!