Atlus Reveals The Design Secrets Behind Persona 5’s Distinctive UI

When Persona 5’s first trailer was released, one of the major talking points was the very distinctive, stylish UI presented. At the recent “CEDEC + KYUSHU 2017” developer conference, Atlus presented the process of how the UI became the way it was. [Thanks, Famitsu.]

The turning point in UI design started from Persona 3, where they were faced with the problem of Atlus games being fun, but not selling well. The result of that reality was that Atlus decided to focus on the marketing of the games, and this included the UI design. It was the best way to attract a larger, casual audience, while changing the image brand of the series, at a low cost.

The Persona series UI has to fulfill the job of conveying information to the player, but also convey the identity of the game. To this extent, main colors were chosen. For Persona 3 it was blue, which conveyed coolness and stylishess. Persona 4 used a bright yellow that conveyed a ‘retro’ and ‘pop’ aesthetic. Persona 5 had an active, passionate red color, and Catherine had a striking pink color to convey its sensuality and kitschy atmosphere.

Despite other Persona games using sub-colors under the main color to draw player attention to the relevant information, Persona 5 did not use sub-colors other than in HP/MP elements, in order to keep the distinctive red color. Therefore, in order to keep a dynamic, active UI without losing information, central lines were used to draw the gaze of the user.

Changes in the angle and contrast of menus were done to provide easy context to the information presented. The relevant information is always on the same side as the mainly white color.

Persona 5’s menus also utilized a 3D model which would spin around and end with a pose. A special tool was made for this. The layout would be first created in Photoshop, then the motion designer would capture a pose and input it into the tool that would render the shot in 2D.

There were separate designers for the menu and battle scene UI, and the battle scene designer would pass along specifications to the programmer to be implemented, while checking every frame together to make sure it was correct.

As Persona 5 was developed for both PS3 and PS4, they had to create path data so that the resolution would not be lost for the texture data between the different platforms.

Finally, Atlus ended the talk saying that they would like to continue making UI which have a sense of playfulness and entertainment value, just like how it was done for Persona 5.

Persona 5 is currently available for PlayStation 3 and PlayStation 4.