Characters, UI, and Rive Animations for Belote Card Game

To take over the entire creative part of a big project is quite a complex and demanding challenge.

When one is in charge of what a new software product will look like, it is a big responsibility.

In the case of this project, I had to do a complete redesign of already existing Belote card game for mobile iOS / Android devices.

This meant that the new design had to be not only welcomed positively by new users. It was also important to keep the commitment of all existing players as well.

So, the task was to create a new and attractive user interface design for a mobile game that would look equally well in both portrait and landscape orientations.

It was quite a challenge to arrange many elements on the main Board screen in such a way that the cards of all four players remained large enough and clearly visible. At the same time, the main player had to be able to effortlessly put his finger on the card they needed at the moment.

All screens for game settings, game types and modes, and avatar choices had to be intuitive and use mostly graphics with minimal or no text.

Also, when creating the layouts, the ability to localize the app for several different languages had to be considered.

To unify the many game screens with a common idea, I suggested creating a colorful and memorable character that would accompany the user everywhere: as a virtual assistant in tutorial mode, on icons, in pop-up titles, and as illustrations of various game modes and user levels.

The application also needed various animations: splash screen, character and UI element animations, Daily Wheel animation, which is used to give rewards to the user.

Thus, I had several roles in this project: UI/UX Designer, Character Creator, and Rive animator.

Working in a team with the developer and project coordinator, we created quite an interesting product.

I tried very hard to fulfill all the technical requirements for UI design, which would allow the application to look perfect on any mobile devices with different aspect ratios.

Also, while creating the design I kept in mind the necessity to get a good result regardless of the chosen language of the application.

UI layouts I created in Sketch application. Also, with the help of this vector editor I created various variants of the character, icons and buttons of the application, purchase cards and daily wheel.

All animations of UI elements, character, splash screen, and daily wheel I created as usual in Rive app.

For the Daily wheel animation, a state machine with listeners was created, which allows the spinning of the wheel and the user receiving a reward to be done almost entirely on the animation side with minimal code involvement.