Creator Ant

Graphic Designer / UI/UX

Group 1831.png

About

Creator Ant is a mobile game project being developed for IOS/Android. In this project I was hired to create the UI for certain in-game menus. A lot of sketching, color theory, and research into finding the right design for the UI was needed, and the lack of having actual gameplay made this complicated.

Duration:  1 month

Tools:  Photoshop, Adobe Illustrator, Adobe XD

CONTEXT

Videogames are the representation of many crafts and ideas, weather it be sound design, art, narrative, cinematography, etc. UI/UX is just one of the many needed elements to create a polished videogame. However, having all of these ingredients doesn't mean you'll end up making a good videogame. So, what makes a videogame so good? It's how well all these ingredients are designed to fit, and work with each other. 

In videogames, the UI tends to change a lot, and this is due to the game's constant evolution in all departments throughout it's development. This job offered me a different challenge. When I decided to take the job the game was still in it's prototype stage, and had no prior conceptual art. They did have a general idea of what they wanted the end game result to be though, and that helped a lot. In a way, the UI design was going to be their deciding factor for the art style in the game.

The Process

Group 177.png

Research

At the beginning of this project I wasn't too sure if following my commonly used process would be the best idea for designing the UI for this game. This was mostly caused by the fact that game UIs are known for having a lot more interaction with the user. Knowing this, and being under time pressure, I decided that I would follow my process, but with a little twist.

Questions

What is the genre of our game?

What is considered a good UI/GUI inside the game's genre?

What games inside the genre do players consider having a good UI/GUI?

What are the player's needs?

Which class will our UI components belong to?

How will the UI's art style tie into the game's mechanics?

Group 160.png

Client Needs

There must be logic to the flow of the in-game's menus. Clear and non intrusive UI that corresponds to the game's genre and desired art style. The GUI must manage colors that are warm to the eyes.

User Goals

  • Goal: User can navigate the menus without any hiccups.

  • Goal: The user has the necessary information transmitted to him to play the game fluidly.
  • Goal: The user can play the game for long periods of time, without having any eye strain.

Client's Motto: Delivering a game means more more than just launching it. It must have the right ingredients; colors, taste, smell and look.

DEFINITION

Game's genre

To define the game's genre I decided to document the information from my client's game into a format very similar to that of a GDD's (Game Design Document). I did this to get a clearer overview of the game's attributes that could help me develop the UI/GUI for the game in the future.

Theme/Setting/Genre

  • Building/Construction

  • Adventure and Fantasy

  • RTS (Real time Strategy)

  • 2D

Platform

  • Mobile 

  • IOS/Android

Store

  • Micro-transactions

  • Skins, boosters, in-game currency

Inspirations

mushroom-wars-2-switch-hero.jpg
review-Mutant-Year-Zero-Road-To-Eden.jpg

Mushroom Wars 2 (GUI)

Mutant: Road to Eden (UI)

farmheroes.png

Far Heroes Saga (Menus)

Player's Needs

To understand what the players will require from the GUI and menus, I need to first establish what the core features for the GUI will be, as well as the possible windows that will be needed to navigate through out the game. To do this I inquired what I had already determined inside the game genre's section, and took a deeper look into my client's inspirations.

Resources-8.png

Resource feedback:  Tokens, money, land, natural resources, human resources and game points. Management involves various types of available resources to win the game.

Interface-8.png

Basic menu interface: Splash Screen, logo, ease of access, navigation feedback, real life feed, selections, and fail backs.

Congruency-8.png

Art congruence: Representation of characters and object with the UI. Use of shape, size, and colors. Typography selection.

The conceptual definition of our UI and GUI will heavily depend on how they interact with the game story and game space. The four classes are diegetic, non-diegetic, spacial and meta. Finding which one my game will need can be difficult to deduce. So, for this part I used a table to help me define it.

The four classes of video game UI components

The conceptual definition of our UI and GUI will heavily depend on how they interact with the game story and game space. The four classes are diegetic, non-diegetic, spacial and meta. Finding which one my game will need can be difficult to deduce. So, for this part I used a table to help me define it.

Gameinterfacetype.png

GUI

  • Is it in the game story? Yes.

  • Is it in the game space? Yes.

Recommended game interface : Diagetic

Having defined the main mechanics of the game that is being built. I know that the game will have a resource management system, as well as certain elements that will interact with the player inside the game's space and story.

Diegetic UI components inhabit both a game’s story and space, and characters within the game are aware of the components. Even though they exist within the game story and space, poorly considered diegetic components are capable of distracting or frustrating players.

Base Flow Charts

Now that I know what type of interface my GUI will need I can start depicting a series of flow charts keeping in mind the player's needs that I found from the inspirations I defined.. These flow charts must show a clear process of possible roads that the player might follow. These are the first plans, so elements might be added or removed in the future.

Group 1835_2x.png
Group 1838_2x.png

User Persona

Now that I know what type of interface my GUI will need I can start depicting a series of flow charts keeping in mind the player's needs that I found from the inspirations I defined.. These flow charts must show a clear process of possible roads that the player might follow. These are the first plans, so elements might be added or removed in the future.

Persona 1CA.png

CREATION

Taking into account the core features, the next step is to begin the production of low-fidelity wire frames. I made three wire frames for each page of the website. Low fidelity wire frames are important when developing an online product, as it helps the designer map out shell of the website's interface, its screens and basic information architecture.

Wireframe goals

  • Visual outlining

  • Typographic hierarchy

  • User information delivery

Character, GUI/Main

Main Menu_2x.png
GAMEPLAY_2x.png
Bee Customization_2x.png

Market Menus

Marketplace_2x.png
Themes_2x.png
Boosters_2x.png
Skins_2x.png
Dyes_2x.png

Overlays

Menu_2x.png
Settings_2x.png
Exit_2x.png

Moodboard

Now that I have the technical scheme for the project, I can start making the moodboard. The moodboard will help me develop the concept's visual idea. I normally use Behance to make my moodboards, since it offers a quick and easy way to find ideas, and add them to a moodboard. During this process I will keep an eye out for color schemes, text combinations, images, materials, and design ideas that might fit the project.

moodboardCA.png

High Fidelity Prototype

Giving life to the project both visually and mechanically is the most enjoyable part of UI/UX, for most designers. Gladly, making a high fidelity prototype requires both. This is when all of the research we have done finally becomes one. In this part I can see what my hard work, and countless hours of research has created. This is not to say that changes can't be made anymore, they can be done, but they shouldn't structurally be big changes, that's what the other wireframes were for. 

Character, GUI/Main

Main Menu – 1.png
GAMEPLAY – 1.png
Bee Customization – 1.png

Market Menus

Marketplace – 1.png
Themes – 1.png
Dyes – 1.png
Boosters – 1.png
Skins – 1.png

Overlays

Menu – 1_2x.png
Settings – 1_2x.png
Exit – 1_2x.png