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

  • 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 Jul 20 '15 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. – elCavador Jul 20 '15 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 Jul 20 '15 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 – elCavador Jul 20 '15 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 Jul 20 '15 at 7:22
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
  • 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 – elCavador Jul 20 '15 at 7:31
  • Just found this 1dp = 1px @ 1x (where 1x on Android is 160dpi) here – elCavador Jul 20 '15 at 7:36
  • Well yes, that's what I've been saying. 1px = 1dp = 1mdpi = 1px @1x... – KMSTR Jul 20 '15 at 10:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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