GUI for The Time Detectives mobile game
The Game is free in Google Play
Client: © The Time Detectives
My aim in this project was: Create game UI in comics setting for Trivia mobile game.
Main challenge: Create comics mood without using comics images and characters inside game.
Target devices: Android and iOS.
Game logo and characters were provided by client.
So that's what I did to achieve my design goal:
+ created comics inspired theme with "print dots" comic background and create all UI around this theme. It seems simple but this simple detail creates correct mood for all game screens.
+ created comics inspired theme with "print dots" comic background and create all UI around this theme. It seems simple but this simple detail creates correct mood for all game screens.
+ created simple saturated "comics" color palette for background and UI elements
+ found Bangers and Alegreya Type for headers and titles + Segoe UI for other texts
+ created dynamic UI shapes
Then I created wireframes in Adobe XD. A lot of different variants for Leaderboard and Achievements.
Adobe XD screen with prototype links.
© The Time Detectives, All Rights Reserved
And when we approved all screens on wireframes I created clean assets in Illustrator. Here you can see some final screens.
Leaderboard, Home screen or Lobby and Play screens. On Play screen you can see 3 type of spots:
gray - locked spot
gray - locked spot
red - information at incorrect place
green - information at correct place
Bits of info appearing by three in the bottom of the screen.
© The Time Detectives, All Rights Reserved
Achievements screens.
© The Time Detectives, All Rights Reserved
Leaderboard filters.
© The Time Detectives, All Rights Reserved
Let me know if you need something similar and I will be glad to discuss how can I help you.
Let me know if you like or don't like something :)
Comments are welcome!
