top of page
UI UX 1.png
woman-svgrepo-com.png

TicTacTik 5

TicTactic5 – UI Design Summary

TicTactic5 is a modern reimagining of the classic Tic-Tac-Toe, redesigned with a 5x5 grid system and inspired by the playful, social UI style of mobile Ludo games. My goal was to bring a familiar look to users while introducing a fresh competitive format with engaging visuals and intuitive interaction.

UI Inspiration: Mobile Ludo Games

  • Colorful & Player-Friendly: The UI takes inspiration from popular mobile Ludo apps, using vibrant colors, rounded buttons, and animated player avatars to create a casual, social-friendly atmosphere.

  • Touch-First Design: Optimized for mobile, every button and tile was designed with large tap zones and animated feedback to ensure ease of interaction on small screens.

  • Social Elements: Just like Ludo games, player profile images, turn indicators, and emoji-style reactions are included to bring a fun and interactive layer to multiplayer sessions.

Unique UI for TicTactic5

  • 5x5 Board Grid: I broke away from the traditional 3x3 Tic-Tac-Toe format and implemented a 5x5 grid where players must match five tiles in a row—horizontally or vertically—to win. This demanded a UI layout that could clearly communicate state, logic, and progression across more tiles.

  • Win Highlight System: A custom win-highlight animation draws a bright line across five matched tiles, offering satisfying feedback and reinforcing the moment of victory.

  • Multiplayer UI Flow: The UI supports up to 5 players, dynamically adapting avatars, colors, and tile marks to reflect the number of participants.

  • Game Modes & Avatar Selection: Before gameplay begins, players can select avatars and choose between Human vs. Human or Human vs. AI mode, with difficulty toggles built directly into the UI.

UI Features I Built:

  • Interactive 5x5 game board with animated tile selection

  • Multiplayer join screen with dynamic player slots and avatars

  • AI difficulty toggle (Easy, Normal, Hard) with touchable checkboxes

  • Pause menu with SFX/BGM settings

  • Game-over popup with custom messages and main menu return

Screenshots

Document

bottom of page