23 December 2011 0 Comments
Don’t be a liar! and 4 other tips for iOS graphic designers

As an iOS developer I had the pleasure of teaming up with awesome graphic designers to create iPhone and iPad apps.

I try not waste their time, and make sure they don’t waste mine. So I came up with a list of tips that will keep us productive and happy.

If you’re a designing for iOS, the following tips I shared with them will probably save you hours of work as well.

1. Don’t be a liar!

Nicholas Felton, the infographics guru who was behind the Facebook timeline design, suggests to be honest with your mockups:

“As a designer, you have your baby that you want to try and sell. To make it saleable, you might pick someone who has really nice photos in their profile and use that to make your mockups, but you’re ultimately just lying to yourself and the rest of the group if you think everyone’s page is going to look like that.”

This is the most important tip you must remember. When creating a screen mockup, imagine how it would look like when not all the information you wish to display is available.

Why? Because real life data is mostly incomplete, too short or too long and will mess up your pretty designs. Research how the real life data looks like before(!) you launch photoshop and make designs that flatter the real life data.

Once you stop being a liar we can progress to some specific iOS related tips

2. Sit with an iPhone developer at least once

After designing the first screen of the app, ask me to sit down with you and show you how I turn your static graphics into a living app. Ask me to open up XCode interface builder (the tool for creating iOS user interfaces) and see how your graphics are applied in real time.

Your graphics will have to be turned into buttons, labels, text-area and other controls. It will be a good idea to get familiar with the work needed to be done in order to turn your graphics into a living app.

If you’ll sit with me, I’ll show you that buttons have 3 states (normal, highlighted and selected) each needing a different graphic, that every text on screen must be defined with font/color/decoration/size and many other helpful information.

3. Generalize your art

If your design includes a few buttons with the same style, but different labels (“Done”, “Go”, “Cancel”, etc.) you can just drop the label and deliver one blank button.

As a developer, I prefer using a blank button and attaching the label to it myself. This allows me to create a “Search” button without emailing you and asking for a new “Search” button. Less work for you.

Don’t forget to tell me which font should be used for the label of the button, or I’ll have to use Comic Sans just to piss you off…

Go with this concept further, if you have the same graphics repeating with a small change in each one, you should generalize it. I will add the finishing touch myself.

4. Fonts and placement

I’m an idiot, I need to be told exactly what to do. If I get a graphic design from you with a title on the top, I must know a few things: what font is used? is it bold? what RGB color is this? and some more.

To answer my questions, please add an accompanying text file that looks like this:

The title on the top is Helvetica Bold, 17.0px in size, the RGB color is #FFBBGG and it’s placed 15px from the top and should be centered horizontally.

The name of the song is Helvetica, 12.0px in size, the RGB color is #FFFAAA and it’s placed 5px from the top and 25px from the left.

And so on…

5. Delivering your files

I’m lazy. All I really want to do is take your files and add them to the project. In order to do that, here are my demands:

  • Organize.
    Each screen should have it’s own folder with the screen’s name. Each folder should have a screenshot of the whole screen so I will understand how the final result should look like. The rest of the files in this folder are the elements cut into pieces: buttons, cells, borders, whatever, each separately in its own file.
  • Be consistent.
    All graphic files must be PNGs.
  • Understand iOS graphics.
    Each graphic file must have two versions: an high-res version and a low-res version. The first version will be used for iPhones with retina display (iPhone 4 and later) and the second version for non-retina display devices (older iPhones and iPads).
  • Name Clearly.
    The low-res version should have a good descriptive name such as BigBlueButtonNormalState.PNG and the high-res version should have the same name with a @2x suffix: BigBlueButtonNormalState@2x.PNG - The @2x suffix is read by the iPhone and used if retina display is available.
  • Size correctly.
    The high-res version must be double the size of the low-res version. If the low-res version is 100x150 pixels then the high-res must be 200x300 pixels. Now I know you create the high-res version first and then downscale it, so just make sure your high-res version is even (width has even number of pixels and so does the height).

These demands are tough, but will earn you the “Best designer ever” badge.

Thank You for being awesome!

Designers are always awesome when applying these tips. Be awesome!

← Read More