0

So, I've been working more and more on Android UI's and I've found the Material design documentation/guide to be more focused on dev.

I use Sketch, AI, and Affinity Designer, and Photoshop. Because of all the screen sizes, I've either done this in Sketch or Illustrator.

What, is the best baseline DPI to design at for the most compatibility across all the screen sizes?

I've done 2x in AI & PS and 1x in Sketch due to it's awesome export/output options.

Also, I'm looking at the guide right now and it documents Metrics and Keylines though these aren't always used. I've noticed. For example I pulled several "screen shots" from tablets off dribbble and google images and found quite a variety of control and menu bar heights (for example).

This is what confused me initially with photoshop and now with affinity designer...

Affinity Document Settings

Improve this question
8
  • 1
    in terms of the image, DPI is irrelevant. Pixel dimension is the key. As for Android devices, it's a pretty varied landscape and, frustratingly, come in many different shapes and sizes.
    – DA01
    Commented Jul 20, 2015 at 7:15
  • See thats what I don't get. I understand the screen dimensions, but when the menu bar is supposed to be 56dp tall, 56dp in a 300DPI document is going to be very small, say compared to a 72dpi document.
    – JWhiteUX
    Commented Jul 20, 2015 at 7:17
  • 1
    Ignore DPI. If you have a 340px wide screen you are designing for, make your image 340px wide. If said screens support 2x, then make it 680px wide.
    – DA01
    Commented Jul 20, 2015 at 7:18
  • What I'm constantly struggling with (which is why I like vector design tools over raster) is DP. DP doesn't translate well. At the moment I'm designing 1920x1200 (N7 screen) @320DPI
    – JWhiteUX
    Commented Jul 20, 2015 at 7:19
  • 2
    DP = Density-independent Pixels. You really don't have to worry about what it is--merely what it represents. On a 3x density screen, 1dp = 3 screen pixels. On a 2x screen, 2 screen pixels, etc.
    – DA01
    Commented Jul 20, 2015 at 7:22

1 Answer 1

Reset to default
1

mdpi because it's 1:1 for development.

ldpi    @ 1.00dp    = 0.75px
mdpi    @ 1.00dp    = 1.00px
hdpi    @ 1.00dp    = 1.50px
xhdpi   @ 1.00dp    = 2.00px
Improve this answer
3
  • right, but some apps like photoshop have default DPI settings for Web graphics, like 72DPI. So when designing for MDPI, what should the resolution be? Just leave it alone? In photoshop I've done one of two things. 1) Doubled the DPI to 144dpi or 2) left it at 72dpi and doubled the size of everything. 100x100 = 200x200
    – JWhiteUX
    Commented Jul 20, 2015 at 7:31
  • Just found this 1dp = 1px @ 1x (where 1x on Android is 160dpi) here
    – JWhiteUX
    Commented Jul 20, 2015 at 7:36
  • Well yes, that's what I've been saying. 1px = 1dp = 1mdpi = 1px @1x...
    – KMSTR
    Commented Jul 20, 2015 at 10:31

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.