Salter Liu
UI/UX Designer
Introduction
GHOST in the SHELL
Equipment System
UI/UX Concept
Personal UI/UX design for an FPS game concept inspired by the movie Ghost in the Shell.
Including the design process from world setting and requirements analysis to wireframe and GUI design.Some of the material from the internet.
Requirement
Personal Project
2 weeks
Role: UX Design, UI Art, Prototype
Tools: Photoshop, Illustrator, After Effects
Platform: PS4, PC
Game Genre: FPS
Create an Equipment System:
- 5 body slots, primary weapon, secondary weapon, sidearm
- At most 4 level up modify for each equipment
- Show DPS for weapons, armor value for armor
- Show character’s ATK, DEF, Health, Energy, resistances, credits
- In wireframes, illustrate the flow to select a weapon from the sub-menu “Weapons” and compare or change a weapon.
Introduction
辣条杂货店
Mobile Game
UI Art Design
The released game I've been working on when being as a UI/UX designer in Moe Stone Mobile Game, a small indie game studio located in Beijing, China. It's a story-driven simulation game with retro and cute art style, reminds the player of their childhood.
Steam Page Link: https://store.steampowered.com/app/687650/_/
Work Project
6 month
Developer: Moe Stone Mobile Game
Platform: Android, Steam
Role: UX Design, UI Art
Tools: Photoshop, Illustrator, Unity
Introduction
Motion Graphic Design
UI Art & Prototype
Personal Practice
Role: UX Design, UI Art, Motion Graphic
Tools: After Effects, Photoshop, Illustrator
Some of my motion graphic works by After Effects.
Introduction
ZOOTOPIA
Action Adventure Game
Pre-battle UI/UX Design
Personal UI/UX design for an action adventure game concept inspired by the movie Zootopia.
Including the design process from world setting and requirements analysis to wireframe and GUI design.Some of the material from the internet.
Requirement
Personal Project
2 weeks
Role: UX Design, UI Art, Game Concept
Tools: Photoshop, Illustrator
Design pre-battle interfaces for an mobile game with the concept of ZOOTOPIA.
-Character: 1 out of 9
-Stats: HP, ATK, AP
-Skills: 3 out of 20
-Rune: 5 out of 10
-Difficulty: Normal & Hard
-Reward: Common & Rare
-Friend’s Assistance available
-Game Genre not restricted
How to match
the gameplay
with the ZOOTOPIA IP?
1.“Zootopia” is a cute, futuristic, intelligent city
-UI style set to be energetic, cute but not childish.
-detail-oriented, well-balanced,
-avoid fantasy, enchantment, and superpower.
2.Rich map resource, Various kinds of terrain
Various kinds of terrain: rain forest, mountain hill, dessert etc
Bridge, cable car, various kinds of transportation
Reflects the advantage and disadvantage in the nature.
3.Numerous attractive characters with different personality and appearance.
Various kinds of terrain: rain forest, mountain hill, dessert etc
Bridge, cable car, various kinds of transportation
Reflects the advantage and disadvantage in the nature.
4.There’s a lot action, fighting, and chasing scene in the movie.
5.City life and Daily routines - daily quest, cultivate system and mini-games
Base on Above
Came up with
Core Gameplay:
Action adventure games
based on the distinctive characters and terrain types.
Start to Think About
UX Design Features
a) balance and counters among character types from abilities and maps
There are different challenges in the game, and players need to solve them use different strategies and different type of character.
Just like Pokemon, we will bring all the water pokemon to fight the fire gym to counter the opponents.
b) The interface will fit the concept and art style in the original movie
UI will consider the feature in the movie and create a sense of immersive.
Emphasize the unique characteristic of each character.
c) A realistic, logical and balanced game system
The interface will have a clear flow.
Weaken the significance on levels equipment, and enchantment.
Emphasize more on team formation and synergy among different characters.
Design the User Flow
for Pre-battle Process
Flow Chart
and Wire Frame
Base on the user flow, I draw the wire frame to demonstrate the UX for Pre-battle interfaces.
Select Map
01. Return button, click to quit the world map interface.
02.The name and the scope of each battlefield.
Click a battlefield - zoom in that field - enter the “select battlefield” interface
03. The locked field will have a grey shade.
Use the world map in Zootopia as the entry to the pre-battle interface.
Take advantage of the original attractive IP of Zootopia.
Select Battlefield
Battlefield nameTab: easy mode/ hard mode.
Tab: easy mode/ hard mode.
Click a battlefield - zoom in that field - enter the “select battlefield” interface
The level list (10 levels), show 4 levels in one screen at a time.
Each level includes order number, name, stars achieved, energy requirement.
Scroll up and down to see more levels.
Get stars (1 stars - 2 stars - 3 stars) base on level complete percentage.
The selected unlocked level will show the mission information ( 04).
The locked level will not be clickable, shown as dark shade and a lock icon.
The mission information of the selected level, including mission description and loots.
Show different loots between easy/hard mode.
The color of the loots’ icon border will represent the rarity .
long-press the loot icon to see info box of it.
If the energy is enough, the player can click the ”ready” button to enter the “select charater & friend” interface.
If the energy is not enough, show the “replenish energy” button that lead to the “energy shop” interface.
The background is the 3D motion picture or illlustration of the battle field.
Show remaining energy/energy upper limit, click plus button to enter the “energy shop” interface.
The “world map” button , click to return to the world map interface.
01.
02.
03.
04.
05.
06.
07.
08.
Each battle field has 10 different levels.
It takes carrots (energy) to enter any map. Player has a greater chance of getting rare items in hard mode.
Get 3 stars to unlock more following levels.
Select Character
Level name and level attributes (1- 3).
Show total STR (related to skills and characters) and recommend STR.
Selected character’s information info panel.
Show player name, level.
Show character‘s quality, name, level, SRT and 3 attributes (HP, ATK, AP).
Show character’s 3 skills, long-press skill icon to see the skill infobox.
When selecting the player‘s character, click “change skill” button to enter “select skill” interface.
When selecting a friend’s character, the “change skill” button is not clickable.
The upper row shows the player’s characters, the lower row shows friend’s characters (the character with the highest SRT from each friend).
Show 7 characters in a row, scroll right/left to see more.
By default, the first character of the player’s and the “go alone” button are selected.
The color of the character’s icon border represents the character’s quality.
(shinning gold - S, gold - A, silver - B, copper - C, white - D)
Each friend can only be invited once per day.
4 status of the character's icon:
Click to enter the “select rune” interface.
Click to return to the “select battlefield” interface.
01.
02.
03.
04.
05.
06.
Select Skill
The"select character ( select friend)" interface is covered with shade, the “select skill” interface comes out as a modal dialog.
The skill list, 20 skills in total, 5 skill on one page, scroll to see more.
Show skill icon (the color represent the attribute), skill name, level.
The skill that has been selected as a special mark and border.
Drag the skill to 04 (selected skill tab) to replace the selected skill.
The infobox of the selected skill, including AP cost, CD (cool down time), skill description.
The selected skill tab (3 skills). Click skill icon to change the skill tab. After replaced by the skill from the skill list, show total SRT’s change.
Click info button, the attribute relationship info box pop up.
Click the return button to finish the skill selecting, return to the “select character (select friend)” interface.
01.
02.
03.
04.
05.
06.
Select Rune
3 characters’ 3D models, running animation.
The equipment tap is divided into 2 parts, the left part is the equipment base on 5 different attributes, the right part is the equipment that adds the BUFF to a character. The player can take 5 types of equipment per time.
Click the “Go” button to enter the battlefield.
Click the “return” button to go back to the “select character (select friend)” interface.
The background is the 3D environment picture of the level or 2D illustration of the level scene.
01.
02.
03.
04.
05.
