I'm starting a mobile app on Android that displays nearby restaurants and outing places, but I'm so confused! There are lots of devices and sizes; I want the smart phones, no tablets or non-touch. There are 2 densities: 320*480 and 480*800.

Should I design two mockups for those two densities? And what should be my grid dimensions?

  • Hi @elham, welcome to UX! What kind of app are you designing? Could you tell us a little more?
    – Rahul
    Jul 27, 2011 at 12:53
  • it's something like four square, it displays near by restaurants and outing places
    – elham
    Jul 27, 2011 at 13:44

2 Answers 2


Design using density independent pixels (dp or dip) not in physical pixels (px). The conversion of dp units to screen pixels is: px = dp * (dpi / 160)

The Android Developers website has a wealth of information. The page on designing for multiple screens talks about density independence and some best practices on how to best support multiple screens and densities. For 1.5 their widget design guidelines shows how they divide the screen into cells.

[EDIT] Mark Allison's page on supporting multiple screens is worth looking at - as it goes into some of the aspects of achieving graceful resizing, along with some code in part 2. This means you don't have to care about pixels, even density independent pixels, at all in the implementation. Your mockup could perhaps be based on a 'guidance grid only' corresponding to the smallest supported display your app will support (240x320?), but if you use a vector drawing package or paper and pencil using printed wireframe templates (PDF), then again pixels or grid size become irrelevant.

  • should I make my grid 320*480 and relative design?
    – elham
    Jul 27, 2011 at 14:01
  • I just wanna know the width and height of grid
    – elham
    Jul 27, 2011 at 14:02
  • I mean for 480*800 density should I also make the grid width and height 320*480
    – elham
    Jul 27, 2011 at 14:07

You should design for HDPI at 720x1200 at 240dpi in photoshop. Resolution doesn't matter as much using illustrator since everything is scalable, though designing at 720x1200 keeps the development about 1px more accurate to the design. You will then scale down your assets for MDPI and LDPI accordingly. A 16px grid works nicely in these sizes. In photoshop, you can create a new window and zoom it to the size of your phone to keep an eye on what your display size will look like. (window > arrange > new window).


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.