We’ll start with the obvious. Oh beloved fledgling designer, your choice and use of the written word is stupid-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 typographic sensibilities 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

• Work around 2 fonts: a Title font and a Body font. A title font should be showy and used sparingly as (unsurprisingly) titles and subheadings. Your body font should be comparatively boring, and read well small and in dense paragraphs

• Pick 2 font sizes at most and stay consistent on all your screens. Optimally pick two sizes exclusively for your body font and one size exclusively for the title font. Determine an appropriate font size based on your worst-case text field on your worst-case medium!

• Solve for long text fields by making sure most of them are double-lined. It’s a simpler solution than something programmatic. Translating? German is often twice as long as any English equivalent, so work around the idea of things inflating at least by double.

• When in doubt, left justify. Right justifying will get you killed in Art School, or worse…

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

And we do. Always. Every. Single. Time.

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

• No thin lines! These are easily lost when the action heats up, and turn damn-near translucent on mobile

• No red HUDs! Red reads as invalid or conditional, and you’ll have a Sisyphean-ass time trying to create a visual language without using red as a cautionary.

• Try not to have floating text, support it with a shape or design behind it to help separate vital information from screen noise. Can’t do that? Add a subtle stroke or shadow around floating text fields to draw it out from the background. You are using a thick sans serif, right?

• Take a video of the game in action and superimpose your HUD on top of it as early as possible (especially the wireframe!). Get a sense of how your HUD works in motion and in hectic, colorful action. No HUD will ever exist statically, so video helps you prototype under realistic conditions that much faster.

I love my designers, love ‘em to death – but I absolutely believe they think their job is to put as much stuff on the screen as humanly possible (The Great Kitchen Sink School of Applied Design). UI/UX’s job is to shred a Designer’s mobius-long wishlist to comparative ribbons. 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 getting 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.

• Have “opt-in” information. This can be: displays that only come out when the information is relevant (updates or experience gained). Info that fades away after X amount of time (HUD without action, achievement milestones). You can even tuck tertiary-level functions away under a single option button (ellipsis or hamburger menu buttons).

• Start removing huge portions of your Interface and test it out. Or turn around and start with only the most basic 3 elements on the HUD and build from that. You’ll be genuinely surprised how little you need on the screen to play. You’ll also discover that the less there is on screen, the less chance you have to mess it all up, either aesthetically or logistically. Minimalism saves lives and projects.

A consistent grid system helps the eye parse information cleanly and swiftly. Non-designers tend to place things by eye, and this is, of course, wildfire dumb. 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.

• Make sure that if your text is in a container or shape that it has a comfortable margin of space around it. If you don’t have the visual chops for this, just make sure the text doesn’t run all the way to the edges of a shape or past it. You’d think this’d be obvious, but… here we are.

• Conceptualize your screen in terms of horizontal slices, like a hamburger. This isn’t just good practice for responsive design, it also helps to compartmentalize the information for both the audience and the poor designer / coder.
  

Tell me if you’ve heard this one. You’re on Pinterest or Google grabbing whatever you can find UI-wise. 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-paste this and my troubles will be over!”

Except they won’t. Them troubles are going to go through cellular mitosis.

When you copy and paste UI, 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. It always fails you because your copying something contextless and without insight. For reasons that are difficult to fully articulate here, let’s just say copying somebody else’s interface verbatim always leads to problems, most especially when you don’t know what rules to bend and which to snap like wet celery. Instead of committing grand-theft-design, try to start with 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 roughly until you have the basic “scaffolding” around the project’s basic issues, quirks, and challenges

• Wireframe. There’s lots of ways to do it, mostly because it’s an intermediary between sketches and final art. For this phase, place things on a grid, and move elements in gigantic zones. Think of the wireframe as a TV-dinner: each section is meant for a different part of the meal, compartmentalized and specially sized for the meat, the veggies, the cobbler…

• Art pass. If the wireframe phase was done with respectable vigilance, you can simply paint-over your Wires with pixel-perfect art in the Art Pass (this rarely happens). So make sure when you wireframe, set it up as close to the final dimensions as possible and throw it in the game in as early a form as possible. Real testing doesn’t happen in a lab – it happens in the field.

Speaking of testing, this last one is near and dear to my heart as a man who, by necessity, can’t do 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 good and they’re struggling with your design – it’s a bad design. Full stop. Here’s how to fix gameplay issues from the UI/UX on backwards:

• If your inventory system requires a massive space, ask yourself just how much loot the player is receiving every 5 minutes, every hour, and by endgame. Nobody has fun with inventory management – make sure you’re balancing the game to mitigate the player’s annoyance first!

• If you’re showing a variable number of elements on screen like status effects, how many are there on average? How many can there be max? Fun fact: I had to make a blackjack minigame back at Midway Games. The average Blackjack hand is around 2-3 cards… but you can absolutely get 4 aces, 4 twos, 4 threes… now try to make a single system that accounts for 99% 2-3 cards in a hand and also accounts for the 1% design-flaying exceptions!

• If your players or testers end up dying a lot, it might not be the difficulty. It might be poor feedback. Do you have potent signals for low health and ammo? Are there audio as well as visual cues, for example, the sound of a clip becoming hollower with lower bullets? Did the player suffer a debilitating effect and not know about it? Are you showing too much information and as a result, nobody’s reading it?

Hustle-culture is stupid. There, I said it. Post-Industrial Revolution, the need for craftspeople went down and the need for assembly-line workers skyrocketed. Process (and imagination) were largely gutted from a worker’s responsibilities – meaining if the job was hard, well, sucks to be you.

But that’s not what UI UX Design is. We have a process that directly effects the project, the team and ourselves. If you are working to the bone on every screen, that’s not a spectacular work ethic. That’s a spectacular failing on your part. The artwork is supposed to work for you – never the other way around. But how to start?

• Make templates. Don’t go screen by screen by screen – see how many elements overlap and repeat, and start there.

• Research better. It’s easy to look up games or apps similar to yours on Google or Pinterest… and you should. But don’t just stop there. Look at programs that have similar problems in the abstract. Explore unrelated genres and artforms. Prioritize the modern, but don’t ever neglect amazing ideas that have withstood the tests of time.

• Be process oriented. Always fixate on how you’re doing things and the why. The more streamlined things are for you, the better they are for the project. The happier you are doing what you do… well… that’s the ultimate prize, now isn’t it?

And that’s it! Congratulations, you are now a full-fledged UI Designer, ready to handle any challenge a project may throw at you. But if by some gruesome stretch of the imagination that didn’t happen, maybe read some more blogs? Throw in a paypal donation – you don’t know – maybe me getting more Steam games helps you out somehow.