Designing an app icon for games in Affinity Designer

It's a classic but understandable mistake: leaving your icon, screenshots, keywords, App Store description and localisation to the last minute. Designing your app icon BEFORE you complete your project is the right thing to do.

An update on the development of Woodland Run. Last time I made the initial prototype and now we are ready to attack production.

Check out my piece on Gamasutra about how we used Affinity Designer to beat the clock on The Bear's Black Heart.

I made this pen and paper mockup of the Gift screen. Tee hee!

Giphy

And I also tried some pixel art in Affinity...in a sort of cheating way. I started with a grid but then realised its much easier to fake it. The multiple views in AD allow you to preview stuff in real time, spot on for this kind of work.

Giphy
01-Screen

I made a bunch of characters too, we're going to have at least 10 to start with but I could do 100 easily! They all have the same proportions to allow us to reuse the Spine rig over and over again. The above doodles are actually vector brush sketches, before Affinity I would never try drawing in vector.

Designing the app icon FIRST!

Take it from somebody who has learned the hard way and seen it happen many times in other projects: don't leave the promo stuff to the last minute. I always advise people to work backwards...like if you are launching a product there is no point in making a great website and promo video if you can't perfect the banner ad and ad copy first.

I've adopted a method which Amazon use internally to avoid commissioning flawed projects and ideas. They send out a press release of the product before any resources are committed. If it doesn't float it get shelved. 

So if you can't make your product or idea appealing in a press release don't bother starting. Over the past few years I saw millions, actual millions of euros being spent on a project which never should have happened.

Yes of course you can test reception to a product through a small scale ad spend and through minimum viable product prototyping but the press release blurb is where its at.

I'm getting off the point here (imagine that!) but the other massive and low cost benefit of this is that it keeps the entire team on the same page. This 'elevator pitch' should be updated and shared regularly. But ANYWAY we're talking about icons today.

02-Icons

The promotional benefit of designing your icon at the very start is obvious. You can stick it in your press pack from day one. You can use it as your Twitter and Facebook avatar etc and get it spread around while you get busy creating.

Abban created the "ten page game spec" this week where he describes the entire game in both sales and tech speak:

Game Story

Woodland Forest is on fire! The Beaker Bears need to outrun the inferno without burning their bums and while filling their tums with marshmallows to rescue their friends from the Forest Witch.

I made a few rough designs of the icon. I'll get into the step by step design process of creating the finished icon in Affinity Designer once we nail the idea.

  1. It's good. It shows him being vulnerable and protective of his marshmallows.
  2. Nah...I'm not into this style.
  3. My fav. Maybe add the solid shape of the trees behind and red sky between them
  4. Good icon but it looks odd if you don't know whats going on
  5. Solid. It's cute.
  6. It's solid, represents the gameplay and will reproduce well at tiny sizes but nah. It's not for me.

I'm leaning towards Design 3 because it will transition perfectly to the title screen, like the user presses the icon, it zooms open to tile screen and his eyes will sort of stay in place. The game Crossy Road does that perfectly.

Which one do you prefer? Take this quick one click poll to add your voice.

 Get me on Twitter at @clamnuts

Cheers,

Bob

Like this post? Try our game!

Woodland Run is now available on iOS and Android.

Woodland Run Available on the App Store Woodland Run Available on the Play Store