## 21 February 2017

## [makenines - a visual design process](/content/blog/makenines-visual-design-process/index.html)

Hello!

For the eager eyed on Force Of Habit's [social](http://twitter.com/forcehabit) [media](http://facebook.com/forcehabit) feeds, you will have seen that our most recent release is an [Android](https://play.google.com/store/apps/details?id=org.forceofhabit.makenines) & [iOS](https://itunes.apple.com/us/app/makenines/id1143920874) game called 'makenines' (pronounced 'make nines'!) - an ambient logic-puzzle game where you have to clear grid of numbers by making nines.

makenines - announcement trailer - YouTube

Tap to unmute

[makenines - announcement trailer](https://www.youtube.com/watch?v=GI3O9DSaMOw) [IMPRESS // Ash Gwinnell](https://www.youtube.com/channel/UCa-dpzd9Zcc8bPAm18CpQDA)

IMPRESS // Ash Gwinnell1.64K subscribers

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

Quite a few people are [really](http://toucharcade.com/2016/09/09/makenines-out-now/) [enjoying](http://appadvice.com/review/makenines) 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!](http://asherv.com/threes/) and [Dots](https://www.dots.co/). 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](http://toasttime.co.uk/)'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](http://downwellgame.com/) 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](http://twitter.com/forcehabit) or [Facebook](http://facebook.com/forcehabit).

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](http://clockworkcuckoo.co.uk/)._

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

_Whoops!_