Avengers Running Game
2015
Art Direction, UI Design, Graphic Design
Avengers running game is the first game project that I've worked with big IP. This design was to give an art and UI concept for the game demo which has been showed to Marvel and won the IP for our team. Left this project due to member exchange in team.
All the concept design, including main page, setting pop, and level selection, were designed in 2 days and all the support graphics were online resources modified in Photoshop.
Research
References Folder
1, Game references (Running games)
Since the game itself is a running game, it is necessary to do research on other mobile runnning games to find out what game elements and functions they have, how the other games arrange layout and systems and why they all designed running game in the certain way. This process provides basic functions and layout for a basic running game.
Avengers movies, Google images
2, Avengers movie and images
Use resources from Marvel films and games even with google images about Avengers as graphic elements in game.
Avengers fun who enjoys running games
3, Preferences from a potential user (Avengers Fan)
Due to the tight timeline, I only had time to interview one target user for his preferences that will help about set the features about the theme of Avengers.
Design
General UI layout and UI elements needed in Running games' mainmenu:
Character, Background, Setting, Mission (Map, Achievenment), High Score, Level, Ranking, Collectibles (Currency), Team (character selection), Shop, Play button
PROCESS
Layout and graphic elements
Layout & Graphic Elements
I prefer to use traditional way to draw few different versions' layout as the same size with phone screen to do some paper testing before working in photoshop.
Some handdrawing sketches about graphic elements on paper would help to set the details in the interface.
Use photoshop to design the background for main page saved time and set Avengers theme easily.
Avengers elements for background
Features
Follwoing images are the final version for these 2 days' fast concept and UI design.
1, S.H.I.E.L.D. based environment
2, UI style: clean, light, futuristic
3, Color: Dark blue, Blue (space and future), Red (Avengers)
4, 3D character model (available to view in 360 degrees with animation), light effect around the character
S.H.I.E.L.D. based environment
3D interactive character
Tap to play to open the base door
Setting popup
Main page
Mission/Map