Featured Blog | This community-written post highlights the best of what the game industry has to offer. Read more like it on the Game Developer Blogs or learn how to Submit Your Own Blog Post
This post presents the process behind the remaking of the UI art for Conflict0:Revolution.
Last October 25th, Black River Studios (BRS) made a soft-launch of Conflict0: Revolution. It’s a turn-based strategy game about a civilian uprising in an island divided by a wall.
In 2017 BRS launched a Tizen version of the same game and in 2018 the studio decided to port it for Android mobiles.
Me and Felipe Cumaru were responsible for evaluating and fixing any issues the previous interface had. While Felipe Cumaru handled the UX and implementation part of the task, I worked on the visuals. The following is a sum of how we worked and what we learned.
FIRST STEPS
First we talked with the whole project team and let everybody give input on what were the main issues the art in the game had (UI, illustrations, animation, FX, etc). We managed to compile a list for all the existent game screens: MENU, CINEMATICS, MAP, MISSION PREVIEW, DEPLOY, DECK, STATS, GAMEPLAY, MISSION REPORT, NEWSPAPER AND 3D COMBAT.
The main issues concerning the UI were:
Lack of a cohesive art style;
Some information had poor readability;
Missing information;
Excessive amount of screens.
After pointing all the problems and discussing how we would solve them, we split tasks. While Felipe Cumaru started making wireframes for UX validation, I started thinking on a cohesive art style.
PRE-PRODUCTION
First I revisited the overall art direction of the Tizen version to check a path I could follow while maintaining the essential characteristics of the game. These were the main characteristics I found :
The game aesthetics was based on a retro mix of mechanical and electrical technology;
Most of the UI experience was skeuomorphic.
With that in mind I made some research and was drawn to the art of old posters, postcards and flyers. The kind of art broadly known as “ephemera”.
Image 1 - Examples of reference images collected
After collecting some ephemera art examples I redesigned two screens (image 2) to present the other team members and collect their impressions.
Image 2 - First redesign studies
The overall impression was good.
Douglas Nogueira, the project team member responsible for redesigning the game illustrations, pointed out that we could make the UI and game illustrations relate more. Following his advice I redesigned one of the screens again and came to the following result:
Image 3 - Looking for a better relation between UI and game illustrations
The impressions were better than the previous, so I decided to sum up the art direction we were taking as follows:
Ephemera art look alike;
Retro mix of mechanical and electrical technology;
Skeuomorphic;
All the real elements had to look hand drawn and not photographical, following the same style as the game illustrations.
Having a clear direction in mind I started thumbnailing all the game screens, pointing out possible UX problems and making design suggestions for a better experience. As I would finish sketching a screen I would show Felipe Cumaru and the game designers to make sure we had all the game experience covered.
At this point it was decided that we would target devices from Samsung Galaxy J5 up to Samsung Galaxy S9. Since the aspect ratio of the screens is different, we had to design the screens so the sides could be cropped with no loss of information.
This is the final version of the screens thumbnails:
Image 4 – Screen thumbnails
As the screen thumbnails evolved, we realized we could cut some screens and simplify the experience. From 12 screens we ended up with 8 : MENU, CINEMATICS, MAP, MISSION PREVIEW, DEPLOY, INFORMATION, GAMEPLAY and MISSION REPORT.
Since I was the only one responsible for making the UI art and our time budget was small, I didn’t make a full UI art bible. Instead I made a very concise image with all the information I needed, focusing on color palettes.
Image 5 – color guidelines
PRODUCTION
As pretty much everything was decided in pre-production, the production was very straight forward. Some adjustments had to be made during implementation, but since we had a very solid approach we could easily overcome the UI art alterations.
Image 6 – a collection of screens designed in photoshop
I also made some animations to be used as guidelines, icons and character portraits.
Image 7 – a sample of the icons and character portraits created for the game.
FINAL THOUGHTS
If I were to summarize a couple of important points for this project, they would be:
Plan and predict as much as you can on pre-production.
Take care not to spend time making more documentation than you need.
Regularly ask for other team members’ opinion, especially those affected by the things you are designing.
If you have any doubt or would like me to go deeper in any aspect of this post, write me a message or comment bellow.
Thanks!
Read more about:
Featured BlogsYou May Also Like
