Game UI & UX: The State of Wireframing and Prototyping Tools in Game Development

It’s not a big secret that UI and UX have become the hottest topics in recent years — the amount of open job positions and courses offered by universities around the globe speaks for itself. As a logical consequence software solutions tailored to UI and UX needs have been shooting up like mushrooms, each offering great approaches to creating flows, wireframes, prototypes and sometimes even high-end simulations of your product.

With all those tools available at our hands, some of them even for free, the situation couldn’t be better. Well, at least if you’re working on apps or websites. If you’re working on video games, things get a little tricky: Sure, we all use some software for it, but while in smaller studios you’re lucky to even have dedicated personell, large-scale productions often use archaic methods. And if you happen to use specific wireframing or prototyping tools you still have to work your way around their control schemes, platform focuses or publishing philosophies. It really feels like we’re far behind other creative industries, so here’s a quick evaluation of available tools with very mixed results.

Adobe XD

Adobe XD is a very promising, kind-of new tool that offers great sharing features for wireframes and interactive prototypes, completely with comment functionality etc. It spent a long time as a free beta version iterated on-the-go in tandem with the community and is now a part of Adobe’s Creative Cloud service. Some added features make designing things with it an extremely fast and enjoyable process, but it comes with a major downside: Adobe wants all customers to share their work with clients via their Creative Cloud and doesn’t plan any enterprise solutions that run on company servers.

Due to most studios’ security policies this effectively renders XD useless for us as we don’t want to park our project’s data online and risk leaks or server downtimes. This is a really sad situation as XD itself is quite useful and promising — being an Adobe product usually comes with a great integration into the CC workflow.

Note: Please see the update at the bottom of this article.

Axure RP

You can’t talk about wireframing software without mentioning Axure, which has been the go-to solution for a very long time. Compared to most other tools it instantly feels a little dated with its fiddly UI and complicated template setups and its developers are a bit reluctant when it comes to feature requests from the community, but nevertheless it comes with great sharing features. It’s completely HTML-driven and allows for interactive prototypes with animations, overlay, interaction between widgets, wireframes and even flow charts to be shared online or on internal servers in a confluence-like fashion. It offers a great hierarchy list on the left, comment functions etc. and collaboration tools that allow users to work on the same files.

More detailed features like dealing with actual input data etc. make it quite powerful. On the downside it’s quite expensive in its enterprise license, where the costs seem to explode compared to its other plans. If you want to keep your data save, enterprise is the way to go though.

InVision

InVision aims to become the “world’s most powerful screen design tool”. The screenshot above is from the upcoming InVision studio version, which seems very promising, but at the same time is tailored to high-fidelity prototypes that resemble the final product. While this is a great feature, it actually seems to need a lot of pre-built assets, which goes a little beyond pure wireframing. We’ll probably take a closer look at it once it’s released and check how suitable it performs in a game production environment.

There’s an enterprise plan available, but without any details about internal server tools and pricing. Always nice if you have to dig for data first…

Balsamiq Mockups/Wireframes

Balsamiq Mockups is a nice little tool that aims for simple and quick wireframe creation. Wireframes can have interactive features and it has many export functions of which the PDF export is the most used in our studio. The exported PDFs keep the links and thus become their own little interactive prototypes that can be easily sent around as everyone can open PDFs. Since most people aren’t used to that though, flipping through the pages without trying the actual flow is a common thing. It’s quite fiddly and a little fragile, but at least an alternative that somehow does the job.

The developers recently introduced their very own cloud-based service called Balsamiq Wireframes, which is a complete rebuild of Mockups and comes as a browser app. Naturally, this is nice for small-scale productions and individuals, but less interesting for game developers who like to keep their data internal.

Figma

This one was released roughly a year ago and feels quite intriguing. It seems to work a lot like InVision and aims for collaborative team setups with some niceties like Slack integration among other things. As a relatively fresh tool an enterprise license is yet to come — we’ll see what wonders it may bring.

As mentioned initially, there are countless similar products coming out right now, which are all quite similar in their functionalities.

Sketch & Framer Studio

Two more well-established tool for wireframes and prototypes. Just in this list for the sake of completion as they’re only available on Mac. Meh.

The Usual Workarounds

Besides all those of course there’s a whole bunch of similar tools, with new ones getting released regularly — and also the often misused fallback options most designers and developers have installed anyway: PowerPoint, Illustrator, Photoshop (never use PS for wireframes…), Flash, InDesign etc.. Most of the latter aren’t tailored to UI & UX work at all, and while they can be used to get the job done, the workflow usually comes with dozens of workaraounds and annoyances, not to mention that most of them don’t even allow for any interactivity.

Our Dream Tool

So in the end this leaves the question: What would we actually like to use? Well, first of all it would be great to have a any tool commonly used — just like 3D artists using their Max or Maya, programmers using VisualStudio, producers using Project, designers using Confluence or PowerPoint and of course the aforementioned standards like Photoshop, Illustrator etc.

The most important features are:

• Simple and quick wireframing. All tools besides Photoshop are good in that regard.
• Template/widget structures with global controls (think Illustrator). XD is very good here, Axure needs some careful preparation to avoid template nightmares.
• Interactivity for clickable prototypes. Axure, XD and InVision are the clear leaders here.
• Collaboration features. Axure is a winner, InVision Studio seems to be interesting, more info to be available after its release.
• Easy sharing with colleagues who don’t use the tools. Axure offers the best structure, XD is close up, curious to see what InVision Studio will offer. Balsamiq is perfectly simple if you don’t mind sending files around.
• Everything needs to stay on internal servers. So far Axure offers a solution, InVision might do so.

Now for the elephant in the room: None of the tools mentioned offer a way of controlling the prototypes created via controller or other devices. Obviously this should in no way be a given thing as the main focus is on apps and websites, but nevertheless the games industry is quite large and developers worldwide would greatly benefit from that. There have been attempts to do this with PowerPoint, but actual native support is not available in any of them. Adobe seems to be working on keyboard support, which would at least open up some possibilities, even if a lot of hacking is involved. Actually a simple neighbor/focus system would greatly improve things already.

Our very own Ettore Ink recently wrote a great article about his controller support experiments in Adobe XD (Test your Menu Flow in Minutes with an Xbox or PS4 Controller using Adobe XD), which is a very hacky but functional workaround that illustrates our needs pretty well.

Experiments like that also happen at other studios of course: Emil Widlund from EA posted an article about their usage of framer and how they integrated support for controller input — and even shared his Framer module with the world (Introducing Framer Joystick).

Those pieces quickly got attention in the industry and hopefully open up some opportunities for software developers to maybe give those features a second thought. With all these great tools we have today, one might even think about a custom solution for game developers…who knows, maybe someone is already developing such a tool? One can always dream.

Update 2022:
Since this article has had quite a lot of traffic recently it’s probably worth mentioning that in the years after publication we’ve worked together with Adobe to find a security-compliant way to use Adobe XD’s sharing feature and implement Controller Input, which has been available to every user since. While the process itself took a while to get it working properly it’s now perfectly useable and a great addition to the tool.
Thanks a lot to the team at Adobe for following up on these topics and letting us have a hand in making XD better for game developers!