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)

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:

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:

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:

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:

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:

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:

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:

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.

Award-winning UI UX Designer, Director and remote 1–on-1 Mentor | www.thewingless.com

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