Dark
Auto
Light
Dark
Auto
Light
Game Interface APP
Overall Design: Mature and Sophisticated Style
The UI design of this mobile card and board game adopts black and gold as the primary color scheme, creating a sense of maturity, stability, and luxury. This approach aligns with the client’s goal of positioning the product as a game designed for adult players. By minimizing cute or playful elements, the design strengthens the overall sense of sophistication and appeals to a more mature audience.
Detail Design: Integration of 3D and Motion
To enhance the game’s uniqueness and visual appeal, the loading screen and login page incorporate 3D visual design created in Photoshop, adding depth and realism while highlighting the game’s quality and professionalism. At the same time, the use of DragonBones animation introduces smooth motion to the interface, allowing players to experience a strong visual impact and a greater sense of immersion as they enter the game.
Production Approach: Multi-Tool Integration
The design workflow combined Photoshop, Sketch, and Illustrator to leverage the strengths of each tool. From early prototype planning to detailed illustration work, every element was carefully designed and refined to ensure visual consistency and a polished interface. In addition, DragonBones animation within the Egret engine was integrated to bring more vitality and refined motion to the UI design.
Challenges and Achievements
From planning to completion, the project was carried out under tight time constraints while still striving for excellence in every detail. Although minor imperfections may remain, the overall design aimed to deliver high quality within the limited timeframe. At the same time, it moves beyond the common design styles seen in the market, presenting a fresh and distinctive UI experience for card and board games.
Summary
This design approach is built around a mature and refined visual style, integrating 3D elements and animation techniques to create a high-end card and board game interface tailored for adult players. The result highlights the product’s uniqueness while delivering a visually engaging and attractive user experience.
Other Pages
A simple prototype is provided to showcase the design layouts. As Modao has undergone several updates, there may be compatibility differences between older and newer versions. Please select the page you wish to view from the left menu. You can also hold the Spacebar to move around the canvas.
Wireframe (Low Fidelity)
A low-fidelity wireframe prototype is provided to present the structural layout. As Modao has undergone several updates, compatibility differences may exist between older and newer versions. Please select the page you wish to view from the left menu. You can hold the Spacebar to move around the canvas.