Career post-mortem — graphic design for visual novels

gui_res.jpg

Four years ago, I posted a simple thread on the Lemmasoft forums Recruitment thread advertising logo and UI design services. At that time, I had very little graphic design experience. Since then, I’ve had the fortune of being commissioned by many wonderful clients, crafting logos and UIs for many different visual novels. I thought I’d share what career lessons I’ve learned in this post!

 

Lesson #1: Design isn’t illustration… except for video games

Chances are that you’ve heard the memes of family friends asking illustrators for logos. “But graphic design isn’t the same as illustration!” they scream into the void, and it’s true… most of the time. Design focuses more on composition, typography, and harmonic legibility rather than rendering, anatomy, or technique.

However, there’s one industry where the two bleed over a lot—and that’s in video games.

Purrfectly Ever After

Purrfectly Ever After

Games aren’t like modern design. The very nature of games means that you’re drawing the player into a different world. You want them to feel like they’re not on Planet Earth in the year 2019. As such, games often use unique or illustrated UIs that don’t reflect modern design—just compare the UI of your favorite games to your email client or to-do list app.

So, yup. In the world of games, design and illustration are a lot closer than you might think.

Example 1 — I’d often use layers (different elements on different places of the Z axis) to generate a tactile feeling for the player. This is more like illustration compared to the modern flat look where all elements are found on one layer.

Ethereal Pulse

Ethereal Pulse

Example 2 — I’d often render GUI similarly to how the sprite or BG art is rendered, because I wanted to make sure the final look would be fully synthesized. Usually, I would require clients to provide a sprite and BG sample before beginning work.

Destiny Chronicles / Eternal Radiance

Destiny Chronicles / Eternal Radiance

Example 3: Game logos are extremely different from clean-cut corporate work. They often boast dynamic colors, textures, and complex elements to help immerse the player in this fictional world.

Table for Two

Table for Two

Revere

Revere

 

Lesson #2: You’re brainwashing players!

Here’s a weird thought: just as you’re programming UI into your game engine, so are you programming users with location and motion motifs.

Imagine that you’re designing a screen, and you put the X button to exit the screen in the upper right corner. From that moment on, the player will always expect the X button in the upper right screen. If you switch the exit button between corners every screen, you will confuse the player.

Pirate Princess — That X button better be in the upper right corner all the darn time, or someone’s gonna throw a table at you.

Pirate Princess — That X button better be in the upper right corner all the darn time, or someone’s gonna throw a table at you.

The same goes for “confirm” versus “cancel” buttons. Make sure to stay consistent by picking one layout and sticking with it. Is confirm on the right or left? Great, now stick with it.

Keep in mind that every decision you make, particularly in element locations, will be “programming” your players’ expectations.

 

Lesson #3: Freelancing is 50% skill, 50% communication

Would you be surprised to hear that clients don’t just care how good you are? Many clients also prioritize communication and people skills—how you treat them, and how you convey your ideas.

Early on in my UI design experience, I would provide really short and to-the-point messages to my clients like:

“Here’s the draft.”

“Here’s the lineart.”

“Here’s the finished version.”

However, I found that when I took more time to explain my thought process, my clients were a lot happier with my work. They requested revisions way less often and generally felt more satisfied with the final product.

I know, I know. You were hired to design something, not to write an essay every time you send an update. At the same time, communicating your thought process lets your client know that you really care about their project—you’ve invested adequate time and thought to make that UI the best it can possibly be.

So instead of those three-word updates, consider adding an additional sentence that backs up your choices. You’ll also find that clients will be more receptive to your creative choices and will tend to request less changes.

“Here’s the draft of the screen. I’ve taken the sci-fi theme of the game and made the layout grid-like and systematic, like orderly robots and computers.”

“Here’s the render of the screen. Since we’re going with an RPG look, I initially experimented with wood textures, but that hampers the legibility of the text. So instead, I’m trying out a paper look.”

Other than skill and communication, organization is also huge. Taking on commissions—especially with a lot of moving parts like UI commissions—means that you have to track a lot of details. Clients don’t just value quality, but they also really value promptness. I’m planning on writing up a blog post on the different ways I’ve found effective at organizing commissions, so if you’re interested in that, consider sticking around!

 

Q & A

Questions submitted from Twitter


@sitraxis: How you come up with your theme elements? What do you keep in mind when selecting colors?

For every project, I make a GUI scheme document that helps me track the theme elements for that UI.

Screen Shot 2019-07-11 at 11.43.19 AM.jpg

Consistency is really important to me in UI design, because it’s not making things boring by being the same; it’s making things functional and useful to the player because they know what to expect. In my GUI scheme doc, I separate things into 5 categories:

  1. Fonts — Keep fonts consistent between headers, paragraphs, and tooltips.

  2. Palette — Use the same core colors in your UI.

  3. Shape Motifs — Use the same kinds of shapes; don’t use big rectangles for one screen and big rounded rectangles for the next.

  4. State Motifs — use the same scheme for Idle vs. Hover vs. Selected button states. Are you changing opacity? Changing rotation? Changing color? Inverting? Keep it consistent.

  5. Motion Motifs — Use the same kinds of entry and exit animations. Fades and slides? Crops and wipes?

When I select colors, I usually look for real life inspiration around the setting of the game. Is the game about pirates? Time to watch pirate movies and look at ancient naval equipment; browns, bronzes, blacks. Is the game about the military? You can go for camo green and brown, or sleek firearm blacks and greys.

Personally, I will often pick colors that are related to each other in saturation and brightness, and then one contrast color that is strikingly different.

Quantum Suicide — Palette: Dark colors. Contrast: White.

Quantum Suicide — Palette: Dark colors. Contrast: White.

Kaori After Story — Palette: Bright colors. Contrast: Navy.

Kaori After Story — Palette: Bright colors. Contrast: Navy.

Zodiac Axis — Palette: Saturated colors. Contrast: Dull cream.

Zodiac Axis — Palette: Saturated colors. Contrast: Dull cream.

@IanEborn: How do you approach variations in screen size and aspect ratio? Do you use multiple sets of GUI to retain good sizing at various scales?

A: Generally speaking, you’ll want to design your UI for a 1280 x 720 size, while building it in your real dimensions (1920 x 1080 or larger usually). This creates a good balance for legibility since some people will play on a big monitor, some in windowed, and some on small laptops. If you’re porting to mobile or console, I recommend creating an entirely new UI to make the port feel native: utilize buttons, touches, swipes, and other platform-exclusive features rather than depending on your computer-based UI. Mobile and console UI should also be more minimal since you have limited screen space.



@novel_space: What icon do you use for "auto" button? I’m working on the UI for my game and really confused about this one.

A: Somewhere along the line, the “auto” function got represented by a refresh icon. Maybe because it automatically refreshes the screen for you? I don’t know, it confuses me too.

np_refresh_1077380_000000.png



(Psst! I want to keep my site free of advertising so that it's easy to access and clean to read, and keep creating content that is useful and accessible to the public. If you enjoy my stuff, please consider pledging $1 to my Patreon to support the cause!)