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

All Media Lab

Members
  • Posts

    473
  • Joined

  • Last visited

Posts posted by All Media Lab

  1. I wonder do you  read what people post to help you?

    If your going to print your designs it matters on the web not. So if you print your designs you can use like 300 dpi or more.

    If you print your mock up you stay in that one DPI value for everything on that page say 300DPI! Then when you start a mock up you create a page in Affinity Designer and give it a 300DPI value and from there you go. If you place an image on that page it has to be 300DPI too etc.etc. 

    The same idea but even more advanced grid sits in Bootstrap 4.

    On the web only pixels count. Higher resolution screens just pop more pixels in the same place as low resolution screens.

    So you can have a iMac with 1080px X 1929px and a iMac of 5120px X 2880px and the screens can be the same size.

    This is explained 5 times now. 

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

  2. 8 hours ago, Mark Oehlschlager said:

    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'm sorry with all due respect  but this proves that you have no clue how it works! That's why I gave you de links to the `<picture>` and `<srcset>` examples.

    Someone that's want's to create a design for a website needs the knowledge of image resolution on multiple devices with "Art Direction" (yes "Art Direction" it's an important thing to know when you design a website) I uploaded the images for you that show the "Art Directions" for a image header.

    No matter if it's on a peace of paper you do the design on, the "Art Directions" is the most important part of your design. It implicates using the proper Aspect Ratio's of images, video,  typography and animations for the proper orientations of the multiple devices. That's why it's so important to get your head around those things and study the  `<picture>` and `<srcset>` examples and the basics of responsive webdesign.  You don't have to become a coder, but at least understand how the mock up has to look like including all devices and orientations Desktop, laptop, tablet, phone and small phone.

    Anybody that learns  web design front or backend knows that the order is: "Mobile First" and from there you go with your design. 

    If you do this in the Pinegrow Pro Editor it takes you 2 minutes to set up a responsive Bootstrap 4 website (HTML Prototyping) including header, footer and content parts and it is already full responsive (works on any device and you can see it in a browser on your laptop in any nowadays device phones, tablets, laptops, desktop etc all included in the Pinegrow app). If you create a mock up for all devices and all non identical pages it takes you weeks in Affinity Designer. 

    A Bootstrap 4 example: 

    bootstrap4-breakpoints.png

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

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

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

     

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

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

  8. Hi,

    Made some presets in Affinity Photo for multiple slices export in Windows and renamed the slices with partly "custom path components" and pre made "path components" al works perfect, but when I try to achieve the same on my iMac Catalina latest OS it doesn't work. When I try to type a  "custom path component" word it stops after 1 letter and closes the text field.

    Can someone please confirm this is a bug?

    Regards & Thanks,

    David

  9. Hi,

    I tried everything from the documentation but no luck to change a slice name! Only @2x @3x etc. seem to work but 1200w or any other naming doesn't!

    When I have:

    img-original.jpg

    And I go to the Export Persona for 5 slice sizes. how do I get the slice names changed in:

    img-1200px-wide.jpg

    img-2000px-wide.jpg

    img-4000px-wide.jpg

    img-5000px-wide.jpg

    img-6000px-wide.jpg

    Regards & Thanks,

    David

  10. Hi,

    When I have a image and go to the export persona to export 5 image sizes from that single image, would it be possible to create a custom preset for this containing the 5 sizes? Then I get the warning that the filename is duplicated. Is there anyway to auto number with the image size instead of 1, 2, 3, etc. the outputfiles or how do I have to handle this error warning? I see it auto numbers the images despite the warning anyway. 

    Regards & Thanks,

    David

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