How to make the jump from Vanilla / Corporate UI UX Design to Video Game UI UX Design
Cover art: My Landing Screen for The Saboteur (Pandemic, Electronic Arts)
How to make the jump from Vanilla / Corporate UI UX Design to Video Game UI UX Design
Whether you’ve taken a few online classes, have a few years of print under your belt or just always have had Hoop Dreams to be in the Video Game Industry – you’re… probably really confused right now.
Well, every jump is easier (and less harrowing) if you look before you leap, so I made a quick little guide for those of you that have some UI UX chops and what to acclimate to a newer, better, recession-proofier game ecology. The guide is certainly not a catch-all, and I encourage you to read more on game UI UX or snag a 1-on-1 mentorship of your own… but for the money you paid for this, I’d say it’ll do an admirable job of teaching you which skills you’ll need to modify and learn to get your foot in the door of video game UI UX Design.
Universal UI Art Skills you’ll need to slightly adapt in Game UI
Typography. An abyssal ocean unto itself, typography is even more difficult in gaming’s varying formats and conditions. Typography is less of an artistic battlefield like it is in Print, but you’ll still need discerning taste for Fonts and a monastic discipline for font sizes. Good instincts like a preference for sans-serifs and avoiding thin lines will serve you well, too.
Color Theory. Color Theory for games is far less about how light functions and more about controlling the screen. Lead the eye with high contrast, deaden areas with low brightness – that sort of thing. A masterful command of how colors affect tone is invaluable, too; knowing why one blue is “corporate”, one blue is “sci-fi” and one blue is “feminine” goes well beyond a hexadecimal code.
Composition. Knowing how to comfortably set strings, numbers, geometry, widgets and decals on a screen (of any size) is the beating, bleeding heart of game UI. You’ll also need mild clairvoyance to know when strings will be localized (translated) poorly, and sight-beyond-sight to perceive responsive/animatic solutions in static images.
Basic Architecture/Engineering UX Skills you’ll need to slightly adapt in Game UX
Wireframing. Wires are one of the very, very few deliverables specifically asked for by teams or remote clients. While there is literally no standard for wireframes in Game Design, game wires lean more towards “talking people through” the work rather than crafting a polished drop-off. A game wireframe is aggressively iterative, oftentimes superimposed directly onto the game to prototype (if you’re smart!) since it also has to function with intense color and distraction around it..
Modular Systems. If you’re used to designing the car as it’s rolling down the road, game design will be a smooth transition. You’ll likely have to display information (for example, resources) in a mobile game that may end up 3 times as expansive by the end of the year. You’ll have DLC for console games with unique features a world-apart from the templates you’ve made all project-long. Designing around the unknowable is great for NASA, but it’s plenty fine for you too.
Designer-Agnostic Systems. Game Designers, bless them, may sometimes leave you with a cob-webbed GDD (Game Design Document) or they might be pulled off in a thousand directions because Gamescom is just around the corner. Making your work Designer-agnostic, or better yet, accounting for any damn-fool thing a Designer could want is text-book bad-assery (in the limited fashion afforded UI UX). Knowing how to make an icon tray that holds 3, 12 and infinite amounts of icons is an obvious win for you and the team.
Brand New Overarching Skills to develop for game UI UX Design
A Rapid Process. When your process is bad, everyone suffers. But when your process is deft, effective and comfortable – you personally reap the benefits. This is especially true with remote work, where your NASCAR-like efficiency translates directly into how much of the day you can give back to yourself. The goal isn’t to work harder. The goal isn’t even to work smarter. The goal is to feel like you’re not working at all. That means a focus on how and why you’re doing the things you are doing.
Public Speaking. If you’re lucky, your Game Studio will have a strong production loop where you present your work at set intervals. You’ll have to talk about your work for nearly an hour or more in front of an audience that will have some pretty pointed questions. Being able to effortlessly (and charmingly) talk about and around your work is half your job. And yes, your competition is so Renaisance-y that they are excellent public speakers as well as hybrid artist-engineers.
Professional Humility. Which brings us elegantly to a very specific species of humility. If the Creative Director overrides your beautiful art for terrible green on pink, you are obliged to tell them why it imperils the project and offer alternative solutions. If they countermand you a second time, your job is to construct their doo-doo-ass garbage idea as best as humanly possible. Commercial Humility is the ability to say in a loud, authoritative voice, “Maybe it’s not about me.” and press forward. No matter what, my beloved architects of the future, move ever forward.
Art Skills you will need to develop for game UI
Artistry. I’ll define Artistry for you as, “the ability to do much with shockingly little”. App and web design leans on stock imagery and simple geometry – making the Art Pass relatively easy. Game design demands much more craft out of you, but with waylaying technical restrictions (in the old days, the texture budget for UI was like… 8 bits). You’ll definitely need to know how to “smoke and mirror” designs that look like they had ten-times the budget.
Using the Eye to Lead the Eye. Color theory, composition, and lighting all play a part in controlling what parts of the screen an audience fixates on or ignores. Heaped on top of that are ideas like FTUE (first time user experience), animation and effects. If you can pull the eye from lesser information, it highlights primary information that much better. If you can end an animation near the navigation, you’ve made it that much easier to understand the screen. The eye loves to jump around, understanding why it does the things it does allows you to predict it’s behavior – then to control it.
Texture Work. You don’t need to be a photoshop wizard to break into game UI UX… but you will be competing against other Photoshop wizards, so… best to start with the one area you know exists in abundance in game UI: lots of texture work. The glint of steel, the comfort of wood, the ghost-light of a neon-glow – learn how to dress your designs.
Basic Architecture/Engineering Skills you will need to develop for game UX
Information Feng-Shui. Information design is fine to know, but it is incidental to digestible information design. Reems of data need to be legible against a roil of colors all while simultaneously fitting the tone and mood of the game. That’s a tall order, especially on information-dense games like RPGs, Tactics, 4X and Simulations. Knowing how to present information not just well, but somehow majestically is your new mark of excellence.
Medium-first Designs. For vanilla UI UX, you’ll probably have a decent idea of the medium you’ll be designing for. While no game company will spring a new SKU (platform) on you mid-stream, you will face unique challenges per every gaming medium. PC players can enjoy the extreme privilege of a mouse, keyboard and tiny font sizes. Console players, however, need multiple functions on a limited control scheme, and navigation solutions on limited real-estate. Mobile? Don’t even get me started. Imagine a console game where when you hold the controller you cover nearly 20% of the screen(!)
Han Solo Perfectionism. If you like reference material, proven methodologies, and time-honored practices – you can take the window or the stairs. It’s the wild-west out here, with millions (sometimes billions!) of dollars bandied about by people you wouldn’t trust with your dog for a weekend. That means your job is to keep the ship moving forward, even if you have to get out and push. Cut corners, trim expectations, make mistakes and apologize – there’s just too much at stake for your ego or anxieties. You’ll need to learn that any crash you can walk away from is a good’n, and sometimes the mark of excellence is that the project got released at all.
John “The Wingless” Burnett is a 20 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 1-on-1 remote UX Design Mentorship