How to design on Google’s Pixel XL?

almost 7 years ago from Martijn Otter, Designer

  • Gabe WillGabe Will, almost 7 years ago

    So would it be correct to say that when working at 1× on the Pixel, the artboard dimensions should be 416 × 738?

    And here I've been designing at 360 × 640…

    1 point
    • Martijn Otter, almost 7 years ago

      Marc is suggesting 412x732. I'm not too sure where you got your numbers from. :)

      360x640 will still be the right size, only the Nexus 5X & 6P and Pixel devices use the 411x731.

      0 points
      • Gabe WillGabe Will, almost 7 years ago

        Using 2.6 as the scale factor for the Pixel (non-XL), here's my math so you don't think I'm crazy:

        • 1080 / 2.6 = 415.38461538461
        • 1920 / 2.6 = 738.46153846153

        Does that make sense?

        1 point
        • Martijn Otter, almost 7 years ago

          Oh yeah, for the regular Pixel. Makes sense, haven't thought about that.

          0 points
        • Marc EdwardsMarc Edwards, almost 7 years ago

          Makes sense to me. :)

          Hopefully I’ll be able to do a test on a Pixel and Pixel XL to confirm the numbers are correct (current numbers are based on screenshots and conversations with other designers).

          1 point
        • Lee Beckwith, over 6 years ago

          Hey yeah I noticed the same thing but https://material.io/devices/ lists both devices as 411/731dp. The math for these devices just never find a source of truth, everywhere I look there is some weird rounding going on. Even if you did what I did and undo their math of how they arrived at 2.6 it doesn't add up. They list the dpi of Pixel at 441. 441/160 = 2.75625, not 2.6.

          0 points
    • Lee Beckwith, over 6 years ago

      Personally I'm still not convinced that using the 2.6x or 3.5x approximate sizes (412 or 416) are better than using a multiple of 360. For one thing the math seems to work out better. I'm guessing this has to do with what happens when the mocks are rendered on a physical Pixel phone screen, or maybe because developers are using 412 or 416 dp's instead of 360 dp's. Still not fully understanding the reason behind this.

      0 points
      • Gabe WillGabe Will, over 6 years ago

        Definitely with you on the math. I much prefer the numbers that multiples of 360 give me.

        However, if you're using something like Skala to preview your mocks, everything would look a little smaller in real life than in your mockups.

        If you're following the Material guidelines, this probably doesn't matter too much; you're going to be spacing things at 8dp, 16dp, 24dp, etc. regardless of how it looks on a test device.

        If you're creating your own layout guidelines, however—and you want to be sure you're seeing what the end user will see—then using the correct scale becomes more important.

        0 points