How to design HTML5 games

Default avatar.
May 03, 2016
How to design HTML5 games.
HTML5 and the term “cross platform” are buzz words, and for good reason. The technology works for smartphones, tablets, laptops and desktops. Agencies love the concept, because any web designer who knows HTML, will understand HTML5. What does it mean for you, the Web Designer?
  • More projects involving HTML5
  • More projects revolving around interactivity
  • Creating experiences for the end user to interact with
At the heart of this interactive experience, are casual games. In this article, I’ll show you how you can get some coveted game design experience. The goal? Have “HTML5 game design” on your résumé.

I play games, but…

It’s a common fallacy among web designers that designing games is a specialized skill. You don’t need to attend game design school, to design games. Anyone can design games. First, let’s break this into parts. Building a game requires 3 major steps:
  1. designing the game;
  2. producing the visual and audio assets;
  3. programming the game.
As a web designer, the easiest way to gain experience, is through designing the game itself. For points 2 and 3, an agency typically already has designated artists and programmers for the job. If you’re good at artwork, 2 is highly attainable. For the purposes of this article, let’s discuss step 1. Where do we even begin? Here are 10 steps that every game designer needs to go through, to earn their stripes.

1) Play lots of casual games

Have an iPhone or Android phone? Go to the App Store, head to the top free games chart. Download and play every single game in the top 20 list. Do this at least once every 2 weeks. While you’re playing, be conscious of how each game is designed. Which animation techniques and mechanics is it using? Did the characters stand out to you? Did it have a storyline? What did the game make you feel? After 20–30 games, you’ll start to spot patterns. image2 You’ll notice that some games, at the core are really about the same thing. Eg: Clash of Clans, Boom Beach and Hay Day are about building, defending and attacking. You’ll notice that simple games, such as Flappy Bird or Swing Copters focus on really hard challenges, which can be repeated an infinite number of times. You’ll notice that some games focus on compelling storytelling with carefully designed characters. You’ll also notice a few odd indie games, that’re just downright random but really fun!

2) Make sketches... lots of ‘em

Make sketches of the things you like from the games you played. Sketch characters, maps, menus and user interfaces. Was there a certain character which you liked? Was there a certain angle of the game that made you excited? Here’s a character called ‘Matt’. He’s a bored office guy, glued to his chair: image3

3) Make flow diagrams

Flow diagrams describe the step-by-step process of the game. They describe the point where the user starts the game, all the way to important events, such as a victory or loss. Start with simple diagrams like this: image4 As you gain more confidence, iterate on your simple flow to make more complex flows.

4) Write a game design document

Using what you learned from Steps 1–3, design and write a simplified game design document (GDD). A GDD basically tells the reader what the game is about. Quick example: Let’s take our character called “Matt” in Step 2, and let’s say he’s trapped in a boring office job. He wants to escape. The catch is, he can only do it from his rolling chair. We’ve produced a neat sketch of the game screen. It shows a maze of office desks conspiring to block Matt’s escape. image5 As an example, we made the goal of the game simple. Navigate the office maze to escape it. image6 That’s it, for a very basic GDD. Here’s the complete flow diagram, for our game, Escape The Office. image7

5) Train your cross-platform mindset

With HTML5 games, a lot of it boils down to being able to run the game on different screen sizes, efficiently. Here’s a rundown of different devices we have in the market: iPhone, iPad, iPod Touch, Samsung Galaxy Note3, Samsung Galaxy Tablet, Google Nexus, LG, Xiaomi, Windows Phone, Windows Laptop, Mac, the list goes on and on… Ridiculous? Yet, this is what large companies do. As an independent designer, how do you design a game, that fits different screen sizes?
  1. Fix the game orientation. Design your game such that, it works either in portrait mode, or landscape mode only.
  2. Find the most common game resolution that works for most devices. Maintain the aspect ratio. Then, scale up or down, depending on the device resolution. We find aspect ratios of 3:4 (portrait), or 4:3 (landscape) most popular, and efficient.
  3. Design lightweight, casual games. Don’t go for the bulky, 3D MMO game. Instead, go for fun, light casual experiences. The game could be as simple as whacking moles, or jumping around platforms. Anything under the sky is fair game (no pun intended).
  4. Always draw high resolution artwork. At least 2048px wide as a baseline. It’s easier to scale down than it is to scale up.

6) Start pitching

Ask your company (or clients) if they’re interested in any game-related projects. Show them your designs. Pitch your heart out. Walk them through the GDD. Your first game idea pitch won’t be like Shark Tank, rest assured! Chances are, they’ll allocate a small budget for the game. If there’s no budget, continue making better designs, and reaching out to other companies. If you have the resources, fund your own game projects on the cheap.

7) Find a programmer

Once you have a budget, start looking for programmers that specialize in game development. Show them your designs, share the budget, and tell them the vision. Most game developers are very helpful. What you need is a programmer that’s well versed in HTML5 games. This person has to know how to code something that scales nicely for all kinds of form factors. Discuss the “cross platform mindset” with the programmer.

8) Grind

The development of the game itself will take weeks, if not months, initially. There will be blood sweat and tears, but it’ll all be worth the experience. It’s very important to keep the scope of your game design very, very small, at least for your first project.

9) Finish the project

The key word here is “finish” the project. Oftentimes, as designers, we want a perfect game. Zero bugs. Beautifully designed game art, with ideal rules. Throw that mindset out the window. Go for “good enough”. Release the game into the wild. Nothing says it like a game that’s live, in the hands of users. You can always polish up the game post-launch. Done is better than perfect.

10) Measure feedback

Check user responses to your game. Use free tools such as Google Analytics to track your game’s views, plays and events. image8 If you’re designing games to gain social media attention, analyze the Facebook likes, the Tweets and the Instagram Likes. Study how the users reacted to your game.

Ben Chong

Ben Chong is the CEO and Founder of MarketJS, a cross platform game developer and distributor. Our goal is to help brands and businesses succeed via games.

Read Next

30 Most Exciting New Tools for Designers, 2023

As we near the end of 2023, we wanted to take a look back over all the tools we collected over the past year, to pick…

3 Essential Design Trends, December 2023

While we love the holidays, too much of a seasonal theme can get overwhelming. Thankfully, these design trends strike a…

10 Easy Ways to Make Money as a Web Designer

When you’re a web designer, the logical way to make money is designing websites; you can apply for a job at an agency,…

The 10 Most Hated Fonts of All Time

Remember when Comic Sans wasn’t the butt of the jokes? Long for the days when we actually enjoyed using the Impact…

15 Best New Fonts, November 2023

2023 is almost over, and the new fonts are still coming thick and fast. This month, we’ve found some awesome variable…

Old School Web Techniques Best Forgotten

When the web first entered the public consciousness back in the 90s, it was primarily text-based with minimal design…

20 Best New Websites, November 2023

As the nights draw in for the Northern hemisphere, what better way to brighten your day than by soaking up some design…

30 Amazing Chrome Extensions for Designers and Developers

Searching for a tool to make cross-platform design a breeze? Desperate for an extension that helps you figure out the…

Exciting New Tools for Designers, November 2023

We’ve got a mix of handy image helpers, useful design assets, and clever productivity tools, amongst other treats. Some…

The Dangers of Doomscrolling for Designers and How to Break Free

As a creative professional, navigating the digital realm is second nature to you. It’s normal to follow an endless…

From Image Adjustments to AI: Photoshop Through the Years

Remember when Merriam-Webster added Photoshop to the dictionary back in 2008? Want to learn how AI is changing design…

3 Essential Design Trends, November 2023

In the season of giving thanks, we often think of comfort and tradition. These are common themes with each of our three…