Non squared pixel interface design workflow

[Teo_]

I have to create icons and interface design for a project for multiple devices. Some of them have a square pixel ratio (1:1) and another device has something like 1:0,93 pixel ratio.

I’m looking for the right approach to export the correct assets without too much manual work.

An approach could be creating icons in an artboard for square pixels, then each icon or interface element could be converted in symbols. The symbols should then be placed in another artboard inside in a rectangular shape. Once done, the shape should be transformed changing the with (actual with/0,93).

This could work but it isn’t too easy to manage with large amount of layouts or editing elements after the transformation.

Do you have a suggestion to get it easier?

[Leigh]

If you have Affinity Photo you could use the Equations filter ( Filters > Distort > Equations... ) to record a Macro changing the width of the image/icon. You could then use this Macro with Batch Processing to iterate through the folder containing your images/icons.

[Teo_]

Thanks for your suggestions. I’ll try it but for this specific work I have to produce svg icons and I don’t think this method could work.

[v_kyr]

Naturally vector formats like SVG vector drawings have no pixel aspect ratio, so it will be here more a matter of scaling/distorting when used let's say on some devices screen in a HTML context etc. So for SVG overall the viewbox setup will play a role here for a correct scaling and preview on different device screens. - You can get some tips and hints how to deal with this from these resources ...

• How to scale SVG
• Cropping and scaling SVG documents