Designing assets for app developers

The development of apps is becoming more professional. As a result of this specialists like graphic designers are more often the creators of the look of an app these days. However, it's still very much the realm of the programmer to deconstruct the design - and breath life into it. As a graphic designer, you can either help or hinder the developer in this job. It all depends on the assets you provide. Here is a list of best practices for graphic designers delivering assets to mobile developers. I assume the original designs are made with Photoshop/ Illustrator/ GiMP and that the programmer prefers them as 24bit .PNGs with an alpha channel.

1. Break up your screens into UI elements

It's a good idea to provide mock-up screens  as a reference -  but these are not the files a developer wants to work with. You need to break the design apart into its different UI elements. Any button, frame, indicator, switch, arrow, toggle that you designed needs to be provided  in a separate file. If you leave this task to the developer your design might suffer inferior Photoshop skills and you're wasting his time.

2. USE LAYERS, align them, provide all states

In each element file you need to provide all the states and color variations as separate layers. Take a custom button as an example. It comes in three colors and has two states (normal and pressed). That means you have to provide a button.psd with  six  layers: "black_normal", "black_pressed", "blue_normal" ... you get the idea. Make sure to provide complete sets here. If you leave out layers, you've left the completion of your design to the programmer.  When you have complex set of layers where it is not obvious how they interact, make it simple for people by creating Layer comps in Photoshop. Also, make sure you've aligned the content of the different layers to their correct positions. The programmer should be able to simply save each layer in a separate .PNG without any extra work.

3. Use a sensible naming convention

If you pick a sensible naming convention for your files the programmer can adopt them and carry them on into the code with their original names. This makes it easier for both parties when designs needs to be updated, changed or expanded. Sensible file names from a programmers perspective means:

  • follow a consistent naming pattern. Example: header_button.psd, header_gradient.psd, header_logo.psd or similar.
  • use safe characters: lowercase a-z, 0-9 and _

4. Align to pixels

This really shouldn't need telling, but apparently still does: Align your shapes to pixels. This means, almost without exception, any shape you add to your design must have a top-left and width-height that is in full-pixel values. This can be done easily in Illustrator, and moderately easily in Photoshop ("Snap to pixels" in the Shapes dialog). Coming back to the programmer with miss-aligned half pixels  is literally like flipping him the bird.

5. Summarize your color, font and margin choices

A lot of what the programmer ends up doing is condensing your design into reusable components and variables, hopefully without compromising its look. You can help in this by providing a list of your design guidelines. Ideally this list would contain your choices of:

  • Colors: text colors, button colors, list colors, effect colors
  • Gradients: backgrounds, effects etc.
  • Fonts: list of faces used, list of sizes used, shadow effect settings
  • Margins/Paddings: numbers for guides or grids used

6. Make your graphics scalable

It is no longer realistic to believe you are designing for one resolution or platform. More likely your design will be used for developing apps on both tablets and mobile phones across multiple platforms. Your design needs to be scaleable. You should always use vector shapes, your gradients and effects should be scaleable, you should never use pixmaps, your fonts should be readily available or embedded in the file. Basically, your image should look good rasterized to any size.

7. Tips for the elite designer

If you're already following the above guidelines you're making most  app developer happy. But if you want to go the extra mile, here are some tips to make your programmer even happier:

  • create scripts the programmer can run to render all assets to an arbitrary resolution
  • put your designs into any sort of version control system (git / svn / rcs / perforce)  - we honestly don't care. Anything is better than zip files over mail, dropbox or whatever.
  • pre-render the assets to our current target resolutions - we'd love you for it.

Icons by

Qt Developer Days 2011 in Munich

We're back from Qt Developer Days 2011 in Munich, Germany. What a great show! For those of you who werent' there here is a small recap of what happened from our perspective. First, some pictures [slideshow]

Both Marius and I were presenting in Munich. Marius dissected the code of several of our apps, and explained how QStateMachine makes your life easier. The talk is available here:

<iframe src="" width="427" height="356" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px 1px 0; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe> <div style="margin-bottom:5px"> <strong> <a href="" title="The Anatomy of Real World Apps - Dissecting cross-platform apps written using Qt Quick and C++" target="_blank">The Anatomy of Real World Apps - Dissecting cross-platform apps written using Qt Quick and C++</a> </strong> from <strong><a href="" target="_blank">Marius Bugge Monsen</a></strong> </div>

I talked about Necessitas, Qt and Qt for Android and basically explained how you publish Qt apps on the Android market. That talk is available here:

<iframe src="" width="427" height="356" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px 1px 0; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe> <div style="margin-bottom:5px"> <strong> <a href="" title="Targeting Android with Qt" target="_blank">Targeting Android with Qt</a> </strong> from <strong><a href="" target="_blank">Espen Riskedal</a></strong> </div>

Now we gotta work to catch up on other projects!


AppWorks - app stores,, Angry Birds and HTML5

Espen Riskedal

Yesterday I was presenting (covered here by at, the first conference in Norway focusing on mobile app development. There were two scenes, lots of people, and a lot of good talks. Check out photos from the day here.(Photos: Eirik Helland Urke/Creative Commons)

I was talking about the mobile app market in Scandinavia and Europe, mostly from a business perspective. The most interesting slides are probably the ones about the mobile os web usage in Scandinavia, the size of the different app stores, and also the trends and forecasts on whats going to happen, according to the analysts, concerning app stores and mobile platforms.

[slideshare id=5490641&doc=thescandinavianmobileappmarket-101019101844-phpapp01]

I also attended three of the talks, and all of them were really interesting. Here is a small summary of them.

Small Efforts, big bucks

Sveinung Totland -

Sveinung Totland

Sveinung had a really interesting talk about the different apps that had launched and how they had fared in the market. He was very frank and open about everything and I really enjoyed the talk. Our business idea is basically same as them, make own apps + consult and make apps for others, so it was really good to hear from someone that was already doing this, and succeeding. Here are the numbers:








None - but 60000 emails to spam


17 NOK


854250 NOK


17 NOK


586500 NOK


17 NOK


0 - Enough to pay for the dev cost. Redningsselskapet gained 50% in new member boost

Gyldendals Soppguide

39 NOK


0 - Enough to pay for dev cost


17 NOK


Lost money - Free apps came out and there was no market

How we made the top grossing mobile game

Peter Vesterbacka -

Peter Vesterbacka

Peter from Rovio talked about their insane success with the Angry Birds game. It's been the top selling game for the iPhone for over 5 months, thats more than anyone else - ever. They have sold, at least, 7 million copies of it on the Apple App Store for the iPhone only, more if you add iPad. They launched in December 2009, and since then have had a crazy ride.

One interesting fact is that Angry Birds is not their first game. According to Peter, they've done around 50 other game titles already, so this was not an overnight succuess, but took years of hard work before it really paid of. Angry Birds was "designed to be hit" - with that Peter meant that their designers had sat down and really studied what was needed to make a smash hit game for the iPhone. The character design was a bit by accident, they saw some sketches from one of their artists, and then instantly fell for the angry birds.

Angry Birds is now going to be everywhere: Nintendo DS, Playstation Portable, Windows etc. etc. For their existing ports: iPhone, Maemo, Android and Symbian, they've done them all in house - and they will continue with that for the other coming ports. They are 12 people right now, but have 15 open positions! :D Rovio is aiming for 100 million downloads of Angry Birds - they call it the "Tetris strategy". And they might succeed - when they released the Android version a few days ago, they had 2-3 million downloads in as many days. Wow.

Apps vs HTML5 - what should we choose?

Nikolai Onken -

Nikolai Onken

The last talk I attended was about HTML5 apps. Nikolai had a very enthusiastic talk about HTML5 apps, and how that was not a utopian dream, but actually a reality already. I think his talk clearly showed it is not quite there yet. The fact that for the iPhone, to use bluetooth support in an HTML5 app, you have to jailbrake it and write a platform spesific extension for PhoneGap speaks for itself.

I'll keep an eye on HTML5 apps though, but at the moment - native is still the best way for anything but the most naive apps.