Tuesday, April 30, 2013

iPhone Design Tips

iphone

Every platform has its own set of best practices and rules, and its own requirements for graphics rendering. Native platforms rely a lot on hardware capabilities to provide the best experience possible. We all know that visuals are a huge part of digital experiences, and getting the right design assets is vital.

Getting you developers and designers on the same page from day one will save you a lot of time and headaches later, down the road. It should actually be one of your top goals at the beginning of every digital project. 

I want to share some design tips that you should keep in mind. You might know these things already, but if not, I hope this can help as a quick reference for any iPhone development you do.

These are the current iPhone device resolutions:

iPhone 5 640 x 1136
iPhone 4/4S Retina 640 x 960
iPhone 3GS 320 x 480

Keep in mind that if you are targeting retina and non-retina devices, you should have two sets of assets, and have the app use both sets accordingly. Otherwise asset display and positioning might not be as you expected it.

Now, the pixel density is another matter. It is important to understand the implications it has, because you want to make sure developers get the right design assets, and you don’t want designers get mad because they need to do their work twice.

It turns out that iOS works internally at 72dpi, which is traditionally what designers use for web development. However, iOS actually doubles the number of pixels for retina devices, meaning that designs targeting retina resolution should be using 144 dpi (2 x 72 dpi).

Having assets created at 144 dpi will ensure that developers can open the PSD files provided by designers and get the correct font size in the app. Additionally, developers will be able to use the assets and get them displaying correctly, without having to fiddle with them in Photoshop.

Creating assets with higher pixel densities might be fine, but overkill. You might want better assets, but consider the performance and size implications in your application.

Here is a nice infographic with more design measurements and tips for iOS development. Also, check this discussion about the matter in Stack Overflow. Finally, make sure to understand what is the real difference between DPI and PPI.

2 comments:

  1. That’s true every platforms having their own rules, supporting different graphics for representation. You were presenting good ideas about the iPhone Development design. But it cannot attract more visitors so you should prepare graphical presentation with description.

    ReplyDelete
    Replies
    1. Thanks for leaving the comment. Being a developer, this was intended as a reference for practical design settings currently used for iPhone development. I'll try to create some graphics to enforce the post, although I'm limited by my basic Photoshop skills. Good advice nonetheless.

      Delete