Indie game UI on a budget: what to design first

Spend in this order

1. 01

   The first sixty seconds

   Splash, main menu, and whatever the player touches before gameplay starts. This is where refund decisions begin, and it is the screen every screenshot and thumbnail is taken from.

2. 02

   The HUD

   On screen for the entire playtime and the single biggest driver of whether the game feels professional. Also the thing most likely to be blamed for problems it did not cause.

3. 03

   The one system screen your game is about

   The garage, the skill tree, the deck builder, the shop. Whichever screen carries your hook deserves real design. The rest can be consistent rather than special.

4. 04

   Settings and pause

   Unglamorous, universally used, and where a cheap UI is most obvious. A tidy settings screen buys more credibility per hour than another menu flourish.

Everything after that, credits, achievements, secondary lists, can inherit the system rather than be individually designed. That is the whole trick: pay for the language, then speak it yourself.

What each of those four has to contain

"Design the main menu" is not a brief. These are the checklists I would hand to a designer, or work through myself.

The store page and the trailer come first commercially

Worth saying plainly: the screens that sell your game are seen by far more people than the screens inside it. A wishlist is won on a capsule image, six screenshots and thirty seconds of footage.

• Your main menu and HUD appear in almost every screenshot you will ever take. That is the real return on designing them first.
• Take screenshots at a busy but readable moment, not an empty one. Empty scenes read as unfinished games.
• Turn off debug overlays and placeholder text before capture. This sounds obvious and it is the single most common mistake on indie store pages.
• If a screen is not designed yet, do not screenshot it. Six good screenshots beat ten mixed ones.

Where a UI kit is genuinely fine

Asset store kits get more criticism than they deserve. Used honestly they are a real budget tool. The distinction is between structure and skin.

Using a kit without looking like you used one

If a kit is the right call for your budget, these five changes do most of the work of making it yours. They are cheap, and they are mostly find-and-replace.

1. Change the typeface. Nothing identifies a kit faster than its default font. One substitution changes the character of every screen at once.
2. Rebuild the corner radius and border language. Kits ship with a distinctive rounding and stroke weight. Pick your own and apply it everywhere.
3. Replace the palette entirely, including the greys. Kit greys are usually neutral; a slight warm or cool cast ties the interface to your art direction.
4. Redraw the icons you actually use. Usually a dozen or fewer. This is the highest-impact hour in the whole exercise.
5. Change the spacing scale. Kits have a signature rhythm. Re-spacing on your own scale breaks the resemblance more than any colour change.

The free pass you can run this week

Before spending anything, do this. It regularly gets a game most of the way from "amateur" to "clean", and it costs a weekend.

1. Pick one font and two weights. Mixed typefaces are the fastest way to look unfinished. One family, a regular and a bold, everywhere.
2. Build a spacing scale and use only it. 4, 8, 12, 16, 24, 32, 48. No arbitrary values. Inconsistent gaps are what people perceive as sloppiness without being able to name it.
3. Align everything to one grid. Most amateur screens are three near-misses away from looking designed.
4. Cut your palette to three colours plus greys. One accent, and use it only for the thing you want pressed.
5. Give every interactive element four states. Default, hover or focus, pressed, disabled. Missing states are why a UI feels dead.
6. Make one thing per screen obviously primary. If two elements are competing to be the main action, the player hesitates on every screen.
7. Delete one element per screen. Then check whether anyone missed it. Usually nobody does.
8. Check contrast. Any free contrast checker. Aim for 4.5:1 on body text. This one fix improves more screens than any other.

None of that requires a designer, an asset purchase or a new tool. It requires deciding on rules and then actually following them, which is most of what design discipline is.

Tools that cost nothing

What to hand a designer so you pay for design, not archaeology

A meaningful share of the cost on small projects is a designer working out what the game is. You can remove almost all of that.

• A playable build, or failing that a five-minute gameplay video.
• A numbered screen list, even if it is wrong. Wrong is far easier to correct than absent.
• Real content: the longest item name, the biggest number, the most crowded inventory.
• Your target resolutions and inputs, written down.
• Three references you like and one sentence each on why.
• Whatever UI already exists, including the parts you are embarrassed by. Especially those.

A realistic timeline for a small team

Assuming a solo or small indie project with a part-time designer, roughly six weeks of elapsed time and far fewer working days.

1. 01

   Week 1: flow and wireframes

   Every screen listed, the tree drawn, the four priority screens wireframed in greyscale. Cheapest week of the project and the one that decides the other five.

2. 02

   Week 2: one screen to final quality

   The main menu, taken all the way with its states. It establishes the visual language everything else inherits.

3. 03

   Weeks 3 – 4: the remaining priority screens

   HUD and the system screen, reviewed against real gameplay footage rather than stills.

4. 04

   Week 5: components and handoff

   The reusable set, exported assets, naming and a short spec. This is what lets you build the other fifteen screens yourself.

5. 05

   Week 6: implementation support and a pass on what shipped

   The gap between the design and the build is always bigger than expected. Budget for it deliberately rather than discovering it.

The mistakes that cost the most

• Designing the UI last. Retrofitting an interface onto finished systems costs more than designing it alongside them, every time.
• Skipping wireframes to save money. Wireframes are the cheapest hours in the project and they prevent the expensive ones.
• Buying screens instead of a system. Twenty individually designed screens with no shared components is twenty maintenance problems.
• Ignoring the controller until the end. Covered in more detail in seven HUD mistakes that make players quit, and it is the number one cause of full UI rebuilds.
• Spreading a small budget evenly. Four excellent screens and sixteen consistent ones beats twenty mediocre ones, commercially and critically.
• Hiring on price alone. The full breakdown of what things cost and why is in what game UI/UX design actually costs.