Jump to content
You must now use your email address to sign in [click for more info] ×

Recommended Workflow for Webpage Design


Recommended Posts

I'm writing to request recommendations for the best workflow using Affinity apps to design Webpages, and then to export 1x, 2x and 3x raster assets.

It's my understanding that the W3C has established a theoretical, device independent, CSS reference pixel grid that designers can work to with a pixel density that is 96 ppi, where the various mobile and desktop devices that end up displaying the Webpages will apply a relevant Device Pixel Ratio (1x, 2x, or 3x) to scale the Webpage type, layout and imagery up to cover the actual Device Pixels.

If I understand the situation correctly, I should begin my Webpage designs by opening up an Affinity Designer document at 96 ppi (DPI) with artboards that match the pixel dimensions of my target page (e.g., 1042 x 600), and then use the Export Persona to export assets out at 1x, 2x, and 3x. Does that sound right?

And what about some instances of raster art, like a hero image. Should I work in the opposite direction (i.e., from an Affinity Photo document with triple the dimensions and resolution: 288 ppi), and then export downsampled 2x and 1x versions?

What works best for all you Web designers?

Link to comment
Share on other sites

@acapstick

Andy, I remember you authored an article on how to set up Designer to design icons for iOS. Can you shed any light on the technical aspect of my question above? I'm just looking for some simple workflow guidelines for designing Webpage layouts with an understanding of the relationship between my Designer document units, the CSS reference pixel, and the countless instances of mobile and desktop device pixel densities.

Thank you.

Link to comment
Share on other sites

@Sean P

Sean, could you please respond to my technical questions here? I would appreciate if someone from Affinity could help provide a clear set of best practice guidelines for using Affinity apps to design webpages given that we live in a world of 1x, 2x and 3x devices. 

Should we design pages in Designer or Photo with a 96 ppi raster resolution (1x), and then separately set up 288 ppi Photo documents to generate 3x images?

Thank you for your attention.

Link to comment
Share on other sites

6 minutes ago, Mark Oehlschlager said:

Really hoping that someone from Serif can take the time to address my question here. Who on staff should I address my question to?

Sincerely,

Mark O

I am not from Serif or Affinity. But in my experience what you are asking for is a time commitment of several weeks or months. 

 

On 1/29/2020 at 11:51 PM, Mark Oehlschlager said:

... the W3C has established a theoretical, device independent, CSS reference pixel grid ...

That may well be what is stopping people from answering. There is no simple answer to a question containing that sentence.

You seem to have a grasp of how the programs work so dive in, or take a course on website design (you'll quickly be overwhelmed with the differing and contradictory sets of best practices). 

Myself, for pixel based artwork, bigger is better so scale them/it down using the export persona. And you seem to understand the export persona's @1, @2, @3 but did you know you can specify 600H, 1200H and 1800H instead of@?

Mac Pro (Late 2013) Mac OS 12.7.4 
Affinity Designer 2.4.0 | Affinity Photo 2.4.0 | Affinity Publisher 2.4.0 | Beta versions as they appear.

I have never mastered color management, period, so I cannot help with that.

Link to comment
Share on other sites

@Old Bruce

Thanks for you reply.

7 minutes ago, Old Bruce said:

what you are asking for is a time commitment of several weeks or months.

Not really asking for a lengthy commitment to research from anyone. Just asking for best practice recommendations from those who have knowledge of the problem of designing for the Web and mobile devices. Or, if no one on staff can answer definitively, an honest reply saying as much would be fine.

I've just re-read an article by @James Ritson on DPI, and the conclusion I draw from that article is that one really can't assume a standard 1x pixel density (or what James describes as "Logical Pixel" resolution) of 96 PPI. https://affinityspotlight.com/article/understanding-dpi/ 

The best take away advice I can glean from the article is that a designer should layout Webpage design documents with pixel dimensions that correspond to the "Logical Pixel" dimensions of the Webpage for each device, the 1x Device Pixel Ratio working environment (e.g., 1024 wide for a desktop browser, and perhaps 320 wide for a mobile phone in portrait orientation), and either disregard DPI settings altogether, or use 72 DPI as that conveniently corresponds to traditional typographic points in print design. Beyond that, rely upon proportional relationships in composition, and then generate @1x, @2x, and @3x versions of all linked raster images, so that the higher res images can be properly substituted on so-called Retina display devices.

36 minutes ago, Old Bruce said:

did you know you can specify 600H, 1200H and 1800H instead of@?

I'm not aware of this file name nomenclature. Is this meant to be a file name suffix? How is it used?

Link to comment
Share on other sites

I just created the slices for a header in two parts:

3 images for phone portrait mode and 4 as a wider header on other devices, but instead of @2x @3x etc. I use width like 2000w and in code language the w translate like this (this is only a example not the code from the header):

srcset="file-200px.jpg 200w, 
             file-400px.jpg 400w, 
             file-600px.jpg 600w"
     sizes="(min-width: 900px) 700px,
            (min-width: 400px) 80vw,
            100vw"

affinity-export-example-wide.jpg

affinity-export-example-portrait.jpg

Link to comment
Share on other sites

1000w means width of 1000px (pixel ratio stays the same) I show you an example I made with my own developed background foreground image system. When you are in Chrome and do right click "page source" you can see the image links. Be aware that I use a JavaScript plugin to achieve this, but the principles are the same as in the examples you read in the tutorials.

https://www.yourweblab.nl/kit

When you enlarge or make your browser smaller the images change automatically.

Here you even see the image sizes appear on the image I also use webp with jpg fallback:

In Firefox it works even better for responsive testing this site:

https://www.yourweblab.nl/full-screen

Link to comment
Share on other sites

Like I said before DPI/PPI don't work on screen. I have a iMac 5k here 5120px x 2880px this means when I have a image of that same size it fills pixel precisely the screen. But you have also iMacs of 4k  4096px x 2304px  or HD that only needs 1080px x 1920 to fill the screen. The screen size can be even the same size.

Link to comment
Share on other sites

It doesn't matter PPI and DPI only contains some code for the printer and will not reflect on the result I never look at it. Only when something go's out for printing it matters.

I use Sublime Text 3, Pinegrow, Affinity Photo for images, Affinity designer for logo's and print work.

https://www.webdesignerdepot.com/2010/02/the-myth-of-dpi/

Link to comment
Share on other sites

We do HTML prototyping strait in to Bootstrap 4 with HTML SASS CSS JavaScript and PHP. All responsive images are already in the prototype. 

https://medium.com/@andreas.johansson.dev/do-you-find-yourself-designing-the-same-screen-over-and-over-html-prototyping-may-help-f87d45787e11

I also have the Bohemian Sketch app and never tough it, but HTML prototyping saves you a lot of time and you have to translate it to code anyway.

https://www.pinegrow.com  works with Bootstrap 4 (has even a visual editor) and more frameworks and can setup a Bootstrap site in minutes.

 

Link to comment
Share on other sites

@All Media Lab

Okay. Thanks.

It sounds like your firm never works from a page layout prototype produced by a graphic design tool. This is my problem, as I need to be able to pass along page layout designs produced in Affinity Designer to Website development shops.

More and more, I'm getting the impression that for those whose workflow does include working from layout designs produced by graphic design apps, the simple guideline is to produce those page layout prototypes with page dimensions specified in pixels, which will correspond to the CSS pixel dimensions of a 1x device (what James calls "Logical Pixels"). And, as actual physical device pixel density varies dramatically from device to device, the page layout designer should worry less about type and images displaying at exactly the same size on every device, and more about making sure that the proportional size relationships are preserved on every device. 

For example, if I draw a 200 x 200 px box on a webpage mockup in Affinity Designer on my iMac (which has a display pixel density of 110 PPI), then in the subsequently developed responsive webpages, I should expect to see a box of the exact same physical dimension in the Safari browser on my iMac (110 PPI), and a box of similar physical dimensions, if not exact, on my iPhone 8 (a 2x device with a device pixel density of 326 PPI). 

Many thanks for your replies.

Best Regards.

Link to comment
Share on other sites

Don't know what your educational background is, but HTML and CSS knowledge  is the minimum you need to make any sensible webdesign. In Affinity Designer or Photo you will have a hard time making a working mock up . I don't understand what you mean by:

15 hours ago, Mark Oehlschlager said:

This is my problem, as I need to be able to pass along page layout designs produced in Affinity Designer to Website development shops.

If you came to me with a design out of Affinity Designer and said make a website out of this I couldn't. Simply because you will have a useless design. 

In Bohemian  Sketch you can export your stuff to CSS and make working prototypes with links and transitions etc. But it's a lot of work and you have to study that too!

That's the reason I gave you the link to  http://www.pinegrow.com and the tutorial about HTML prototyping. You can't just start designing when you don't understand how it's implemented. (I'm talking about the basics of HTML and CSS not even about Javascript and advanced development of websites). 

Link to comment
Share on other sites

16 minutes ago, All Media Lab said:

Don't know what your educational background is, but HTML and CSS knowledge  is the minimum you need to make any sensible webdesign.

Not true

I have seen many wonderful websites designed with drag and drop type website design software. Where the designer had zero knowledge of HTML and CSS.

 

17 minutes ago, All Media Lab said:

If you came to me with a design out of Affinity Designer and said make a website out of this I couldn't. Simply because you will have a useless design. 

Affinity Designer is more than capable of making mock-ups for websites.  If someone can't take that mock-up and turn it into a website then the problem lies elsewhere not with Affinity Designer

Some of my clients have even drawn their designs on paper napkins (over lunch) and I have created websites for them from them.

To save time I am currently using an automated AI to reply to some posts on this forum. If any of "my" posts are wrong or appear to be total b*ll*cks they are the ones generated by the AI. If correct they were probably mine. I apologise for any mistakes made by my AI - I'm sure it will improve with time.

Link to comment
Share on other sites

48 minutes ago, carl123 said:

I have seen many wonderful websites designed with drag and drop type website design software. Where the designer had zero knowledge of HTML and CSS.

Did you really read my post? And did see the http://www.pinegrow.com  (it's the best visual editor there is with multiple frameworks like Bootstrap4) and I gave him this info 2 times!

48 minutes ago, carl123 said:

Some of my clients have even drawn their designs on paper napkins (over lunch) and I have created websites for them from them.

Well "I do" the design for my clients and I think Affinity Designer is not capable of creating fast mock ups with CSS output, links, hover states and transitions or animations. Sketch that I also pointed out multiple times (and have here my self) is very capable of doing that. But still more work then going straight in to a CSS framework like Bootstrap4.

A mock up is not a peace of toilet paper with a sketch on it!

That said I also made mock ups with Photoshop 10 years ago but developed my skills during the years and do HTML prototyping now. It's 10 times faster then any mock up attempt. Still believe that a basic knowledge of HTML and CSS is needed for any sensible web design (despite the fact that you work with a drag and drop application if something drops wrong you don't know how to solve it!!!!!)  and during the years my theory is proven by the many crappy website designs I encountered.

Link to comment
Share on other sites

23 minutes ago, All Media Lab said:

Still believe that a basic knowledge of HTML and CSS is needed for any sensible web design (despite the fact that you work with a drag and drop application if something drops wrong you don't know how to solve it!!!!!)  and during the years my theory is proven by the many crappy website designs I encountered.

Totally agree.

iMac 27" 2019 Somona 14.3.1, iMac 27" Affinity Designer, Photo & Publisher V1 & V2, Adobe, Inkscape, Vectorstyler, Blender, C4D, Sketchup + more... XP-Pen Artist-22E, - iPad Pro 12.9  
B| (Please refrain from licking the screen while using this forum)

Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions

Link to comment
Share on other sites

I respectfully disagree with the notion that designs cannot or should not originate from pencil sketches and graphic design apps like Designer. HTML and CSS are advanced enough now that any design produced by a graphic designer can be reproduced by code. The notion that webpage designs should be done exclusively by coders unnecessarily discounts the aesthetic expertise of visual designers. The healthier view here is to find the tools and the workflows that link the collaborative contributions of designers and engineers.

Having said that, the original question concerned recommendations for how to set up an Affinity Designer document in terms of pixel dimensions and DPI. The answer appears to be that one should plug in pixel dimensions for the new Designer document/artboard that correspond to the CSS reference pixel dimension of the webpage (what James referred to as "Logical Pixel" dimensions), and not to worry about actual device pixels, as the Device Pixel Ratio communicated by each device will scale the CSS pixel dimensions up such that a 2x device will map one CSS pixel to a 2x2 device pixel cluster. As for the linked raster images in a webpage, one just needs to make @1x, @2x, and @3x size alternates in order for those images to remain sharp on the 2x and 3x (Retina and Super-retina) devices.

Thanks for the replies.

Link to comment
Share on other sites

47 minutes ago, Mark Oehlschlager said:

As for the linked raster images in a webpage, one just needs to make @1x, @2x, and @3x size alternates in order for those images to remain sharp on the 2x and 3x (Retina and Super-retina) devices.

That is not quite right. The @1x,  @2x, & @3x suffixes Affinity can automatically include in exported filenames is there to simplify designing application icons, but that has nothing directly to do with how images (typically raster image format ones like JPEG or PNG) are sized in web page designs.

As others have mentioned, some basic understanding of HTML is required to understand the various ways images can be 'marked up' (tagged) for displaying in web pages. If nothing else, it would be a good idea to read through https://www.w3schools.com/html/html_images.asp, paying particular attention to the info in the Image Size - Width and Height section.

All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7

Link to comment
Share on other sites

@R C-R

Thanks for the link.

Yes, I'm familiar with the rudiments of HTML and CSS. I understand that responsive websites depend upon CSS and JS queries about browser version, OS, Device Pixel Ratio, and browser width in order to associate relevant stylesheets with the HTML page, which can then dictate size and placement of blocks and links to appropriately sized image resources.

I was originally curious about how best to set up a Designer document for producing webpage design mockups with a special consideration for targeting the various devices and their unique device pixel densities. 

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.

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

Loading...
×
×
  • Create New...

Important Information

Terms of Use | 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.