Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

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

2 Answers

up vote 2 down vote accepted

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.

share|improve this answer
    
should I make my grid 320*480 and relative design? –  elham Jul 27 '11 at 14:01
    
I just wanna know the width and height of grid –  elham Jul 27 '11 at 14:02
    
I mean for 480*800 density should I also make the grid width and height 320*480 –  elham Jul 27 '11 at 14:07
add comment

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).

share|improve this answer
    
thanks a million –  elham Jul 28 '11 at 8:52
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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