Creator Ant
Graphic Designer / UI/UX
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
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?
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 (GUI)
Mutant: Road to Eden (UI)
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.
Resource feedback: Tokens, money, land, natural resources, human resources and game points. Management involves various types of available resources to win the game.
Basic menu interface: Splash Screen, logo, ease of access, navigation feedback, real life feed, selections, and fail backs.
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.
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.
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.
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
Market Menus
Overlays
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.
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
Market Menus
Overlays
