1

I have created a UI concept and high-fidelity wireframes for an Android app. The next phase is to transform the wireframes into graphic assets and deliver them to the app developer. Now, since Android runs on a variety of devices that offer different screen sizes and densities, I am terribly confused by this subject... I've read the Android design guidelines, as well as other websites discussing how to design for multiple screen support, but still, I can't completely wrap my head around it and perhaps I am making it more complex than it really is! Therefore I am looking for a simple, straightforward answer:

What's the best workflow to go about designing for Android using Photoshop/Illustrator? I have read about the different screen pixel densities (mdpi, hdpi, xhdpi, etc) and think I understand the idea of delivering each graphic asset in multiple sizes to support different densities. So according to the 2:3:4:6:8 scaling ratio between the five primary densities, if a certain graphic element's size is 48x48px @ mdpi, it should be 72×72px for hdpi, 96×96px for xhdpi, etc.

But then in practice, I don't know where to start. Say I want to open up a Photoshop or Illustrator file and start designing my app's screens for the base standard (MDPI) and later scale up from there, what should then be the dimensions of the Artboard or canvas? Or, what if I wanted to go the other way around and design my screen at the highest dpi first - XXHDPI and then crop out and scale down my assets to other screen densities (XHDPI, HDPI, MDPI) - what should be the initial dimensions of my PSD file then?

Improve this question
4
  • Also, I have downloaded the Illustrator mobile layout template provided by Google (google.com/design/spec/resources/layout-templates.html), in which the size of each artboard is 360x640px. Where do these dimensions come from? And how are they related if at all to the five primary screen densities?
    – Goren Berdichevsky
    Oct 14, 2014 at 12:19
  • Thanks for your reply. I understand the difference between the pixel and vector domains. However, my app's screen is made up of different graphic elements in different sizes. So, I obviously need to consider the proportions between these elements, the individual size of each element and it's relationship with the rest of the elements on a given screen size. In order words, I need to frame my design and first make sure it works in one resolution before scaling it up or down to other resolutions. So how do I do that?
    – Goren Berdichevsky
    Oct 14, 2014 at 12:41
  • What would be the document/artboard size of that small size?
    – Goren Berdichevsky
    Oct 14, 2014 at 12:59
  • I think we're talking about two different things. You're referring to icon size while I'm referring to the dimensions of the screen in which an icon is placed in. According to the Android guidelines, There are four generalized sizes (small, normal, large, xlarge) And four generalized densities: low (ldpi), medium (mdpi), high (hdpi), extra high (xhdpi).
    – Goren Berdichevsky
    Oct 14, 2014 at 13:17

1 Answer 1

Reset to default
0

First start with collecting information on screen sizes, that can be used by your main audience. Don't worry, it's not all the World. You need to focus on only that country/region you are working to. I assume you will have max 4 different screen sizes for first start. After, when you will start to collect data from app usage, you can extend the range of supported screen sizes, if needed.

Improve this answer

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.