6

Best Sketch workflow for designing on multiple resolutions

5 years ago from , Product Designer

Up to now, most of us worked at @2x and scaled things down when exporting for non retina screens. This obviously isn't the most optimal solution now with the introduction of @3x.

The easiest and most straight forward way to design is at pt value (1x). I know this isn't news to many of you, but going forward with this workflow, we will essentially future proof our design to new resolutions. If there is a @4x introduced next year, all we have to do is add another export scale and call it a day.

The reason why I mentioned Sketch and not Photoshop is because of the live mirroring. As far as I know, Sketch Mirror is the only app that scales up natively to your phone's resolution. So you can design at 1x and try your design on a @2x resolution iPhone. Once the app is updated, it will work with @3x as well. So one comp can be used to test on 3 different resolutions, instead having to duplicate and scale.

This works almost perfectly with android as well. You just need to keep hdpi in mind as it is 1.5x and can result in some half pixels.

4 comments

  • Zlatko Najdenovski, almost 4 years ago

    Excellent explanation. I only didn't get the end. Does it mean that if we design at 1pt for Android it will render differently because of the 1.5x ?

    0 points
  • c kizerc kizer, 5 years ago

    Also remember that Sketch Mirror will need to be updated before it works properly. You are going to be fooled into thinking it's working properly because both of the new iPhone are going to smart scale the app interface. Make sure you check to see that an official update to sketch mirror comes out for iPhone 6

    0 points
  • c kizerc kizer, 5 years ago

    This is the same if @2x in sketch is my "1x". I don't design for 1x anymore. I start at @2x, and will now have to think about 3x obviously.

    0 points
  • Shannon FoxShannon Fox, 5 years ago (edited 5 years ago )

    this is super helpful. thanks for sharing.

    0 points