Art & Design: Title Screen

G

GamemakerTrialUser1

Guest
Option 1 however the sprites imo should be all the same equal size or at least the bases all aligned to x axis. Achievements and Options look off. Is there a way to have the writing over the image like the other three and then that way the sizes can all match +/- a few pixels?

The rest is great visually!
 
Definitely option 1 as it looks cleanest and appears that you only need to use left/right controls to move through the different menu choices. Option 2 looks like you would need to be using left/right/up/down to get to all of the choices, so would potentially appear more cumbersome to move through.

You might also be able to remove the "Achievements" and "Options" text as the icons could be obvious enough to people that play games enough. Alternatively, you could always do what you have with the other icons and place the text across the centres of the icons so that the alignment of the icons is the same.
 

Zizka

Member

So I redid some of the icons. I also removed the writing on the icons otherwise some would have writing and others not. Instead, I opted to have the text appear underneath the selection thus solving the text issue.

I could make the trophy bigger to match in size with the new game icon. I could also make options bigger as well. I could add something on top of the 'new game' book to make it more interesting to look at. Maybe I could put the whole book aflame instead of a single page for the quit icon... Not sure!

I like the look of 'load game' but it looks much bigger than the other ones. I've tried to make it smaller but it doesn't look as good.
 

Morendral

Member
I think making the rest of the icons the same size, like matching the size of new game is best here. That way load game doesn't look just as big by comparison. You could also try making the load game not as wide. I would play around with some sizes, like 1.25, 1.5 etc times the width of the new game. Having the other icons the same vertical size will be more forgiving

Awesome artwork btw!
 

Rayek

Member
My opinion: the icons throw off the balance of the layout. The title graphic is very strong (nice artwork!), and the icons merely distract and weaken the overall composition. They are grabbing too much attention, and the visual hierarchy is ambiguous. Which is degrading the impact and visual strength of the main graphic.
Besides, the icons are rather vague, compared to the main title graphic rather bland and dull looking, and require labels to clarify their meaning. In short, visual contrast is lacking.

I would scratch those icons, and instead display a simple text-based options list centered beneath the main graphic, with simple highlighting when an option is active. Keep the text-size subtle. Probably a simple light sans-serif to contrast nicely with the 'silent scream' type design. Often keeping things simple is best to maintain good visual contrast.

screen_simple.png
 

Zizka

Member
I think making the rest of the icons the same size, like matching the size of new game is best here. That way load game doesn't look just as big by comparison. You could also try making the load game not as wide. I would play around with some sizes, like 1.25, 1.5 etc times the width of the new game. Having the other icons the same vertical size will be more forgiving

Awesome artwork btw!
Ok I will give this a shot. Thank you for the compliment.
Yesterday I did try to make the icons all the same size but the open book never works. It’s basic shape just doesn’t match the others. Maybe I could change the open book for something else. Either way the option’s small gear bothers me so I will likely scrap it.
 

Zizka

Member
My opinion: the icons throw off the balance of the layout. The title graphic is very strong (nice artwork!), and the icons merely distract and weaken the overall composition. They are grabbing too much attention, and the visual hierarchy is ambiguous. Which is degrading the impact and visual strength of the main graphic.
Besides, the icons are rather vague, compared to the main title graphic rather bland and dull looking, and require labels to clarify their meaning. In short, visual contrast is lacking.

I would scratch those icons, and instead display a simple text-based options list centered beneath the main graphic, with simple highlighting when an option is active. Keep the text-size subtle. Probably a simple light sans-serif to contrast nicely with the 'silent scream' type design. Often keeping things simple is best to maintain good visual contrast.

View attachment 28535
I really like icons I general as a personal taste. I prefer them over text. So I’d prefer stick to icons. I feel like text is too bare. I forced myself to use the same palette for the icons as for the main game but it’s not necessary. One thing I could try is to use a vertical layout with small icons and text next to it.
 

Toque

Member
Number 1.

maybe a little more high light on the title text? Maybe light reflecting off character?


Could be wrong there. ???
 

Rayek

Member
Ok I will give this a shot. Thank you for the compliment.
Yesterday I did try to make the icons all the same size but the open book never works. It’s basic shape just doesn’t match the others. Maybe I could change the open book for something else. Either way the option’s small gear bothers me so I will likely scrap it.
Try to unify the look of all icons by adding a unifying element, such as the same basic border/background shape. All your icons have very different shapes, and it looks visually uncontrolled.
 

Zizka

Member
@Toque I don't think I'll touch the character, I like the way it looks.

@Rayek: I'm currently re-doing all of the icons and the text using the palette of 'Silent Scream' typo. All the icons are much smaller. I'll show it to you guys once I'm done.
 

Zizka

Member
Alright here it is, another draft. The icons are smaller and less noticeable, palette is the same as the blood in the header. Achievement is still missing because I want to find something else to represent that maybe a medal or something. I also replaced the options icon.

Maybe I could make the text bigger.
 

Morendral

Member
Alright here it is, another draft. The icons are smaller and less noticeable, palette is the same as the blood in the header. Achievement is still missing because I want to find something else to represent that maybe a medal or something. I also replaced the options icon.

Maybe I could make the text bigger.
I like where you are headed with this, but i think the color palette you were using originally for these work better. The blue was a better contrast, as the current red blends too much with the title. It's similar to not wearing to different articles of clothing the same color
 

Zizka

Member
Hmm... decisions, decisions. I will try to tone down the original palette, maybe that’ll be a good compromise. The problem with the blue palette is that maybe it draws the eye too much.
 

Rayek

Member
Aside from Morendral's spot-on comments, the latest version's overall layout weight feels unbalanced due to all the icons which lean the page toward the left. And the icons relative size feel out of whack as well. It looks odd to have two 'heavy' solid icons at the top, followed by the less solid looking options icon, and finally the hardly felt presence of the fourth icon at the bottom.
 

Zizka

Member
Regarding the weight, this might be an issue with the text being fairly smaller than icons which is something I’ll fix.
I’ll change the icons at the bottom as well, you make a good point.
Do you guys have any examples of title screens with icons next to text? I’d use them for reference but can’t find any of google.
 

Toque

Member
The art is great by the way.

You could centre the icons no next. But when you scroll or high light them the text for that item shows. ??

I think I have a hard time seeing reds on a dark background. I might be a little colour blind.

the reds pop and easy to read for everyone???
Or is it just me hard to read??
 
G

GamemakerTrialUser1

Guest
Depends on what your game is actually about but another idea, just a suggestion, create a pool of blood beneath the title that covers the entire width and in the centre have a scroll menu either vertical or horizontal.

Have your icon show up with a simple movement animation, next to the title of that selection.

For example, new game:

Book floats in from beneath the pool of blood, as if emerging to the surface with the title New Game written over/ Infront of it in a contrasting colour.

The icon could be the blue with some 'blood stains' and the color of the font could be purple or a contrasting red to the pool of blood so that it stands out and it legible.

Just a thought, depends what you can create and if it fits the theme of the game.

Overall your most recent update is a step in the right direction. Keep at it. You'll get there eventually.
 

Zizka

Member
Depends on what your game is actually about but another idea, just a suggestion, create a pool of blood beneath the title that covers the entire width and in the centre have a scroll menu either vertical or horizontal.

Have your icon show up with a simple movement animation, next to the title of that selection.

For example, new game:

Book floats in from beneath the pool of blood, as if emerging to the surface with the title New Game written over/ Infront of it in a contrasting colour.

The icon could be the blue with some 'blood stains' and the color of the font could be purple or a contrasting red to the pool of blood so that it stands out and it legible.

Just a thought, depends what you can create and if it fits the theme of the game.

Overall your most recent update is a step in the right direction. Keep at it. You'll get there eventually.
I don’t really understand the suggestion, can you provide more information of a mock-up?
 

Zizka

Member
Anyhow:

a. I switched back to the previous palette.
b. Made the font bigger.
c. I changed the icon for load game. I'm not 100% about it but having the open book makes it too rectangular shape compared to the other icons.
d. I re-worked all of the icons to make them smaller to they're more balanced compared to the text.
e. I made both the 'quit' and 'options' bigger so they don't stand out too much compared to the other ones.

I think that's about it from the top of my head:
 
Top