Hello, CloudNovelists. This month we’ll be talking about an important element of visual novels that many creators tend to overlook: graphical user interface, known as GUI. In a visual novel, GUI mainly includes textbox, choice box, option buttons/icons, and text.
The guest I picked for the interview is DAX, the currently most popular graphic designer in our community. She would be often seen giving advices and critiques about GUI, other than collaborating in various projects as a GUI artist so many of you might know about her skills too.
Hello, Empress. Can you start with an introduction of yourself?
Hi, my name is DAX. Also known as Empress. I’m a writer, artist and graphic designer.
So, Empress, why are you so focused on GUI?
Honestly, it’s not like I intend to focus on GUI on purpose. It was by chance that I fooled around with my drawing software and improved my skills along the way. Since then, I offered my GUI services for free for CloudNovelist that I’m close with. Now, I finally had the confidence to open a commission for GUI. There’s no reason as for why I preferred working on GUI because to be honest, everything is done by my instinct and a lot of trial and error.
How long have you been making GUI? And in your experience, what’s the most important things to keep in mind when making GUI for a visual novel?
My first GUI is the textbox I made back when I first joined CloudNovel in 2015. You can see the textboxes in my profile. They are called Sakura theme and Pastel. It was horrible but still presentable as my first work, I guess. Then I kept practising in private without publishing anything. I think it is important to be aware in mind that GUI is NOT the main element in a visual novel, instead, bear in mind that GUI is just a supporting element to make your visual novel pleasant to the eyes and more enjoyable. Please do realize that GUI and UX come hand in hand. When making GUI, it is important to know how will the user feel when they experience your visual novel with your GUI in it.
What’s UX?
User Experience. I think the name is pretty self-explanatory. It is basically the experience user feel when using anything that is made by UI.
In your opinion, what are some common errors in making GUIs that should be avoided?
Well, I think the most common error is the dissonance between visual novel art and GUI. This will happen if you think of GUI as another separate art for your VN. Most CloudNovelist made their GUI too fancy or elaborate that it disturb the concentration of players to focus on your story. Other than that, I guess it will be the choice of font. Try to use a simpler font for the main message.
Do you have any tips to make a good GUI? Something that should always be kept in mind?
I don’t think I need to say the importance of doing research before making GUI as this will depends on your theme. Some tips I can give:
- Do a mockup. Put a background and character sprite together in a canvas. You can use Photoshop, SAI or any software that has the capability of layers. The reason why a mockup is important is to make sure your GUI won’t compete with the main art (background and character sprite) and make everything looks cluttered and chaotic.
- Do not start with big sizes. Unlike other art which is better to start big then scale down later, for GUI, it is good to do your GUI in its actual size.
- Use a MAXIMUM of two(2) fonts. You can use a fancy font for Speaker then use simpler font for the main message on the textbox. For screens like the main menu, load screen and etc, same rules applied. Use the same font you use for the textbox or at least visually similar to them and do not exceed the limit of 2 fonts for the whole screen design.
- More visual design, more mess. I know it is very tempting to do a different design for each screen but it is actually a bad idea. Try to decide with one main design and just use them all over again with a slight difference, over and over again. For example, in CloudNovel Breakdown, I settled with a Black and White theme, then I do one screen design. The rest just followed this design and that’s why you don’t feel disconnected even if you open Load screen then Settings screen.
Ok, let’s focus on the main parts of a GUI now. Let’s start from textbox and choice boxes. When would you recommend to use a bigger/wider box and when a smaller box? How would it impact on UX?
Honestly, it doesn’t really matter. It really depends on your theme and each case would be different. It is a matter of trial and error. And do not be afraid of doing a mistake the first time. As for UX, it is recommended to get a friend to play your VN and get feedback from them. It will be accurate. I don’t mind people asking me for a test too…as long as you don’t mind me giving a harsh and honest feedback in return. In GUI, there’s no such thing bigger is better or vice versa. It really varies in each case.
Then what about option buttons/icons? How big should they be and where should they be put?
As for the size, it depends on your textbox. If your textbox is too simple, I recommend, using bigger options. However, it should not be so big that it fills up the save. Personally, I usually use 150px x 150px for square and circle options and resize them as much as I needed in the engine. I recommend using ICONs for options because the visual novel itself already has much reading and at the very least, let’s give the players a break with the options. As for the position, usually you put it at the bottom of the textbox, however, please feel free to experiment the best position of the options by yourself. Who knows, you may find something refreshing. I did a lot of experimenting as well. For example, when I did GUI for Neeka, Our Mountain, I put it beside the textbox. In contrary, I put options at the bottom of the textbox in One Last Time.
In CloudNovel, there is a default GUI that looks pretty neutral. Would it be better to use default GUI if you don’t have enough confidence to make a good one, or would you recommend to try anyway?
While the default GUI is neutral in most cases, there is a situation where it isn’t. For example, if your VN color is all pastel, to suddenly have black as textbox will make it looks abrupt and uncomforting. In this case, you can try to do a plain textbox, no texture, random brush or anything.. just a plain box with the color of your VN, then decrease the opacity of the textbox. Make sure you choose the color carefully. Neon color is a big NO NO. Depending on the situation, white or cream color will be your lifesaver.
If this isn’t the case, use the default GUI is recommended.
Ok, this should be enough for the interview this month. Thank you very much, Empress, do you have anything else to say to our readers?
Thank you for reading my interview. I hope what I said today will be useful to some of you. I’m still learning myself so I might do some mistake here and there. I’m always looking forward to seeing more good games in CloudNovel and if you need feedback or help, I will always be in Chat Support or in discord.