Balsamiq

How Game Designers Rapidly Prototype Ideas Using Balsamiq

Rapidly prototyping game ideas (Jay Bennett's design)

We've got a few gamers here at Balsamiq, but nobody who actually designs or builds their own games. Most of us have backgrounds in web or desktop app design and development, which is the core of our customer base. But over time we've discovered the breadth of domains that rely on Mockups for their daily work.

We've already written about how Marketers and Content Writers use Balsamiq to visualize how their content will fit into the apps or sites they write for. In this post, I'll describe how game designers use Balsamiq and other rapid prototyping techniques in their workflow.

Getting to Know the Community

I remember working on our booth at the Interaction 15 conference in San Francisco and being approached by some game developers who were fans of our tool. They said that they tested their game wireframes with exported PDFs and had game controller buttons mapped to specific keys. What they really wanted was native Balsamiq support for navigating through our Full-Screen Presentation mode to cut out several steps in the process.

I found that idea fascinating. That was the first, but not the last, time I learned about game designers and developers using our product.

A few months later we heard from Jay Bennett, who made some awesome videos of his rough video game concepts that were constructed using both Balsamiq and Unity3d. We thought they were so cool we reached out to interview him.

Check out this awesome video Jay made combining Balsamiq wireframes and Unity3d renderings!

Since then we started hearing regularly from other game designers and developers via Twitter. Here are a couple:

@balsamiq Sweet product! Helped me design my game UI within a few hours, avoiding longer cycles of UI modification within game engine, nice!

— Brandon Lamb (@brandonlamb1) October 21, 2016

That moment you realize your app needs that settings page you didn't wireframe...Mockups by @balsamiq to the rescue! #webdev #uxdesign

— Vincent Quarles (@vincequarles) November 8, 2016

Why Balsamiq?

It turns out that video game developers use Balsamiq for pretty much the same reason that other developers use it. Writing code is a lot of work and re-writing code should be avoided when possible. Game developers, like all software developers, often don't know what the idea in their head will "feel like" when it's done, or whether customers will like it.

They've learned that it's wise to create a rough sketch of it before writing the code to make it fully functional. This is the idea behind rapid prototyping and is part of the "lean" process.

Amar Singh, a UX Designer, wrote an excellent essay about the parallels between game and software design, in which he describes how game designers approach rapid prototyping, taken from the book The Art of Game Design: A Book of Lenses by Jess Schell.

The author of the book discusses prototyping in a chapter on Risk Mitigation, which is another way of justifying taking the time to create a wireframe or rough prototype before diving deep into code.

Amar drew a great sketch of the lessons that Jess Schell wrote about here:

Source: "Lessons in Prototyping from Game Design"

These were written in the context of game design, but are equally applicable to any kind of software development.

Another game designer, Luna Cruz, works at Altitude Games. In her talk at Casual Connect Asia, she describes how she uses rapid prototyping to find the fun in games. She explains how she can draw and share quickly a whole game's idea in just a few minutes. “Without touching any art or code,” it's possible to make something playable for everyone to review.

She also talks about how to use Balsamiq in an exercise to keep designers' skills fresh.

Another benefit of wireframing is the ability to quickly get feedback. Game systems designer, Dylan Jones, finds that he gets much better feedback with wireframes that look like a rough sketch. This is why he loves Balsamiq's sketch-style wireframes which help focus the conversation on content and interaction.

We’re Just Getting Started...

Adding wireframing to your game design workflow can be more than just a time saver. It can reduce the amount of effort needed to convey complex ideas and avoid jumping into artwork or code too soon. It can also yield better feedback sooner. And many other benefits unique to game design that we're not even aware of.

We’ll keep exploring and sharing how Balsamiq can help you design and build great games.

In the meantime, if you want to share your story or have a specific question you’d like us to focus on, leave us a comment or reach out to us in any of our channels. We’re thrilled to learn with you.

And, if you're into game design and want to contribute, check out this list of open source game projects on GitHub!

---