The 8 Obvious UI UX Design mistakes in your game & app— a practical guide for beginners

Of course I get it, you’re Indie. Or switching careers. Or fresh out of school — or any number of legitimately good excuses. You’ve got a lot on your plate, and not nearly enough time to master one of the most complicated artforms in the modern world.

I should know, I’m your friendly neighborhood UI UX Designer, Director and Mentor with a specialty in games & apps. Having mentored who-knows-how-many students in UI UX Design, I wanted to give back generously to those students I simply can not teach (just yet!). So I’ve put together some wise words in the wisest format known: bullet points; ably ready to help every newbie, indie and Up-And-Comer avoid obvious mistakes… and make brand new mistakes of their own!

A note to my fellow designers: Nope. I’m going to stop you right there. Yes, there are other ways, considerations, exceptions, etc. to these guidelines. This is meant for the non-designer; a Survival Guide if you find yourself lost in a Bauhaus desert. These rules aren’t meant to shape an incredible UI designer — just spare the world a ruinously terrible one.

Landing Page / Main Menu I designed for Nova Blitz (PC, Dragon Foundry)
  1. Bad Typography

We’ll start with the obvious. Oh aspiring designer, your choice and use of the written word is crazy-bad. Some Graphic Designers spend the better part of their careers studying Typography, so there is little shame in being hot garbage when put to task. Nevertheless, your typesetting can truly add or rob a project of its luster. Here are a few easy typography lessons to remember:

  • Pick a Sans Serif (fonts without the “fiddly bits”). They read better, especially on mobile screens
Base Building HUD I crafted for Zombie Gunship Survival (mobile, Limbic Games)

2. Horrible HUDs

HUD design, like typography, is an ocean unto itself replete with pearlescent beauty and abyssal frights. Like I tell every student and every dev team, ”We’ll be working on the HUD all the way up until we ship”.

And we do. Every. Single. Time.

Thus, having an awed appreciation (and primal terror) of HUDs, there are a few things you can fix that will make you read like a Designer well beyond your years:

  • No thin lines! These are easily lost when the action heats up, and they turn damn-near translucent on mobile
My Health Bar Explorations for Wasteland 3 (PC & console, inXile & Microsoft)

3. Overabundance of Information

I love my designers, love ’em to death — but I also believe they think their job is to put as much on the screen as humanly possible (The Great Kitchen Sink School of Applied Design). Absent a finger-wagging UX Designer by your side, you’ve probably fallen into the “100% of this information is relevant and needed, dammit!” trap a few times yourself. A few ways to avoid that:

  • Write down everything you want to display on the screen and assign it a number value from most to least important. That’s your Hierarchy, a critical concept in UX design. Place the items on your list in order, with the highest value owning more real-estate and prominence than the lower values. Build on top of your numerical importance. Trees never start with the leaves — and neither should you. Start with the root, vital priorities of your design, and build on top of your foundations.
One of many wireframes for the Shell Menu of Wasteland 3 (PC & console, inXile & Microsoft)

4. No Grid System

A consistent grid system helps readers parse information cleanly and swiftly. New Designers tend to place objects by eyeball’n ‘er in, with all the tempestuous results you would expect. Placing elements on a tight grid with comfortable margins will make any screen read with crystalline clarity. In general:

  • When in doubt, space things in Golden Ratio 3rds. Pairing ⅓ with ⅔ has been an attractive rule since long before the Renaissance; no reason to think it’ll get stale now.
Mobile mockup for the Clan Wars App for Call of Duty Advanced Warfare (mobile, Seismic Games, Beachhead Studios & Activision)

5. Crazy Colors

Color Theory is a skill that every Designer intuits. But for the color-infirmed, the idea that a red health bar can somehow be the wrong red or that an app’s blue header can be too “corporate” might seem baffling. Nonetheless, color on an interface is as vital as any line of code. It can also ruin a color-agnostic wireframe that looked so elegant mere days before, so beware:

  • There are 3 dimensions to color: Brightness, Hue and Saturation. Brightness you can reason out yourself. Hue is the textbook definition of color (green vs blue vs violet), and Saturation is how intense or faded the color is (bug-zapper blue vs Easter-egg blue). Most Indies tend to pick wildly saturated colors thinking they pop, but they distract like a pigeon in a restaurant. Fiddle with a color’s brightness and saturation first — until you know what you’re doing, keep it subtle.
My Speculative Wireframe for a messaging system for mobile games

6. Importing the Wrong Solutions

Tell me if you’ve heard this one before. You’re on Pinterest or Google grabbing whatever UI screens you can find. In this hydra-handed snatchfest, you find an interface you like and exclaim, “Why, this interface is perfect for my needs, I’ll just copy this and my troubles will be over!”

Except them troubles are about to go though cellular mitosis.

When you copy/paste an interface, you’re not taking into account the months, possibly years of refinement it took several Talents to solve a very specific problem. You’re grabbing somebody else’s answer to a visual question only obliquely related to yours.

And this is the classic, possibly classical mistake of focusing on technique first. For reasons that are difficult to fully articulate here, copying somebody else’s interface verbatim always leads to problems, most especially when you don’t understand the logical and artistic underpinnings that make it all work. Instead of committing grand-theft-design, snag something far more valuable: a better process:

  • Sketch out your ideas first. This is known as the Conceptualization phase of my job, where I figure out what all the “low-hanging fruit”-level problems are. Sketch until you’ve built the basic “scaffolding” around the project’s basic issues, quirks, and challenges
The Inventory Shell Menu I designed for Rage (PC & console, iD Software)

7. Not Using UI as Proving Grounds

And hey — speaking of testing, this last one is near and dear to my heart as a man who can’t perform his job without doing a little of everyone else’s. And here’s the dirty secret I know about being the man who wears many hats:

If your UI guy/gal is reasonably talented and they’re struggling to realize your design — it’s a bad design. Full stop. Here’s how to fix design issues from the UI/UX on backwards:

  • For games, if your inventory system requires massive space, ask yourself just how much loot the player receives every 5 minutes, every hour, and by endgame. Did you include filters and other quality of life improvements? Nobody has fun with inventory management — make sure you’re balancing the game to mitigate the player’s annoyance first!
Art pass side-by-side comparison on Shadowrun: Hong Kong (PC, Harebrained Schemes)

8. Not Getting Outside Help

No Designer is an island. The good ones humble themselves before the existential horror that they might not know everything there is to know about design. So we network, we showcase work-in-progress, and perhaps most shocking of all — we ask for help.

  • If you can’t get anyone to test or critique your work, you’ll have to synthesize some perspective on your own. Learn to walk away from your projects for a few hours so that you can come back with fresh eyes. You’ll be stunned how many times you’ll save yourself from a creative cul-de-sac if you just stop moving so fast.

Award-winning UI UX Designer, Director and remote 1–on-1 Mentor |

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store