Recommended Workflow for Webpage Design

[R C-R]

Something else to consider is that (as in some of your screenshots) placed images may not have identical DPI's horizontally & vertically.

[Mark Oehlschlager]

@R C-R

I saw that. I assume that's some kind of anomaly in the way this version of Designer interprets and reports ppi. Strange. I don't understand why that would occur.

[R C-R]

12 minutes ago, Mark Oehlschlager said:

@R C-R

I saw that. I assume that's some kind of anomaly in the way this version of Designer interprets and reports ppi. Strange. I don't understand why that would occur.

It isn't an anomaly. Placed images can by design be scaled differently in the x & y directions. You can do that several ways, like from the popup shown in your screenshots (just make sure the link icon on the right is not enabled) or by dragging a control handle on a selected "(Image)" layer with the Move Tool (which may or may not require using the Shift key depending on how user preferences are set up if dragging on a corner handle), or in the Transform Panel by changing the width or height value (again making sure the link icon is disabled).

Note also that as in many places in the UI you can click on the name of a numeric field (like the W or H in the Transform panel or on the Image DPI or Scale in the dropdown) & drag the pointer left or right to interactively change the numeric value without having to type anything.

[thomaso]

43 minutes ago, Mark Oehlschlager said:

some kind of anomaly in the way this version of Designer interprets and reports ppi.

In case you mean the difference between DPI and scale %, then the 'anomaly' isn't in AfDesigner only and is related to missing decimals in the toolbar panel (different to the preflight panel).

In a recent APub (Beta) topic you see conflicting dpi and % values:

 

Gabe (serif) replied:

• "Percentages across the app are integer numbers, and do not have decimals. So, in this case, you would not be able to see the proportions are slightly out."

https://forum.affinity.serif.com/index.php?/topic/106497-vector-crop-preflight-resource-manager-redraw-quality/

[R C-R]

22 minutes ago, thomaso said:

Gabe (serif) replied:

• "Percentages across the app are integer numbers, and do not have decimals. So, in this case, you would not be able to see the proportions are slightly out."

You can see that the proportions are different in the toolbar dropdown panel, plus there is one other very subtle hint that is easy to overlook: when the scaling is exactly equal in both directions, the toolbar will show just one dpi value & space permitting the scale factor, like this: 

But if  the scaling is not exactly equal in both directions, even if the difference is too small to show due to rounding or fractional pixel differences, the toolbar will show two DPI values, like this: 

I am reasonably sure this was a feature of the older versions of AD & AP, back before the 1.7 versions added the popup. That's when I noticed it. I probably never would have otherwise.

[All Media Lab]

Hi Mark,

When you are UX and UI designing for an IOS application the "points methode" can be a way to do it, but this is a very specific app in devices design methode.

There is a whole chapter in the Affinity Designer workbook about this!

The title of your post and your questions have lead me to the impression that you wanted to make a website mockup?

If so that "points methode" is completely unnecessary and you can use any PPI DPI  (it doesn't make any difference) and use the Bootstrap mockup templates I provided you with.  

Stay in the "web 72 dpi" modes (for you own well being😉 makes no difference anyway) of the Bootstrap mockup template document setup  and start filling in the multiple device templates with content like text and images etc.

And that's all there is to it!!!!

Be aware that common icons that are part of a font set (like font awesome) are all made out of vectors and don't need any responsive images (you can scale them without quality loss). For images you only need one size (and orientation/art direction for all devices in the template)  and the webdesigner takes care of the multiple sizes.

In most cases web design companies use  a service like Cloudinary that can resize and optimize images on the server and on the fly. In one of the seal examples I gave you the link for I used imagekit, It takes care automatically of all image sizing cropping etc. when it is loaded in a device. All I have to do is deliver 1 image in a big size and the art directions to the imagekit server.   

And if they (the web design companies) want you to deliver the images you can do it the way I showed you in the Affinity Photo export examples in my previous posts. 

Regards,

David 

[thomaso]

@Mark, this Workbook chapter (pg 360 – 409) also explains – besides a few thoughts about px/pt and ppi/dpi (here related to Apple hardware) – the feature of automatic scaling & positioning of   app (≈ website) objects. It can be useful when its about to design variants of your design for various page sizes and ratios on various devices or when switching the orientation (portrait, landscape).

In the according panel "constraints" ("Beschränkungen") you may define for every single object how it shall behave, either scale or not and/or move or not, when parameters of the design area will change in size + ratio (orientation).

Since this feature demands for every object many individual settings (up to 4x position/margin + 4x size)  it may appear quite time consuming – but once set it allows to design those variants much easier and faster. So the efficiency in using this feature depends of both the total number of objects and screen variants. At least it's worth a trial.

  https://affinity.help/designer/de.lproj/index.html?page=pages/DesignAids/constraints.html?title=Beschränkungen

Note: the Help isn't as informative as the workbook pages (400-405), which illustrate in 7 examples various settings + behaviors.