Lost your Mockups key?
Retrieve Your License
Log In to myBalsamiq
Already have a monthly subscription for our cloud-based web app?
Log In to myBalsamiq
One of the things we do for fun around here is keep an eye out for the Balsamiq wireframes that people share online in order to learn more about how people are using our tool and what they're building with it. We even send out high fives to some of our favorites and customers showing off their first mockups, because it takes some courage to put your work out there for anyone to see.
One of our recent favorites was a surprising and impressive use of myBalsamiq wireframes as an overlay in a multiplayer video game prototype created by Jay Bennett from Vancouver, Canada.
Check it out. It's great how he explains everything he's doing along the way.
This one is pretty cool, too. It shows more live game play.
I contacted Jay because I wanted to tell him how much we all enjoyed his videos and asked him if he'd tell us a little more for this blog. Read on for our interview.
Game development started out as my hobby while pursuing my computer science degree. I liked to practice coding using Unity3d and the C# language.
I love the technical challenges. Testing out a new idea by making a prototype is useful in game development and I have been using Balsamiq to create quick mockups to go along with that.
Honey Badger Games is my project where I have been creating a multiplayer online game. I also create tutorials about game development and post them on my YouTube channel.
I took a UI Design course as part of my computing science degree and had a great professor, Paul Hibbitts, who also worked as a UI/UX consultant in the industry. He stepped us through the standard UI design process and we used MyBalsamiq to turn our requirements and sketches into mockups. I liked it a lot. Later on I was working on a UI for a game and turned back to Balsamiq because it let me create good results in a short period of time.
Let’s say I have a new game with no UI. Now I want to build a new user interface that goes on top of this. My character might be standing in a forest somewhere near the middle of my screen. How can I do it easily?
First I will take a screenshot of the game and create a black and white copy (I found this helps the screenshot to blend well with Balsamiq’s widgets). Then I import this screenshot as an image into my Balsamiq project and lay it out as the background. Working on top of the game screenshot lets me get a good feel for the layout and proportions.
I will usually have some paper and pencil sketches to go off here. I’m ready to lay out the idea with Balsamiq widgets. I’ll play around with the tool for a while and get something that I really like. You don’t have to be picky – just use a rectangle placeholder for parts that aren’t fleshed out yet.
From there I export a PNG of the mockup and add that to my Unity project as a texture file. It is so awesome - being able to use the mockup in the game itself. In that way, Balsamiq is like a gateway between paper-and-pencil mockups and the final game UI. I have used the “paper prototyping” UX technique and this is like “paper prototyping” within the game engine itself. It’s so easy that I can usually lay the interactive widgets directly onto the mockup and then wire them up with real functionality.
The other great part about this approach is how easy it is to create new iterations in Balsamiq and see the result before making any big changes to the application. Everybody knows how painful it is to alter a product in the final stages, and this kind of situation can lead to a bad user experience making it into production. Anything that can help ease that pain is great, in my opinion.
I had a tough time setting a transparent background in myBalsamiq. The reason I needed it was to use the mockups as a UI overlay like I showed in the video for the game's HUD. I gave up trying to find a way in the program and used an improvised “green screen” technique to remove it in Photoshop instead. It kind of works but could be made so much easier with support in the myBalsamiq app.
Visual Studio. I think it is the gold standard development tool if you are on Windows. The Unity3d game engine is also great for indies. I actually don’t use too many web apps besides Pandora and my online banking, so I was surprised to find out how much I liked working with myBalsamiq.
I think we have seen the free-to-play model become mature and accepted in the last few years, especially for mobile games. 10 years ago, giving away a $60 game for free seemed like lunacy. But people made it work and we are now seeing players spend hundreds of dollars inside in-game currency shops instead. Plus, it reduces the barrier to entry and increases the growth of your player base. This is doubly great for indie publishers who don’t need a massive marketing budget to convince someone to download and try a free game.
Two trends on the horizon would be Virtual Reality and multi-platform gaming. With Virtual Reality I think there are a lot of challenges still to go, but the technology like Oculus Rift are here and bringing the development costs down to a reasonable level. But multi-platform gaming is something that I’m really more excited about. What I mean by the term multi-platform are games that involve both your PC and a mobile phone or tablet to play. The UI/UX with ideas like HTML5 and Google Material Design is to have a scalable experience across all devices. I would love to see a game that utilizes this possibility in a unique and interesting way.
I think it comes down to competition against other real humans and the opportunity to come out on top. Winning is truly an addictive thing. By extension of that, I think you need to build a fair and balanced game. If you look at what is happening with Riot Games and League of Legends, they are filling out stadiums full of fans who want to watch these young guys play a multiplayer game against each other competitively. League is a game where you have a simple set of rules but a huge number of possibilities about how it plays out. It's like an electronic combination of chess and sports.
I’m a big fan of League of Legends as well as EA’s FIFA and NHL series for consoles. Recently I’ve been pretty hooked on Boom Beach for my phone. It’s a good one to kill some time on the train to work!
Thank you, Jay. Keep up the good work! You are a Champion!
Are you a Champion who wants to be featured on our Balsamiq Champions blog? Send an email to firstname.lastname@example.org with your stories or blog posts!
Get the Inside Scoop
We'll send you just one email a month and share a ton of information that you'll get before everyone else. More info about the newsletter here.
We'll never share your email address or spam you.
Your email is never published nor shared.