A map selection UI for a made-up shooter game.

UI Design For Indie Game Developers

Indie developers have to juggle many skills due to limited resources. I myself have been working on my game for 4 years, and have come to love UI design. Here are a checklist of tips for UI design.

How Many Colors?

7 colors minimum

A match making page for a made-up shooter game.

Text color determines how light or dark the other colors will be. If the text is white, then button and menu colors should be dark to ensure text is readable. If the text is black, the UI colors should be bright.

The hover color should be colorful. It tells the player where they are focused. The next most important color is the pressed color, because it lets the player scan the page and see what options they have selected. Finally, the normal button color tells the player which visual elements on the page are clickable.

Sci-fi Buttons

Style

Visual UI styles for sci-fi buttons

To make a button, pick a shape then outline with a neon color. Finish off with a colorful glow. Background colors can be added for more detail.

The profile page for a made-up shooter game.

The navigation menu should always be visible so that the player knows where they are. Keep them near the edges of the screen as that is the convention.

I personally love to use desaturated, near gray colors for navigation because it does not draw the player's attention. Once the player has navigated, they want to focus on the main content on the page. If the navigation menu was a bright yellow, it would constantly draw the player's attention. Does the navigation really need to reminded them where they are? Instead, save bright colors for where we want the player to focus on.

Icons

The achievements page for a made-up shooter game.

Icons are small and need to pop out easily, so we use the highest contrast possible. Using a single color for icons is called flat design.

Sci-fi icons

Icon design tips for video games.

When it comes to detailed icons, I think Dota 2's items are the gold standard. In the image above, the background is black, item is a colorful yellow and glows green. A yellow outline around the item is also possible if we are short on time.

Fantasy Icons

JPG vs PNG

A JPG compressed logo, size 47 KB A PNG compressed logo, size 33 KB

Solid colors save smaller files as PNG. The first image is a JPG saved at 60% quality with a size of 47 KB. The second image is a PNG with a size of 33 KB. Modern icons, logos, and graphics designs tend to consist of solid colors. PNG is also needed if transparency is required, say for a transparent menu or button. Photographs are better suited for JPG. All detailed painting on my website are saved as 1920x1080 px, JPG images at 60% quality.

References