Dialogue Box Design

Introduction

This wiki page is a record of the design process of the Dialogue Box for NPC communication

Design Process

Examples

As a visual novel game, the dialogue box usually takes about 1/3 of the screen and appears at the bottom.

• Example 1: Dialogue Box from Fate Grand Order

• Example 2: Dialogue Box from Danganronpa

Setting

The basic setting follows by Team 7's pixel drawing setting guideline Pixel Grid Resolution

First Draft

Most Dialogue Boxes are square-shaped. So we referenced Team 7's UI design chose blue as the basic color and the element of round corner of each angle. We made 2 versions with one brighter color and one darker color.

• Version 1: Brighter Blue:

• Version 2: Darker Blue:

Second Draft

We noticed that other than the text area, there is also another spot that should show the name of NPC or player will get confused about who is speaking now. So we Added the Name Tag at the left-top corner. We also made it transparent to make it merge better with the background scene when shown with other components on the screen.

• Version 1: Brighter Blue with Name Tag:

• Version 2: Darker Blue with Name Tag:

Final Draft

According to Team 7's UI Design, we finally decided to use the brighter version and decorate with ocean elements such as seaweed and seashells. The decorations appear at the right-bottom corner of the Dialogue Box and the left side of the Name Tag, which created the balance as a whole and also will not cover the text inside.

• Final Version:

Further Iteration

We will keep iterating our design based on the development and needs of the game.