Game Design Question

[Zizka]

RPG Maker is an engine, not a platform. I guess this is PC? The reason I ask is this is a non-standard aspect ratio, so it's going to have black bars on the sides on most people's screens, or will have to be played in windowed mode.

Oh yes, I misunderstood. PC it is.

(Speaking of things feeling like part of the notebook, I think if you're going with this theme, it could feel even better if the menu and item icons were done in a "drawn" style too. They don't have to be monochrome, of course. It would give the whole thing more cohesion and character.)

I agree. To be honest, I actually did all the icons and took great care to select the colors so it'd feel like a waste not to use them BUT that's not the kind of reasoning I should go with. I'll redo them with the notebook aesthetic. It won't be on my priority list just yet though as I need to figure out the general design first (to send it to the programmer so he can get started). It's good idea though.

As for the headings, why not "handwrite" them? Depending on the personality of the character the notebook belongs to, you could add other decorations too, like stickers, doodles, etc. Also, I put mine on the left because that feels more "natural" to a notebook. Centring feels "cheap" and lazy in this context, though I don't know why.

I like the scribble idea. The game is essentially horror though so stickers and noodles would probably clash with the mood I'm going for. I could simply use a "scribbling" font for the headings.

You could even have hand-drawn separators and the like between the columns.

Do you have a reference in mind (photo)? Do you mean like the circle you did but as lines? The lines wouldn't be straight then though... Unless I misunderstood.

I feel like there should be more bookmarks on the right side too, currently it's off-centre and asymmetrical, and not in an intentional-feeling way.

Yeah I know, that's actually why I put them on top on the first place to avoid this issue. The thing is that I really don't need more tabs than: book, status, inventory and options. Saving and Loading are part of options technically.

Unless I use: Book, status, inventory, settings, save, load. To be honest, I feel like it'd just be adding tabs for the sake of it then and I don't really want to. Maybe there's a way to balance out graphically without adding more tabs. I've like to have the hero health point displayed somewhere, maybe I could do it there, on the right? I'm not sure!

[eishiya]

Tab balance: I don't think it looks weird to have them all on one side and no gap on the other side, like in my mockup.
Here's an idea: Your current draft with tabs on one side and no tabs on the other, but have the characters stats or something else that's frequently useful on a sheet of paper sticking out of the notepad. Seems like a good, multi-purpose way to use the space.

Hand-drawn separators: Imperfect, hand-drawn lines, yes.

[Zizka]

I see. I don't think it's necessary at the moment. I mean looks ok without it I think:


(nevermind the post-it there).

I tried having stats in the space on the right but it really is too narrow so I just went with all tabs on the left.

So here's what I have at the moment for the book-mode (I can always go back to inventory later. The priority now is to have the general setup of the book vs game area).


Questions I have in mind:
1. Font readable enough?
2. Would it be better to align all four tabs? It looks better but it makes less sense page positioning wise.
3. Is the separation between book and the game area distinct enough?
4. Is there enough text being displayed at once?
5. Is the text spaced out enough, it is easy to read enough?

I currently like the simple interface and few menus. Every game I've worked on in the past always became too complex so it's good to start simple (although it requires willpower and determination to keep things simple).

I feel like I'm almost there but not quite.

[eishiya]

The book and inventory tabs switched places between the two images, is that meant to happen? I think they should stay in their place when selected, and just be highlighted.

1. Font readability: I think serifs are a poor choice for a pixel font. This font has some spacing issues overall, too.

2. Tab spacing: I think it would be better to align them, yes. I'd also have less visible thickness to the pages, which would make them being aligned look better, and give you a little more space to work with. You could really use that space too, some of your text gets too close to the page edge/spine.

3. I think it's distinct enough. Like I suggested earlier though, you could add more non-functional background tabs behind the menu ones just to replace the negative space around them, thus more clearly separating it from the gameplay area.

4. I think this is a fine amount of text, it's more than I'd want to read all at once before getting to make a choice or take some other action.

5. The line spacing is fine, but the font itself isn't very readable because there's no spacing between many of the letters. Also, try moving it down a pixel, so that the bottoms of the letters align with the lines. Currently, they sort of blend in with the lines, making the bottom serifs look really thick. Here's what it looks like moved down a pixel, I think it looks cleaner:

It might look better or worse with a sans-serif font though, so try it out.

[Zizka]

2. Tab spacing: I think it would be better to align them, yes. I'd also have less visible thickness to the pages, which would make them being aligned look better, and give you a little more space to work with. You could really use that space too, some of your text gets too close to the page edge/spine.

I've removed 6 pixel worth of thickness and removed 2 from the spine. The lines were too near the spine. I've also further lightened the text lines (a request from someone else who still found them too distracting).

The book and inventory tabs switched places between the two images, is that meant to happen? I think they should stay in their place when selected, and just be highlighted.

I moved the book section on top because it's the most important one. They'll stay in place in game. They'll just have their sticky bits appear on the left page when they're selected as well as being highlighted like so:

3. I think it's distinct enough. Like I suggested earlier though, you could add more non-functional background tabs behind the menu ones just to replace the negative space around them, thus more clearly separating it from the gameplay area.

I don't know what kind of tabs I would put. I mean, I understand what you mean but I don't know what to put there. If I just put empty tabs I think it'd look strange (unless they're desaturated and don't draw attention) and if I put something on it player will think it's a menu of some sort.

5. The line spacing is fine, but the font itself isn't very readable because there's no spacing between many of the letters. Also, try moving it down a pixel, so that the bottoms of the letters align with the lines. Currently, they sort of blend in with the lines, making the bottom serifs look really thick. Here's what it looks like moved down a pixel, I think it looks cleaner:

Done.

It might look better or worse with a sans-serif font though, so try it out.

Ok, here's a couple of attempts using different fonts:

Cayetano, sans-serif:


Coder's Crux, sans-serif:


Wellbutrin, sans-serif:



Which one do you guys prefer? I'm unsure as to which one to pick. The second is more readable but doesn't really evoke handwriting.

Any suggestions of other pixelated fonts which might fit what I'm looking for?

[Vinik]

Coder's Crux is looking very nice, but it seems to monospaced, which is good for formatting text, but very bad for overflow (very wide "i" "l" and "j" end up taking a lot of horizontal space). I also like the one from the first yellowish book mockup.

[eishiya]

Why not use the front you used earlier?

The non-functional tabs should be dark and should be barely noticeable, imho. Quick sketch of what it could look like:

(You could add some barely-visible ends of dark tabs on the other side, too.)

[Zizka]

I think you guys are talking about the ''Arial'' font and I think it does look great.

Regarding the inactive tabs, I think you pulled it off nicely but I've tried and have come up with nothing convincing on my end. It's too bad because those empty gaps between the tabs is the only thing I'd fix before moving on.

I also got rid of the pen icon on the bottom right. Unless someone else have another idea about the general design of the game screen I'll leave it at that.

[MysteryMeat]

I think you're nearly there, there's a bit of eye glare from the contrast I think could be fixed with either a slightly darker color on the paper or a shift to the font the previous edit by Eishiya uses

[eishiya]

With the tabs, all I did was use your two darkest blues and drew some "sloppy" tabs - some are curled, some are sideways, some are both. I'm sure you can manage that. The key is to keep them dark and simple. Maybe don't outline them like I did and just use your two solid dark blues.

Arial does indeed look good! I think you need to keep the font further from the page edges though. Try to keep at least an em between the text and the edges. You've got it right on the left edge of the left page.

I think the text also gets rather close to the bottom of the screen, I think the bottom line should be higher up off the edge (you could afford to raise all the lines up by a few pixels). That would give you more room for the arrow too.
And an Nth reminder: don't forget your theme/metaphor! Make that arrow a scribble or something xP