Technical Post - PBH Designing the UI (Patreon)

It's adi! I'm late! I'm sorry!!! Until I am no longer late, you may call me late adi. I will put on that hat again slowly.

But! Even if I am late! I am HERE! To talk about one of my favourite things! Designing the interface!!!

I'm not sure how many of you realize but my main job here is actually being the graphic designer. I just wear a lot of hats. (including one that says LATE) And I really do enjoy doing graphic designs! I have a lot of ideas that are kind of hard to make-work sometimes in Ren'py, and definitely ideas that I would've given up before programming, so I'm really blessed to work in a team with someone (theo) that can make my ideas a reality.

So, of course! For Please Be Happy, I had thought about the UI design a ton before even opening Photoshop for it for the first time!

In general, I wanted speech bubbles - learning from the pains of TWA/Starkeeper, I wanted to keep them in a square-ish shape, so they will scale better. On top of that, I wanted minimal text per bubble + 2 bubbles on screen at the same time like in Without a Voice, so that screenshots can show conversations and more context. It's designed so that the narration can go on top too, and one screenshot can convey a lot!

I have a personal project that I'm working on that has the speech bubble tail style which helped a lot for me to know what I wanted before I even begun.

I went back into the chat logs to find the oldest screenshot I had of working on the UI, and it was (almost) this one. It's pretty close to the final product already, isn't it! The background is just one I had laying around from a dead project, and I googled 'art nouveau corners' to get the corner... pieces. I used the artboard functionality in Photoshop for UIs - in hindsight, it got way out of hand and my UI file was way too big, but it's very very handy to do design projects for multiple screens, especially if they are going to reuse a lot of the same assets.

This, in combination of 'generate assets' (which exports layers as cropped-to-size image files if you stick a file extension ie '.png' to the layer name) makes the UI exporting stage much, much MUCH faster. It's really good. If you are a designer or just use Photoshop in general, please look it up and spread the good word. I have recently cancelled my Adobe subscription so I will not have access to these tools and I can only hope that Affinity has a similar function in it. I've used Photoshop since I was twelve, or something. It's gonna be hard to make the shift!

Early on the process, I used a screencap from Ni no Kuni as a placeholder and switched between that and the one from my asset pack a bit, so I have a lot of WIP shots with the Ni no Kuni background - sorry about that!

Just a little nudging around, and essentially the final form of the UI takes shape. We had a notes ribbon because we wanted to do a glossary/extra lore section to the game, and we took it out in the interest of time but it seems there's some interest in the setting and lore, so we're thinking of putting it back in! I have a bad habit of fleshing out the world in my head and not telling anyone, so then I make references to things and people look at me funny. I had a backstory for Juliet that I never mentioned because I thought it wasn't relevant to the main plot of Please Be Happy, and I offhandedly mentioned it once in a voice call. Josh went very silent and was like "that's way too important to leave out". I'm sorry!!!! I'll try and be better.

The NVL was planned from pretty early on - I started work on the UI after the first draft of chapter one was written, so I knew that we had blocks of text in the game. I originally envisioned PBH to have little to no narration - like Ace Attorney - and be extremely in-the-moment and fast-paced/easy-to-read. I think it's one of the easier-to-read games in our catalogue, but it was a bit of a stretch for me to want that, especially since PBH has such a literature/book theme to it and just how Josh writes.

One thing I wanted to do in NVL mode is to limit the width of the text. Heart of the Woods has massive NVL boxes with (optionally) pretty small text, so it's easy to get lost in the field of words. Even despite it being blocks of text, I wanted it to be easy to digest so all of the NVL boxes are designed around looking like a page of a novel.

I also played with the idea of a dark mode for a little but for the schedule's sake we stuck with what we have right now. Maybe one day!

It really is sort of strange looking back and seeing how quickly the UI came together. It really does help that I know so much about the project and I had months and months to brainstorm in my head before I had to make it real. It's a bit of a contrast to the LAK design, which I do adore but it had a much more clearly defined 'sketch' phase where I had no idea what I was doing. I wish I could make a gif out of the PBH process like I did for LAK, but I just don't have the working files for it.

I suppose the other element is that since I'm the director for PBH, I tended to just go ahead with whatever ideas I liked most, whereas for LAK, I'd post every minor change and ask for feedback.

I did a mock-up for a CG too, and did a custom bubble location for it and promptly realized exactly what was to come for programming: a lot of custom bubble location placements. Scripting PBH takes a lot of time because we... literally place every single bubble. Every NVL box. Having all the customizability is good in the sense that we can get some really cool compositions - I know I moved the NVL box around a ton to focus on certain elements - but it's really time consuming!!!

After having a in-game screen I'm happy with, I move onto the menus! I always, always start with the in-game screen. It's the screen that players will see the most, so it helps to define a style there and then, then design the rest of the UI around it for me. Everyone has their own process so there's no right answer though!

So here is a very early draft of the UI! It's, like the rest of the stuff in the post, pretty close to the final already. Having the style elements in the in-game UI really helps make this process faster - stuff like 'what fonts to use' 'what colours to use', text styling, outline styling. It is a bit monochromatic though, so...

I introduce the PBH accent colours - the red-orange and yellow-green, as well as putting in the hover/ground states for the buttons. I struggled a tiny bit with the page headers, but it came along quick too.

We had a lot of ideas for the pause menu, including a quick load/quick save, and characters talking to you, but we ended up changing them to what we have now. I think it's very handy to have the scene description in the pause screen, too!

So roughly all this was from March 10 to March 13, 2020. I get real into designing UIs, and I sort of... don't stop for breaks for the entire time. I do need a lot of creative recovery time though, which is why I don't take more UI jobs in general. I use all my creative juices 2-3 times a year, so just Élan projects and my personal stuff is just right for me.

If you take a look at the elements, you'll notice that the scroll bar is unfinished and there's a lot of roughness around the edges here and there, including the fact that the border is still low quality or that the icons aren't drawn. My confession: I really don't like actually making custom elements. I have some weird perfectionist tendencies so icon-making/drawing designs is a really difficult part for me. I did those parts later...

(If anyone else struggles with icons - I used them for a lot of PBH stuff later - take a look at Google icons!)

Fast forward to May, I realized I haven't made a title screen yet.

I wanted to keep it a bit understated but have the key visual up for people to admire, so I went with a small-menu style, with the big logo drop being the screen before it with a 'click to begin'.

Oh, right! I also make UI docs for the programmers:

It has hexcodes for all the colours, file names for elements, positioning details, the mockups (as well as the file name for the mocks) and a writeup for every screen.

So after that, it went to the programmer to help make all this a reality! We were originally planning on making this in Naninovel, so there was a lot of time spent in trying to understand Naninovel, and eventually it made it's way over to Ren'py, and we realized I forgot a bunch of screens so I had to do a lot of touchups, like the confirm screen when you exit the game.

There's a couple of screens that Theo put together using the existing elements, so it is a group effort! The continue screen, where you can see the preview of the save it's loading from, or the tips screen with the chibis was put together by Theo!

You can watch the UI in action here! 

Alright, I think that's enough of my rambling for today. I hope everyone had a bit of fun or took away a tip or two away from this! I really do love designing UIs... It's very very rewarding. Until next time!

- adi