Circularium
2D • UI
Targets:
iOS / Android / wearable (upcoming)
Description:
Players engage in a game of wits and skill as they strategically place pieces around a circular board, aiming to create color matches of 3 or more.
Software used:
Unity, Photoshop, Illustrator, Animate
UI
Design For Different Targets - Photoshop / Illustrator
Circularium presented me with a fascinating design challenge as it was intended for two distinct platforms: mobile and wearable (watch).
Although both platforms relied on touch-based interactions, the watch's significantly smaller screen size (approximately 1.5 inches across with 416 x 416 px resolution) required careful consideration to include all elements while maintaining identical gameplay.
The following image pairs depict the compositional and design variances between the mobile and wearable versions of Circularium across various game states. The objective was to ensure the smaller wearable version remained functionally identical with minimal loss of information.
Title Screen - Mobile: Circularium's development for both mobile and wearable platforms required a versatile UI and UX design to cater to both. Some elements underwent modifications, while others were completely eliminated to accommodate the unique requirements of each platform.
Title Screen - Wearable: Considering the limited real estate available on watch screens, I decided to design the wearable experience specifically for the circular target. This choice was made due to the circular shape offering the least amount of available space for design elements.
Tutorial Screen - Mobile: On the mobile platform, we had the opportunity to incorporate additional elements, including 8 progress dots indicating lesson completion and a back icon. Furthermore, we were able to include animated GIFs to showcase in-game examples of each lesson. This decision was made considering the significant file size of GIFs compared to the storage limitations of the watch platform.
Tutorial Screen - Wearable: Despite not having all the additional features found in the mobile version, the tutorial screen on the watch platform includes all the essential elements within the limited available space. It's worth noting the presence of the black "flat tire" area at the bottom, which is a pixel-less dead area found on certain watches. This further diminishes the available screen real estate we had to work with.
Gameplay Screen - Mobile: The mobile version of the gameplay screen included all the necessary UI elements. These elements consisted of the score display, pause button, remaining move time indicator (bar), next color indicator (center circle), next full row push colors (pie icon), and the gameplay area.
Gameplay Screen - Wearable: The gameplay screen on the wearable platform required reimagining several elements from the mobile version. For instance, the mobile timer bar was redesigned to encircle the outer edge of the watch. The only element that was removed from the gameplay interface was the score, which now appears later in the Game Over screen as the "Final Score."
Game Over Screen - Mobile: In the mobile version, when a column reaches 6 pieces, the game ends, and the player is presented with their progress compared to their all-time best scores. They are given the option to play again or share their score on social media.
Game Over Screen - Wearable: The wearable version of the game over screen presents the same information as the mobile version. However, social media integration is excluded in the wearable version.
2D
Icon & Store Banner - Illustrator / Photoshop
App Icon: Given that the core gameplay of Circularium revolves around the distinctive circular game board and match-3 mechanic, I aimed to capture this essence in the icon design. I wanted the icon to feature a color match moment, serving as a visual reminder of the gameplay with just a quick glance.
Store Banner: While the app icon was a simpler design intended to be viewed at smaller sizes, the banner asset showcases visuals which are nearly identical to the in-game experience.