Process

Wireframes were given to me by the game designer. From there, I would mockup how it would look, make a few variations, and play with hierarchy a bit. After I get an okay from the director, I would begin polishing, making notes, and exporting those elements for the programmer to code in.

Tavern Abilities Wireframe

Tavern Abilities UI

Initial Style

Suggestions given by the directors for art direction included Summoners War and Clash Royale. From that, the style created was more vectorized and cell-shaded. Overall, it was a more cartoon-like style.

First Iteration: Inventory

First Iteration: Campaigns

First Iteration: Ranked Match

First Iteration: Quests

Second Iteration

Soon after, the director gave me ideas for a different approach for the style. This style was more akin to a more skeumorphic look. Games I looked at as a precedent included Sdorica and Sino Alice.

Iteration 2: Tavern Runes

Iteration 2: Campaigns

Iteration 2: Ranked Match

Iteration 2: Quests

Bonus Iteration

In addition, I also created a few screens in a more "flat UI" sort of style. Although these appealed to me more, it was really specific in style, and did not fit the theming of the game properly.

Bonus Iteration:  Rune Sets

Bonus Iteration: Inventory

Screens Created

In Depth Process

The match statistics screen were to be colored red and blue based off of the team colors of the battle. I took these colors and made a few layouts based on the spreadsheet layout provided in the wireframe. After consulting with the game designer and director, 2 designs were merged for the final screen. A mix of the worn, paper look with alternating colors to differentiate every other column. Little fixes such as the character portraits were modified for a cleaner layout.

Match Statistics Wireframe

Match Statistics Final

Match Statistics Variation 1

Match Statistics Variation 2

Similarly, for the victory screen, a general wireframe was given to me. I mocked up various screens that ranged from a flatter style to a more skeumorphic style. In the end, both the art team and directors preferred the flatter style. From there, I fleshed out what the defeat and draw graphics should look like, and created the rest of the layout based off of already made assets from before.

Victory Wireframe

Victory Final Layout

Victory Variation 1

Victory Variation 2

Victory Variation 3

Reflection

​Overall, I learnt a lot at this company. From 9 splicing and minimizing assets to art direction and communication; it was all very valuable. Some of the things I could've done better was really drilling down what the directors wanted in terms of art style. Instead of taking suggestions and making a few layouts from that, I should've made a variety of layouts; in different styles and really note down what the directors wanted in terms of atmosphere and feel. Rather than just "Okay, I think I can do something along the lines of the style you showed me"

In terms of steps after the layout were done, it would've been better to have more of a vision on what the micro animation and/or fx would look like. Would there be sparks, or transition effects that make it feel really tangible? And if so, what would need to be done in order to create those? Especially with a skeumorphic style, I think animation and fx play a big role in making it feel smooth. Looking back, I should’ve talked to the fx artist more about what these animations should’ve looked like.