A crash-course in getting into video game UI and UX design for absolute beginners

Cover art: my wireframe for Wasteland 3 by Microsoft

A crash-course in getting into video game UI and UX design for absolute beginners

Introduction – The joke’s on you

I jokingly tell all my friends that if they ever need a change of pace and income, they should just jump into User Interface and User Experience Design. “How hard can it be?!”

I joke – but recently, running a mentorship program in the shadow of a recession-laden future, I thought better of the challenge. Is it possible to write the most crash-course, pull-in-case-of-emergency guide to video game UI and UX Design? It’s unlikely to work for everyone… but what if it does work – even once? 

People desperate to get into the video game industry are not lacking for passion. You’ll need more than just passion to get the job, though, you’ll need a plan – however crude.


My initial UI pass on the Rec Room menu system

A crash-course in getting into video game UI and UX design for absolute beginners

Part 1 – The Most Basic Things to Know

No, it’s not at all as easy as the Dude-Where’s-My-Caresque Westwood commercials would have you believe. Getting a gaming job is hard and your competition is dauntless (also, your competition is me!). That said, there are a few absolute fundamentals that all UI / UX designers have that anyone, anywhere can cultivate at any time.

Information Design. Half your job is making a stupefying array of numbers and letters make sense on finite real-estate. This can be as obvious as dashboard interface design, where discrete pieces of information are presented in obvious partitions. This can also be as abstract as musical notation, binary clocks, book formatting and blueprints. You’ll need a good grasp of not just what information to share, but how and in what priority.

Composition. Modern design is dumb-simple, an art movement more elegantly refered to as minimalistic. Whatever the term, it is an absolute godsend to new designers. Everything is trending flat and geometric – and the real craft is more about how you place items, rather than the agonizing whittling of those items themselves.  

Implementation. You can get away with just making a hot mess of grey boxes (UX Design) or a bunch of art that covers other people’s art (UI Artist), but eventually your boss is going to want the stuff from Photoshop in the game. Often you’ll have a dedicated programmer to do all the heavy lifting, but not always. From the horrors of proprietary systems to miracles like Scaleform, to modern staples like Unity & Unreal, you should know something about the engines that drive your work, particularly their limits and impossibilities.

Granted, it would be preferable if you were a Renaissance person, but if you can only focus on three areas to get into game interface design, this is your new Holy Trinity. 


video game UX design UI artist wireframe iphone
A new style of wireframing I developed for a client that also dictates conditional actions

A crash-course in getting into video game UI and UX design for absolute beginners

Part 2 – The Cult

Now that you know a little more about what skills you’ll need, you also need to know what job you’re getting yourself into. Making a modern game takes a village, and our village has a clear hierarchy. 

At the top is the Creative Director who corralls the disassembled creativity on the project into something cohesive and fun. Next is the Producer, who reins in creative ideas with realities like schedules, budgets, and dwindling resources. Then there are the three Noble Houses: Art, Design and Coding. Traditionally there are Director level positions in all 3, followed by Leads, Seniors and honorarium-less developers.

UI / UX is a hidden, cult-like 4th House. 

That’s because interface design for games isn’t really art or design or coding, it’s all of those things and its own unique discipline as well. Adding to the enigma: of all the people added to the team, the UI artist or UX designer can raise or lower the metacritic score by as much as 3 points all by themselves. Not even the coders have that kind of individualized power – and very few on the team can see their work through from start to finish with as much parity. 

Which translates to immense power, but also widespread misunderstanding of your role. If the hiring managers and Art Directors don’t quite know what to look for in a UI artist / UX designer, how in the world would you? How can you get started when the end goal isn’t even clearly defined?

I have a solution. Let’s forget about the amorphous job description and simply talk about what the role actually looks like, then work our way backwards.


video game UX design UI artist art Nova Blitz
Exploded view of the art assets I created for the indie card game Nova Blitz

A crash-course in getting into video game UI and UX design for absolute beginners

Part 3 – The Three Phases of your Work

I’ve worked for nearly 20 years as a UI Artist and UX Designer, half of that time as an in-house artist at name-brand game studios (Midway, EA, id Software, Glu Mobile) and the other half as an art mercenary who works exclusively remotely – long before it was fashionable. The projects and companies I’ve helped vary wildly, but almost all my work is broken down into 3 distinct phases.

Conceptualization. This phase is oft-overlooked and spot-welded into the second phase, but it’s important in its own right. Conceptualization is constructing “scaffolding” around the project so you can get a sense of its scale and the most obvious problems you’ll be facing. Every attempt should be made to, in as ramshackle a way possible, make a model that represents the project from start to finish. Conceptualization ensures nothing sneaks up on you and the lowest hanging fruit is always known. You might also know this phase as, “doing your due diligence”. 

Wireframing. This is the most cerebral of the phases, and the most important. Wireframing is a modeling or mocking-up the fundamentals needed to run the game. Oftentimes this takes the form of grey-boxes on a grid, or a wireframe. Wireframing, when done properly, takes an idea and allows it to be ripped to shreds without dedicating a single line of code or pixel to the endeavor. It also allows teams to talk about visuals while having a visual present. That may seem obvious, but you’d be surprised how many teams want to “imagineer” something that only exists in the individual mind in wild variation. 

Art pass. If you’ve done the wireframing pass correctly, this should be a straight pixel-perfect paint over. Effects, animations and polish are usually crammed into this phase, though in a perfect world, they would be their own lovingly-produced phase. 

The life of a UI / UX designer is a lot of thinking, plenty of measuring twice and at the most ideal, cutting once. Failing this, your job is keeping the ship moving, since you – all by your lonesome – can cause some serious damage if you don’t know what you’re doing. You’re also the one most brutally punished or generously gifted for having a reliable process – so do be process driven.


Wireframe work for a mobile card fast-follow of a “Cards Against Humanity” style game

A crash-course in getting into video game UI and UX design for absolute beginners

Part 4 – No but seriously, how do I get in?

Alright, fundamentals and overviews are all well and good, but where’s the step-by-step? Where’s the meat? Let’s talk about how to get you fitted inside a game company sweatshirt that smells to high hell because nobody takes those home to wash. 

The first thing you’ll need is a basic understanding of Photoshop – and I mean basic. 99% of my time on the program is moving, resizing, shapes, and text. Only in the throes of the Art Phase do I bring my full Photoshop might to bear, and even then, it’s mostly minimalist and geometric. Being strong in Photoshop is obviously a plus, but the absolute basics will build you an empire – especially if you’re specializing in User Experience – then you barely need to know what a square is (it’s the not-circle).

Next, you will need a portfolio so others can judge your work and be reasonably confident you won’t take down the company in a mushroom cloud of incompetence. A portfolio is a fascinating subject in its own right, but for right now, I’d like to redefine what a portfolio is: 

A portfolio is a business card.

The only thing a Portfolio needs to do is get you a phone call or an email. If the most elaborate, lovingly-realized portfolio gets zero hits for months, it’s an unmitigated failure. If a hideous web 1.0 webpage with skeleton .gifs garners hundreds of emails a day – it’s an opus. 

Also bear in mind very few people will stumble upon your portfolio organically. 99% of the time an Art Director, hiring manager or somesuch will be your audience, and they are not there to peruse. They are looking to fill a chair, and from their perspective, this is a grumbling annoyance they’d rather be done with. Design your portfolio as though your audience would rather be anywhere but here.

To that end, your portfolio should be straightforward, swiftly showcasing a panorama of work, styles, mediums and devices. UI and UX have the benefit of being extremely flexible by way of job opportunities: apps, games, websites, design firms – you’ll never be pigeon-holed if you don’t want to be. You can specialize if you want, but nobody will ever be turned off by a kaleidoscopic showing of talent. 

You can build your own site with some very slick and cheap WordPress kits, and there are sites where you can simply upload your work with a nice veneer of polish. If push comes to shove, you can always put your work in a google drive and say your site is down. If you’re entry-level, the work is good and the need is great, what do they care?

You’ll also need a resume just as an ancient holdover from a bygone age. An ominous word of caution: unlike other industries, you will be judged on the craftsmanship of the resume, not just its contents. After all, if you have a ugly, dizzying representation of your top-shelf skills, what foul excrement are you planning to design for the company?

But that’s really it, Photoshop. A Portfolio and a Resume and you’ll be ready to apply for jobs. 


UX Design Mentorship Programs CoD
The companion app to Call of Duty Ghosts I made while in direct competition with Battlefield’s companion app

A crash-course in getting into video game UI and UX design for absolute beginners

Part 5 – Come on, it can’t be that easy

Hell no it ain’t that easy! The very last thing you’ll need is experience, and experience is a big subject. Nobody wants to hire a bad artist or a ruinously inexperienced one. So how do we approximate experience?

There are two basic ways to synthesize expertise. One is to create projects for yourself. The other is to accelerate your learning with classes or a mentor. 

Personal Projects. This is the method that I used to get my foot in the door with a portfolio that spoke to the viewer of talent, creativity and personality. As my skills developed, my personal work took on a life of its own, as evidenced by the fact that you’re reading my Blog! 

I’ll be frank: you should be making personal work all the time. This will help corral the type of work you just can’t get enough of. Paying the bills is one thing, but surely you’re not making the jump to UI / UX to be just as miserable as before? Your personal work is your crystal ball into your best possible future. 

Classes & Mentorships. This is the method I actually wished I had used. Even a terrible class (on an unrelated note, what’s good UIC Graduate Art Department!) can teach you through raw osmosis. A good class can submerge you in the culture of your industry and surround you with talent at roughly your “weight-class”. 

Mentorships in particular are excellent for anyone switching professions or fresh out of school. Mentors mix a practical curriculum of projects, resumes and portfolio redesigns with the natural drive to make better artists. My time as a Mentor has been tremendous, and I highly recommend established artists teach and for anyone of any skill level to give it a whirl. 


The wireframe I made for Microsoft’s Wasteland 3 Shell Menu

A crash-course in getting into video game UI and UX design for absolute beginners

Part 6 – Foot in the door

No, it’s not easy or a particularly straight path. But, when taken to a reductive extreme, or if you really just want to jump into UI / UX design for games, you really only need the following:

Photoshop

A Portfolio. 6-9 projects. 3 images & a paragraph per project, easy to access contact info. All this needs to do is get your an email or phone call.

A Resume. Sharply designed – you will be judged on its craftsmanship, not just it’s content! But mostly this is for online forms that require it.

That will allow you to start, in as raw and unrefined a fashion as possible, to apply to game UI / UX jobs. Building up the talent and expertise, well that’s on you, baby. I’ve already recommended the powerful one-two punch of Personal Projects and Mentorships

But if a single Blog entry doesn’t get you your dream job in the video game Industry… well, I guess I could always write a second blog.


John “The Wingless” Burnett is a 15 year User Interface Artist (UI Artist) and User Experience Designer (UX Designer) in the video game industry and digital design sphere. He is an award-winning artist available for hire or for UX Design Mentorship

Share your thoughts