After feedback from several people, including one friend's 8 year old daughter I've decided to redesign the title screen for Sunny Ball.

I'm going to remove the board selector from the title screen and have that in a seperate screen when a Play button is clicked. I want to put all the options, credits, about stuff under one Options button. When that button is clicked than all the options are displayed. Finally then I'd like to have an Exit/Quit button.

So that makes only three buttons on the title screen (which is a lot simpler than previously). But before I settle on this 3 button idea I did some quick design mockups:

http://www.reflectedgames.com/titledesign.gif

The large yellow circle represents the Sunny Ball image/logo and the two yellow curves in C, H & I are where the text for 'Sunny' & 'Ball' will go. The normal Sunny Ball text could have the smaller sunny ball logo in the gap between the words as in the Demo.

I'm not completely happy with any of the designs, but I'm leaning more towards 'I' myself.

Any suggestions, thoughts on these? I think some people with more design experience and talent could help me out here!

I like D and F. Look more kid-friendly to me, and cleaner too.

[EDIT]

And A too.

A, D, and H. D being the best.

I don't think "sunny ball" is enough text to make a full semi-circular arch. I like D best but I think it would look better if it had a sun somewhere on the right - maybe in the top right corner behind the text. What did you have planned for the background? It's going to look very bland if it's just one colour or blue gradients.

I'd like to see a sliding pattern as the background.

I like D, but people could take the rainbow sign the wrong way.

I like D the best as well.

So your vote is for ADHD? Attention Deficit/Hyperactivity Disorder?

I'm not sure about any of them to be honest. I seem to have problems doing good title designs!

I can't do moving backgrounds because it would be too slow on old machines when dealing with high resolutions in true colour.

Does anyone have any better designs, or ideas on how to make them look better, and perhaps less plain?

Radagar

He's just saying he like A, D, and H. But if he had to pick a favorite he picks D.

I like the Rainbow a lot. I'd stick with that If I was you.

I'd go with D, but maybe put a Sun underneath the word "Ball" in the open area on the screen. Then maybe have a few sunrays drawn out towards the rainbow.

Yes, I realize that. I just thought the coincidence that his reply had the letters in that order was funny.

I would have a sparkle going down each color of the rainbow at different intervals.

[EDIT]
Sorry, guess I missed the humor in it.

I was gonna post what James Lohr did. Defo D with sun/logo in top right.

The sunbeams should illuminate the buttons when you hover over them too.

Wouldn't the sun logo unbalance things a little though?

Perhaps I'd have to redo the text style/design to make it work for D.

Well, just because I thought it was funny certainly doesn't mean there was any humor in it. I'm strange that way =)

Just some advice from my girl friend:

"interesting" designs place their contant normally not centered.
Try to place your menu centered at 1/3rd screen width.
I'd keep the rainbow pattern, but place the menu to a side of it
(If you want the rainbow at the left, place the menu at 2/3rd screen width).

I'd also place some clouds on top of the rainbow, just to make it appear more as a background item.

Well, that was uninten--ooh kitty!

D.. .just D. Well to be honest.. I dont like any of them, but i hate D. less than the others. So i guess it is my selection then.

I've been so utterly bored at work today that I scribbled down a few designs with a pencil. Even creased and crumpled it gave me a good excuse to use my scanner for the first time ever! Sorry about the quality, crumpled pencil drawings on lined paper aren't the best to scan.

http://www.reflectedgames.com/titledesign.jpg

There are two versions here (slightly different) and the design is based on the D mockup which everyone (including myself) seemed to like the most. I've taken into account Spellcaster's recommendations and I think it works well.

The second design seperates the rainbow from the menu text, but I think this makes the design worse. Also more menu text will be present under the options menu anyway.

What do you think? C&C please!

Kewl. Run with it.

I like the top one better. As long as the text is big enough and colored correctly, you'll be able to easily distinguish the text from the rainbow/etc.

As for it in general, I like it.

I like fhe first one. Will those clouds be scrolling?

Ok, here's how the new title screen currently looks ingame:

http://www.reflectedgames.com/titledesign2.png

I think I need to use a bigger and different font for the new option titles and tweak the colours for the small text at the bottom. Apart from that I think the design works well.

What do you think?

EDIT: Picture re-edited after Miran's comment.

Font needs to be bigger, and it could use a shadow or outline or something to make it stand out more...

And the sky gradient is upside down

Ooopps! You are a winner!

I've redone the gradient and removed the text so I can play with adding some fonts in PSP. Any suggestions?

Cheers!

Please don't make the mouse cursor red! It hurts a lot over that blue. Use a yellow or green one.

Yes, yes. I will change the mouse colour. That is just the old sprite..

You said you wanted another font?
This site has a large database, lets you type in a preview sentence, has categories and tells you what license the font is under. (In other words, its pretty damn nice )

The title screen looks pretty good. The clouds are going to scroll right?

Ok, I've darkened the background a bit and overlayed a font in PSP. Does that look ok to everyone? Too dark, or about right?

Gnat: They may scroll, they may not.

http://www.reflectedgames.com/titledesign3.png

Well.. you could at least make the sun-fins spin

The white text looks good.

Edit
Remember, this is what the screen preview is going to look like:
http://dragoon.pacdat.net/titledesign3.png

IMO, the "sunny ball" text looks kind of crippled. A font change may be in order.

I like this current version best.

I think you should use a font that's more "fun" for the title. like the Family Guy.

also, I think the rainbow should be transparent, and without a gradient.

Mark: The dingbats in that font are hilarious

Mark: If I make the rainbow transparant then all the colours will be tinted towards blue and the gradient will show through as well.

Do either of you (or anyone else) have any suggestions (or mockups) of an alternative font for the Sunny Ball text?

I'd be interested in any suggestions/ideas for this.

You got the PS file? I would be willing to do some experimentation.

Here's a version without any title or option text:
http://www.reflectedgames.com/titledesign4.png

Feel free to experiment.

Heres one:

http://dragoon.pacdat.net/titledesigngnat1.png

Tell me what you guys think. This is fun, im making another one.

For a moment, I thought it might be nice to reverse the rainbow gradient compared to the background gradient. On second thoughts, I think the probably creates too much contrast and attracts too much attention to the rainbow instead of the menu text.

Anyway, looks sweet so far IMO. I do agree that you could do a little animation of the sun (nothing too much... should be subtle. Maybe have the eyes blink every once in a while or make it look impatient or pout if the user does nothing for a while) and make the clouds float. I also like the idea of the occasional spark running along the rainbow.
That's all probably just stuff you'll want to add later on though...

EDIT: I like gnat's first try a lot Although I'd probably opt for giving the menu a different colour from the title text.

I preffer the sky gradient like in the first shot. At least make the bottom color more cian.

Are you sure that a non-gradient translucent rainbow doesn't look better?

Put some clouds in front of the rainbow, on the bottom maybe.

I'm not sure why, but that font doesn't quite work for me. I don't know why as it's nice and rounded.

Evert: An earlier picture had reversed rainbow gradients, but it seems to look better if it follows the sky gradient I think.

I like the idea of the blinking eyes, that is something I was thinking of myself.

The floaty clouds thing is a bit of a pain. The reason is that everything including the text is anti-aliased. If I move those clouds about I'll have to have them have no anti-aliasing which I think will stand out a little bit.

EDIT:
Oscar: A translucent rainbow will look blue tinted, and real rainbow don't in my experience. I could lighten the background a little as it was before, however that means the option font would have to have a dark border as the background/clouds start to get too bright.

I don't know, I like the dark version with the white text over it.

The dark version looks like evening to me.

I like Gnat's first attempt, just make the menu white and bigger.

Ah yes, I see it. That picture is overall brighter too, isn't it? But it probably draws too much attention to the rainbow, so I agree you should just keep it as is.

Small animation effects like that add that extra layer of polish...

I'm not sure I understand... wouldn't you have the sky-background gradient as one bitmap, the sun, rainbow and clouds as other bitmaps and build up the titlescreen at runtime? I don't see why the clouds couldn't have anti-aliasing in that case.
By the way, if you want to go for a more realistic sky gradient, you should combine it with a circular gradient so that pixels become lighter near the sun. I don't think that would really look good though, so probably best to just keep your current design for the background.

You have to make it brighter. And probably using an additive blending mode.

Evert: If the clouds have anti-aliasing then any combining clouds would show blue edges using simple blitting. Similarily any cloud moving underneath the yellow sunny ball text would show a yellow/blue anti-alias edge. So I would have to either use no anti-aliasing on the clouds and on anything that the clouds can move under, or use cpu expensive alpha blending on all the clouds and parts of what they move under..

Yes, I could make the gradient more realistic, but I agree that it probably won't look much better for this purposes.

As for the rainbow, I don't really see how an additive blending mode would stop it being blue tinted? The only thing I can see is having the edges and colour boundaries more blurred, but I don't think that's what you are suggesting?

Ah, I see... I thought you were doing alpha blending at runtime already.
It's probably ok in this case to do that though, even if it's slow: it's not like there's a lot of time-critical stuff going on in the menu anyway.
Is your gradient straight horizontal? In that case, you can probably get away with non-antialiased clouds at the expense of an anti-aliased sun, rainbow and menu text.

Heres an experimental one that could work if the art in the background was moved around a bit. Its more straight edged, like the sun. I think the style might be a little too hardcore for the game though.
http://dragoon.pacdat.net/titledesigngnat2.png

Heres the previous one, with different menu colors and the shading corrected to match the sun. I like this one, because it matches the soft art style very well.
http://dragoon.pacdat.net/titledesigngnat3.png

Edit:
Here are the fonts ive collected so far.

http://markoates.bafsoft.com/stuff/sunnyball_title01.gif

The clouds must move (some in foreground and some in background) and the text must stay off the rainbows.

Ahaha! Mark made a great mock-up.

ML's right about the text being off the rainbow. Also, the first mock-up by gnat reminds me of Spree candy.

Looks very professional and consistent with the game style. I would definitly not miss out on that rainbow sparkle once in a while. Sparkles are lovely in menus! It would be cool if the sun looked at the mouse pointer (and not that graphically intense).

I like the rainbow very much, but I think I wouldn't have this shade on it, just have all colors bright everywhere. Add a sparkle maybe. A bright rainbow before deep blue sky... sigh... I'm longing for summer...

Sky gradient should not be so dark. The bottom colour should be very close to something halfway between cyan and white. The clouds should be white/gray instead of blue. If it wasn't for the sun and the rainbow and the clouds were shaped a little differently, the current version would indicate that the game takes place underwater or something...

I like the vertical menu with the Sunny Ball text beside the sun, but if you do but the menu overlapping the rainbow, or clouds, or ANYTHING besides the blue sky gradient, you should think about going with a translucent or solid background rect for the menu. I just have a hard time reading things when its all confused with stuff behind (ie: translucent windows, or transparent consoles).

In fact, I like that last image by Gnat the most, but the menu text color is a little off, White is a little bright/plain.

Thanks all. I'll go through all your comments properly when I finish work.