Designing android apps begginers guide — introduction
More often than not, designer I’m working on an any given project had no previous experience with android. That is way I want to write a series of articles as a beginners guide for designers entering the android realm for the first time.
Before we take off…
…, a disclaimer. I’m not a designer, I don’t even have Photoshop installed. If you think I’m wrong about something that’s probably because I am so don’t hesitate to comment on that.
First of all: What resolution should I create in?
Simple question without a simple answer for android. It’s much easier on iOS: 3 resolutions for phones (and iPod touchs, don’t forget about those), 2 resolutions for iPads, and that’s it. For things to be even simpler, retina screens are exactly double width and height from the non-retina. So designers design, UI guys slice it up and developers code it exactly as it was imagined. This level of uniformity is unimaginable in android world. Phone screen resolutions go from 240x320px (e.g. LG L3, Samsung Galaxy Y) all the way up to 1080x1920px (newest Samsung Galaxy S4 i Sony Xperia Z). In pixel number that is up to 27x more! In between there are at least 15 more screen resolutions. I can’t think of another platform with this kind of diversity. And all that before we even consider tablets from unreasonably small 480x800px (some Acer models) up to new Galaxy Nexus 10 tablet with 1600x2560px.
Well you have to start from somewhere so let’s that be a current android flagship phone, since it’s easier to scale down. Effectively those are Samsung Galaxy S series phones: original S i S II had 480x800px resolution, a current flagship S III have 720x1280px. When S IV takes it place on the throne I guess we’ll be starting with the full hd resolution but until that time comes I suggest to start design for the 720x1280px resolution.
Yeah, but…
After this I usually get a design that looks great on a computer monitor but can not be used on a phone. Text is too small or tap targets are too little. That’s why you should mind couple of things: Check your design on an actual phone size, in this case 4.8 inch diagonal. It may be helpful to know that pixel density for S III phone is 306 dots per inch. Secondly, abide by Google recommendation and make tap targets at least 48x48dp size (not px!) Here it means minimum 96x96px. Why is that, and what exactly is dp (a.k.a. dip), and why is it here in 1:2 ration with pixels is a subject for one of the next posts. Also consider status bar on the top of the screen, and possibly soft buttons on the bottom that use up some of the screen estate. I could tell you exact dimensions for these zones but I wont, because I don’t want to give you false hope that your design can be pixel perfect implemented on every android device out their. It can not, but it can come darn close.
P.S.
Don’t hesitate to ask or comment. A lot more info can be found on developer.android.com
