spawn dragon blue

Image credit to Chern

Scribblenauts Fightin' Words 

iOS 2D Mobile Game UI design

Role: UI Artist

Company: 5thcell Media LLC

Responsibilities: Conceptualize, create, and integrate 2D/3D assets into games.

                           Assist in the design of UI flow and function.

                           Communicate designs in a technical manner for programmer implementation.

Mentors: Tommy Mabe, Haydn Dalton.

Tools Used: Photoshop, Illustrator, Flash.

Date: September. 2015- March. 2016 

  Game Overview

 

"Project Green is an RPG Word Puzzle Game, with the visual feedback of classic Arcade games. Our goal is to produce a simple game, which is incredibly well executed, with the primary goal of continually stimulating the player with positive feedback.

 

Maxwell/Lilly are recalling back to the start of some Amazing Adventures they’ve had with the Magic Notebook; They’ve time travelled, fought monsters, stopped alien invasions, stormed castles and everything else in-between. The FTE of the game will work as part of our storytelling mechanism and a way to teach users to play the game."

 

                                                                                                                            ----Haydn Dalton, Principal Designer in 5thcell Media

 

  User Interface Design & Redesign

Analysis of original UI design

Information Arrangement

-                Importance              +

Color Palette

Visual Language

Info Panel

Font Used

Example of original user interface

Refinement & Redesign

One of the design iterations

Final version

For the previous UIs, the color feels a little bit dark which is giving a sense of negative. So I decided to use a brighter color palette which has more contrast in hue and saturation.

 

 

 

 

 

As for the layout, I made the info panel more obvious when first come to this screen, and chunk info together into three main groups.

 

A vivid character is more attractive than a static icon. And also simplified the icons to make the overall screen looks cleaner and easier to learn/use.

Other UIs 

Navigation Redesign

Original Navigation Design

New Navigation Design ---- Unselected Status

New Navigation Design ---- Selected Status

Highlighted Design Porcess

Icon Design

Typeface

Sketches

Each time before I start to make something with computer, I always start with pen and paper first. It is more flexible for me, and I can generate ideas as much as possible and quickly sketch them out on a piece of paper. 

These sketches demonstrated how the high fidelity UIs come from. For most UIs I made, they always born on the paper first, and then, grew up on a computer.

  Learning and Reflections

This the first real project that I've been working on, and I feel very proud of it although it haven't published globally at the end. Game UI is not that simply like what I supposed at beginning. As a player, it's hard to understand how these UIs have been created, iterated, redesigned time by time, even some of them only shown about 0.1 second in the game.

 

Design is about iteration. There're thousands of possibilities about how do you want to present the game, what kind of feeling you want to convey to players, what context should be in, and also, what's the goal for players to keep them playing the game. I've spent most of my time exploring, instead of doing. For my understanding, drawing a beautiful icon could be a great skill, but the more important thing is understanding player's expectations, and give them higher satisfaction even than they expected. 

 

During the 6 month spending in game UI art, I've improved my skills of creating compelling UIs, and learnt some background knowledge about F2P games. I would pursue myself to learn more while practising, and hope to make a killer-level game in future.

All rights reserved by Xianglian(Necklace) Zhang 2019