On October 28, 2017 at the Kyushu Sangyo University in Fukuoka prefecture, a conference called “CEDEC + KYUSHU 2017” for computer entertainment developers was held. In the article presented by Famitsu, they reported on a session that was held (and previously announced on October 16th) for the “Creative method for UI in the Persona series ~ UI case examples from Persona 5.”
Masayoshi Sutoh and Kazuhisa Wada were part of this panel. After joining the company as a designer, Wada has been involved in various projects. Currently managing the “Persona Team,” he is in charge of Persona 3: Dancing Moon Night and Persona 5: Dancing Star Night as the producer. Sutoh started off as a UI (user interface) designer at his star at Atlus, and he is also the art director and lead UI designer of Persona 5. He supervised the design and the game’s promotion at various events, supervised design rights, etc.
The background behind the creation of the distinctive UI was a crisis at Atlus
Referring to the Persona 5 UI, those who have played it would already know, but it’s stylish and dynamic in an unparalleled way. In this panel, to explain about this UI, Wada first showed the first promotional video trailer for Persona 5 which lasted about 1 minute and 30 seconds, showing off the distinctive UI.
Wada states that it is not easy to fit plenty of UI shots into a trailer. It could be said that UI is a big feature of this game. When Atlus released this PV, there were a lot of surprised impressions saying “What is that UI?”
How was this unique UI born? Wada says that the existence of Persona 3 became a significant turning point for the series.
Persona 2: Eternal Punishment was released in 2000. Persona 3, which was released 6 years after that, had the design mission of innovating the series’ image and broadening the audience, using a low budget. It wasn’t just a goal, it was something that had to be achieved.
At that time, Wada says the the Consumer Development Department was in a situation of crisis because it was said that “Atlus games are interesting, but they do not sell.” In order to overcome this situation, even though the development budget was limited, Persona 3 needed to be successful, being developed with marketing in mind.
One of the policies that was derived from this mindset was to thoroughly strengthen the UI. The UI was changed from being an “unsung hero” to a “strong assertive hero.”—this was the method inevitably chosen by Atlus, which was in a pinch.
Balancing the role of design and transmitting the information that represents the image of the game
For this topic, a baton touch took place from Wada to Sutoh. Specifically, he began to explain how to create UI. Sutoh entered Atlus 18 years ago, but the UI work process at the time of joining the company and the current UI work process are almost unchanged, and the tools used are the same (Photoshop, Illustrator, After Effects).
The Persona series UI has the role of building a graphic design that guides the project, while maintaining the original function of the UI for information transmission. Sutoh stated he has the important mission of “creating the package for the title.” First of all, “color” is important for creating the UI. An aspect that remains strong as a first impression for people is color, therefore the main color is decided first. At the stage where the main color is decided, then the title logo is made, and the key font is decided.
Persona 3 was blue, Persona 4 was yellow, Persona 5 was red, and Cathrine‘s main color was a shocking pink. By combining colors and shapes that are often seen in everyday life, it is easier to come up with something that will stand out.
The next decision to decide is the sub-color. In Persona 3, “moonlight” yellow was used as a sub-color, making it easy to understand important information. In Persona 4, multicolor stripes were used (representing a “TV” as a key to the story) and black to not be overshadowed by the flashy colors.
However, in Persona 5, it was decided not to include a sub-color as much as possible in order for the passionate red to stand out more. Then, how was usabilitiy ensured in ways different from using color?
One of the things that Sutoh used is “the nature of line of sight” in order to realize a dynamic design without hindering information recognition. A person uses lines as reference points to guide their vision and line of sight. Therefore, when opening the menu screen, a white line is drawn at the center, having the role of guiding the audience’s gaze.
Also, when moving to a lower position, layouts and angles are changed to emphasize the ease of positional awareness. To make it easier to understand important information, the lighting changes fluidly. A space where information is of high priority has high lighting lighting, while space where information is not as important has low lighting.
Speaking of Persona 5‘s UI, it is characterized by a 3D model which moves around as it is navigated. In implementing this 3D model, a special tool was prepared. First of all, Atlus made a layout in Photoshop. After that, the motion designer created a pose and arranged it with the special tool. When the movement of the 3D model was decided, a 2D illustration texture cut was created to ensure the animation flow, so that it would deviate as little as possible with the last pose in mind.
Once the design and layout are decided, the next implementation is data. In Persona 5, there are programmers dedicated to each part of the UI, such as battle and scenario, with designers giving coordination to the programmers and implementing the data. At that time, designers check with programmers to make minor adjustments, like moving an element by a pixel.
Sutoh says it may be old-fashioned to have specifications prepared on paper (with the number of copies exceeding 1,000) to implement the data. However, if the UI’s behavior is only determined by the designer, it will only be the result of what one person thinks is good. After leaving the programmers to their own devices, room is left for the programmers to implement their own ideas that will lead to the UI’s quality improvement.
Finally, Sutoh talked about his aspirations of wanting to continue making UI “intuitive and casually guiding.” Where “casual” refers to “playful” or “surprising.” After stating that he wants to advance UI in graphical entertainment, the panel ended.
An interview with art director Masayoshi Sutoh on the UI design behind Persona 5 was previously held in September 2016.
— Famitsu
