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