Sketchbook #003 - Visual Novel UI (Patreon)

Heya! If you wondered how I came up with the UI design in the visual novel sections of the game, this one's for you.

It's a text box and some buttons, how hard could it be?

Kinda hard, actually. Determining even just the size and position of UI elements is a non-trivial task, and when you're solo, it's something that isn't just gonna magically happen.

So what's a good way of going about doing that? How about cheating a bit on the homework? No need to re-invent the wheel, after all.

I simply looked up several VN interfaces from those that I've played or know of and sketched out the important bits. Sure, I could have taken screenshots, but I think sketching it out actually helps quite a bit. It forces me to really pay attention to the design: sizing, positioning, blocking, and how things relate to each other. It's kind of like taking notes for a midterm. Copying and pasting doesn't really do much, but actually writing things down and doing the work is basically practice.

Anyway, from these examples, I was able to pretty-quickly determine a few things, such as:

How big the text box should be (what % of the screen should it take up)

How big the font should be (relative to the screen size)

How many lines are in the text box (I decided on 2; 3 seemed cramped)

How much margin there should be

What other elements should be there (menu buttons, clocks, prompts, etc.)

Etc...

Then, I started brainstorming a few ideas for CE:ROM's interface. (This was before the rest of the game's UI design was created, so I knew whatever I came up with here would basically determine what the rest of the UI would look like.)

Hexagons are the bestagons... but I dunno. They felt kind of clunky and large. And sure, they're usually associated with high-tech things and such, but they also seemed kinda... stereotypical? Uninspired? I dunno. I was basically feeling like those sketches of Peri. 🤷

Eventually I decided on a more simple rectangle style, and started playing around with the positioning of the nametag and main dialogue. You can see I toyed with the idea of moving the nametag around (based on where the speaker was). I even implemented it in code.

I decided to drop it, as I felt it was pretty distracting. Also, I added a control box (with stuff like FFWD, Transcript, and Menu), so moving the nametag around would throw off the balance.

Hey, I think it turned out pretty well. The little accents weren't too difficult to make (as I had decided to use the sideways "L" looking lines everywhere), and the colors were also easy (white for important stuff, everything else accented in the currently-speaking character's color).

Apply a neat lil' glow/"glassy" shader effect, throw on some simple animations to breathe a little life, and add some in/out animations. Done.

...okay, it wasn't that easy, but at least in terms of the overall design? Yeah, good enough. Time to move on.