Jump to content

Non squared pixel interface design workflow

Recommended Posts

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?

Link to comment
Share on other sites

  • Moderators

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.

Link to comment
Share on other sites

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 ...

☛ Affinity Designer 1.10.5 ◆ Affinity Photo 1.10.5 ◆ OSX El Capitan

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...

Important Information

Please note there is currently a delay in replying to some post. See pinned thread in the Questions forum. These are the Terms of Use you will be asked to agree to if you join the forum. | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.