Game FlowWireframesConceptsUI DesignMockups

Game UI Design

Overview

Deck of Cosmos is a game created by BG-Games for an external client. The company wanted to create a new mobile product that would have delighted fans of space fantasy with an interesting story of heroes' journeys in the future.

Brief

The client aims to blend fantasy elements with a space theme, requiring an interface capable of accommodating extensive text content without overwhelming users. Create a visually pleasing design that not only engages players but also ensures an enjoyable and easily understandable gaming experience.

Disclaimer

The design shown in this case study for 'Deck of Cosmos' is not a final and official representation of the game design. It is one of the versions I worked on during the design process. All rights to the official game remain with the respective owners.

Role

UI Designer

Duration

4 months

Responsibilities

UI Design, Iterating on designs, Cooperation with Game developers, Wireframing, Prototyping, Mockups creation, and Illustration creation.

01 Game Flow

At the outset, I was introduced to a game flow. Following this map. My responsibility was to craft wireframes.

02 Wireframes

I started crafting wireframes, generating diverse layout variations for game menus, sub-screens, and battle screens, and presenting them to stakeholders

03 Concepts

In line with this, I made mood boards, gathered information, and participated in brainstorming sessions to make a decision on the game's style and main guides.

Inspiration for the celestial backdrop of the game

Visual insppiration for a character concept that blends futuristic armor with space-fantasy elements

Materials, style, color exploration

04 UI Design

Colors
Shadow

Small inner Shadow

Shadow:
X : 5
Y : 0
Blur : 12
Spread : 0
Color : 6DBEFA 100%

Medium Inner Shadow

Shadow:
X : 0
Y : -5
Blur : 12
Spread : 0
Color : 6DBEFA 100%

Large Inner Shadow

Shadow 1:
X : 0
Y : -4
Blur : 4
Spread : 0
Color :FFFFF 25%

Shadow 2:
X : 0
Y : -14
Blur : 21
Spread : 0
Color :6DBEFA 100%

Buttons

Default

Select

Passive

Components

Content holders

Menu selection

Battle stats menu

Character progress

Collected cards

Fight button

05 Mockups

Fight scene
Loading screen

Next: Contact Information

Continue