UI Design For Indie Game Developers
- 2018 February 1 Thursday
- 3 min. read (632 words)
- How Many Colors?
- Sci-fi Buttons
- Navigation
- Icons
- JPG vs PNG
- References
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 = close to white or black
Text color determines how light or dark the other colors will be. If the text is white, then the UI colors should be dark to ensure text is readable. If the text is black, the UI colors should be bright.
I like to pick button colors that are similar. Like, red, yellow, or red, orange, or blue, purple. This way buttons have a consistent style.
Buttons
Components
- text
- shape = rectangles, hexagons, ellipses, and circles are popular
- border/outline around the button
- background color
The example above shows off many shape, border, and background color variations. It is time consuming to play around with each component. I recommend focusing on the background color of the button. A rectangle shape is good enough. It is usually a good idea to add a border around the button to make it pop out more. Pick a border color that is darker or lighter then background color.
Navigation
The navigation menu should always be visible, so that the player knows where they are. Keep them near the edges of the screen. That way, they don't draw attention from the main content of the page.
I like desaturated, near gray, colors for navigation. If the navigation menu was a bright yellow, then it would constantly draw the player's attention, and distract them from the main content of the page. Save the bright colors for what we want the player to focus on.
Icons
Icons are small, and can be hard to read. We use high contrast to make icons pop out. Solid colors stand out easier, than gradients.
Sci-fi icons
- 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
Fantasy icons can be more detailed. I think Dota 2's items are the gold standard for fantasy icons. In the image above, the background is black, the item is a colorful yellow, and it glows green. A yellow outline around the item is also possible if we are short on time.
Fantasy Icons
- 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.