UI Design For Indie Game Developers
- Thursday 1 February 2018
- 3 min. read (644 words)
- How Many Colors?
- Sci-fi Buttons
- JPG vs PNG
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
- button normal
- button hovered = when a button is being considered by a player
- button pressed, selected, or active = when the player clicked a button
- menu active = the current menu the player is on
- menu inactive = menus the player is not on
- page background = if there is no background image
- text color = typically close to white or black
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.
- sans font family
- shapes: rectangles, hexagons, ellipses, and circles are popular
- neon borders for buttons
- transparent or solid background colors
- no textures, if you wan to be fancy, use lines
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 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 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.
- if background is close to black, then the icon should be close to white
- if background is close to white, then the icon should be close to black
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.
- background should be close to black or white
- icons should be colorful
- make the item glow, or outline it with a bright color
JPG vs PNG
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.