Blog



21 February 2017

makenines - a visual design process

Hello!

 

For the eager eyed on Force Of Habit's social media feeds, you will have seen that our most recent release is an Android & iOS game called 'makenines' (pronounced 'make nines'!) - an ambient logic-puzzle game where you have to clear grid of numbers by making nines.

 


It looks a bit like this, and is completely free! Try it.
 

Quite a few people are really enjoying it, some are tipping us  (its monetisation approach is 'pay what you want') and some are even commenting on the visual design, comparing it to fantastic titles like Threes! and Dots. With that last point in mind, we thought it may be interesting to show the design process, from start to finish.

 

Mockups

Graphic design doesn't come naturally to me (Ashley) - Toast Time's pixel art is the apex of my ability - and so whenever I prototype something it usually looks a bit like this.

 


The initial mockup. The little lines represented 'stacked' tiles...
 


Trying out pixel fonts...
 

Though I've not always been fond, my 'monochrome style' has been growing on me lately, especially after seeing how well similarly-styled Downwell went down (pun intended), however, for this type of game (i.e. puzzle) I felt the art style needed to be a bit more 'mass-market'. Less pixelated.

 

My first attempt at using vector shapes looked like this, below. It's very green. I'm not great with colours, and knew it needed immediate refinement. It was hard to tell numbers/tiles apart in the previous pixelated version, and this didn't rectify that problem.

 


A bit too green...
 


Trying a light version of the same. A slight change of font too.
 

To solve that, my instinct was to make the numbers closer to 9 a darker shade of green (below). What peeved me about this however is that the text colours had to be tweaked for each shade of green background. It was very fiddly, but I figured this is what designers spend a lot of their time doing... right?

 


Numbers closer to 9 are a darker shade of green.
 

One of the initial meta-game ideas was to have unlockable colour themes - players expect reward mechanics these days, - but the green theme wasn't working for me, so why would a blue theme, or a red theme, etc.

 

This meant I had to pick some colours. At least 8 of them! Picking more than 8 colours that have a discernable difference is a tough job for anyone, so what I did is literally, unimaginitively pick reference from something right in front of me...

 


Can you see it?
 


Eat your greens. Now they're gone. Ta da!
 

Brilliant! Now we have colours, hidden tiles represented, stack tiles represented, blocks represented. Everything. It's a shame their shapes were all wrong. I don't remember exactly why I switched to new shapes here, but let's say it was because squares were more true to their pixelated origins, or because it would be one less variable in the code...

 


Squares!
 

With the new square shaped tiles came very subtle shadows 'under' the tiles. This was so that the entire grid would stand out more from the background pattern, but also so that when grid spaces were empty there was still a visible grid space. (The shadows are tweened out of existence in the actual game, they looked alright for a short while.)

 

Font/text colours were still being tweaked for each tile base colour. (I'm sure there's a way to solve this using palettes in Photoshop, but I couldn't figure it out.) Anyway, I had to make the whole background darker, all the tiles much lighter and also much less saturated to get a consistent text colour that didn't 'appear' any darker or lighter on different backgrounds. Optical illusions ahoy.

 


This illusion. The grey colours are the same!
 


Darker background, lighter tiles! More 'pastelly'.
 

A few other evolutions were tried, such as only colouring the sides of tiles, but none of them were an improvement.

 


Subtle.
 


Using dots instead of numbers. This went in an an optional setting!
 

Icon

The icon design happened towards the end of the mockup process, so it doesn't change much!

 


Version 1
 


Version 2
 


Version 3 (Android)
 


Version 3 (iOS)
 

Conclusion

Well that's pretty much all there was to the visual design process. Game design, puzzle design, interaction design, that's all another matter.

 

I am hoping to write a blog post or do a talk titled 'how to juice a minimalist puzzle game' (or something to that effect) soon. Keep your eyes and ears peeled.

 

I'm going to finish with a few final 'in development' screenshots. If you'd like to know anything else about 'makenines', just say hi over on Twitter or Facebook.

 

See ya!
- Ashley

 

Other Bits


Somewhere inbetween pixel implementation and overhaul of art/fonts/interpolation/assets.
 


Using ascii characters instead of icons for a while. Rotate is @ and slide is ^.
Final icons were done by Clockwork Cuckoo.
 


The PWYW screen was implemented without a design, approx 5 days before release (on 9/9/2+0+1+6)...
Whoops!