PIKAMOON.
A world to enter.
An experience to make your own.
ART DIRECTION
ILLUSTRATIONS
One visual language.
A complete player journey.
Pikamoon is a PC game with a Web3 and blockchain system. This collection focuses on the player-facing interface, from the main menu to the end of a match.
Purple highlights identify selections and secondary actions. Gold draws attention to major decisions. Dark translucent surfaces give text and controls a consistent home over the game world.
- MY CONTRIBUTION
- UI/UX design, art direction & illustrations
- PLATFORM
- PC / keyboard & mouse
- FEATURED SCOPE
- Customization, multiplayer, cards, settings, HUD & results
A player journey.
Before the visual finish.
The wireframes establish how players enter a match, organize a squad, read the action and return after a result. Comparing them with the finished screens makes the interface hierarchy and visual development visible.
Connect preparation, play and results.
A multiplayer interface has to support detailed setup outside the match and quick reading during it. These layouts give each task its own space while maintaining recognizable navigation and actions.
UI/UX · Art direction · Illustration
This case study focuses on the supplied wireframes and finished interface designs: screen structure, information grouping, visual hierarchy and the game’s purple-and-gold identity.
How the screens connect
A screen-flow summary reconstructed from the supplied designs.
- In the matchHUD · Map · Inventory · Radial actions
- Review the resultPlacement · MVP · Statistics
- Play againRematch action
From wireframe to finished interface.
Choose a screen, then switch between its structural layout and finished design. Enlarge either view to inspect the details.
Give match entry a clear home.
The wireframe establishes a persistent top navigation and a prominent match-entry action. The finished menu adds the character and game world around those controls, connecting navigation with player identity.
Designing the states around the match.
These explorations add depth to the player flow and are shown as wireframes in this collection.
Room browsing＋
Search, region and session filters sit above a comparable room list. Player count, session type and ping are visible before joining.
Inventory and looting＋
Available loot and equipped items occupy separate areas. Weapon, armor, Pikamoon and quick-item groups make the intended item categories explicit.
Radial actions＋
A circular arrangement explores selecting contextual actions without replacing the whole gameplay layout.
Victory and defeat labels＋
Shared placement and typography establish a consistent treatment for opposite match outcomes.
A small, shared icon vocabulary.
The solo, duo and squad marks communicate group size through repeated silhouettes. Supporting symbols cover settings, social access and feedback.
The hierarchy carries through the visual design.
The wireframes give navigation, team information and primary actions defined positions. The finished screens add character, material and color to those structures. Purple selections, gold primary actions and dark panels turn a neutral layout into a recognizable Pikamoon interface.
Continue through the finished screensMake the character
your own.
Category navigation stays on the left, the character takes center stage, and outfit choices sit beside a clear confirmation action.
From choosing a squad
to starting a match.
The lobby brings the squad together. Opening the friends panel adds search, presence and invitation controls while retaining the character lineup and play action.
Shared context
Persistent navigation and player identity connect the lobby to the wider game.
Social states
Presence indicators and invitation labels make the friends list more informative.
Match controls
Solo, duo and squad options sit close to the primary Play action.
Find a place in the squad.
Team columns group player slots and available spaces, with the selected map and match entry kept alongside the roster.
Explore custom match settings ＋
Mode, player count, AI behavior, item frequency and server selection share a consistent row layout. This design snapshot includes draft help copy.
Distinct characters.
A clear rarity language.
From restrained silver to ornate gold, each tier pairs character illustration with its own frame, palette and rarity label. Level, abilities and combat statistics follow a shared structure.
Tigeromon
An ornate gold frame, a large crown-like jewel and warm lighting give this tier the most elaborate treatment in the collection.
- DESIGN FOCUS
- Illustration, frame design & information hierarchy
- SHARED STRUCTURE
- Character, level, ability, attributes & rarity
Give players control
over their experience.
Settings are grouped into familiar categories, with a highlighted selection and a dedicated information panel. The gameplay view brings HUD visibility, camera motion, field of view and interaction prompts into a consistent list.
Design snapshot with draft help copy.
Keep the world visible.
Keep the essentials close.
Team status, orientation and match information occupy the outer edges. Abilities and inventory sit along the bottom, leaving the central play area largely open.
Stay connected
Player health and voice indicators share a compact group in the upper left.
Know the input
Keyboard labels accompany abilities, inventory slots and contextual interactions.
Read the surroundings
The compass and minimap support orientation without covering the center of play.
Explore the tactical map ＋
The expanded map brings squad positions, the zone boundary and marker controls into one view.
Celebrate the win.
Understand the performance.
The victory view emphasizes the squad and MVP. Detailed statistics offer a second layer for players who want to compare the match.
The world begins
before the match.
Two loading-screen directions: an energetic character composition in violet, and a wide mountain vista built around exploration and scale.
View the mountain illustration ＋
Samk Gillani — UI/UX design, art direction and illustrations. 3D characters and environments are shown as project context; 3D asset production is outside this portfolio credit.