Developer Log #6 — Introduction about DNAxCAT Interface Design

Hello, everyone, I am Spiriter. Today, I will share details about the design of DNAxCAT gaming interface.

The cat management system is also an important part in the game, where you can check the cat’s attributes, skills and other information.

In terms of layout, we used a more general layout in game design to make it easier for players to experience. For this purpose, we divided the design into three main blocks: information for each cat, filtering and switching view of cats, and a general bottom function entrance.

As an individual block, we display the cat information as a seperated part, with the aim of making all cats informations together without seperating them.

1. The above of the interface will show the five basic attributes of meow warriors: Vitality, Strength, Defense, Agility and Morale.

2. By clicking on the five basic attributes, six values of meow warriors will be displayed, which are used for calculations in battle: Health Point (HP), Attack (Atk), Defense (Def), Speed (Spd), Critical Strike (Crt), and Restore ability (Rev).

3. The profile of the cat will be displayed in the middle and shown in animation.

4. And the left and right sides of the meow warrior’ image will be displayed the body components of the meow warrior as well as their personalities and skins.

• The left side shows the head, body and tail.
• The right side shows the character, coat color and hand components.
• And they are all clickable. By clicking on them, it will show you the details of that part. For example, clicking on a hand component with a skill, it will tell the player the icon, name, level, and information of that skill, while clicking on the personality part will tell the player the effect of the expression.

• Below the image is displayed the meow warrior’s elemental attributes, level, name # number, and experience progress bar of the meow warrior.

The lower middle area shows all meow warrior that the player owns. In case of a player may have a large number of meow warriors, the player can also filter different element attributes for display, which makes it is easier to manage meow warriors. And you can swipe left and right to check other meow warriors. Meow warriors that are already in the battle team will be displayed in order on the left side in priority, making it easy for players to manage the meow warriors that are on the ground.

Finally, I would like to say that when the UI was designed, we had several design versions. After discussion and trial, we kept two versions, and the one we finally selected and used is the current version.

Compared to the current version, in the top position, we removed the display of player information in the other version, in this way, we made the interface neat and tidy without the interference of other information. The meow warrior filtering view, on the other hand, replaces the display of multiple rows with one row, with the aim of preserving the small and precise number of cats for most players.

DNAxCAT Official Links:

Website: https://dnaxcat.io/

Twitter: https://twitter.com/DNAxCAT_GAME

Medium: https://medium.com/@DNAxCAT_GAME

Telegram: https://t.me/DNAxCAT_official

Channel: https://t.me/DNAxCAT_NEWS