Why does our design look so bad on different resolutions? Urgent help needed

  • Replies:2
Patrik Hansen
  • Forum posts: 1

Apr 23, 2016, 10:16:34 AM via Website

Hello

We're having some major issues with our designs looking horrible on different screen resolutions even though we think that we sliced all the assets correctly. We planned to launch a few days ago but because of this issue we couldn't. Some help is very much appreciated!

We have a .psd file in XXXHDPI (width: 1440, height: 2551) with all the design assets that you see in the attached "Original" image. We sliced the design into 4 assets:
- The logo
- The background pattern with the icons in the white area
- The red bottom area
- The game images/cards

We used a DPI calculator to calculate the DPI for each of the 4 assets. Then we used Photoshop to "Save for web" (.png file) to all of these sizes xxxhdpi, xxhdpi, xhdpi, hdpi, mdpi and ldpi. We trippled checked to make sure that the sizes of each asset is correct and to us it seems like they are. We even tried using Photoshop scripts that does the slicing automatically.

Example, the red bottom asset which is full width in the design has the following sizes:
xxxhdpi: 1440 x 930
xxhdpi: 1080 x 698
xhdpi: 720 x 465
hdpi: 540 x 349
mdpi: 360 x 233
ldpi: 270 x 174

You can see the problem in the 3 below links. On 6 inch it looks OK. But on 4 inch and 5 inch the Logo doesn't fit. So the other elements/assets are too big. What caused this? What did we do wrong?

Potential issue:
The designer sent us this design with the following attributes:
Width: 720 px
Height: 1275 px
Resolution: 72 px/inch

I guess a full screen Android design in XXXHDPI should have the width of 1440 px and not 720 px? So what we did was change the image width to 1440 px with the height proportionally changing to 2551 px. Even though I scaled up the entire file the quality of all the assets is still just as good as in the original size which I think is because the designer created the assets in vector in Sketch.

We might have made a misstake here... But still, the design quality is good. It's just the proportions on the different screen resolutions that's wrong even though I think we sliced the asssets correctly and into the right size? imageimageimageimage

— modified on Apr 23, 2016, 10:28:21 AM

Reply
Vladimir S.
  • Forum posts: 266

Apr 23, 2016, 11:12:05 AM via Website

Welcome to AndroidPIT forum!

What type of layout do you use? And how do you align the elements? Please, can you post content of layout's .xml file here, so our users will can help you?

Reply