I've recently invested in a 4k monitor, which is brilliant and all, especially for image editing, however I'm finding it a bit frustrating trying to mockup websites due to the difference in resolution.

Is there a way to compensate for the difference in DPI? At present a full 1920x1080 document is 1/4 the size of my screen. I also find myself making things larger to compensate, meaning my work comes out looking silly and oversized when viewed on a standard HD monitor.

I know it wouldn't make too much difference at the front end stage if built using % widths and rem etc, but for client mockups it's not really suitable to start the front end build before signing off on the design.

2 Answers 2


A couple things you can do:

  1. Zoom in. Just scale your design up to 200%. The resolution will be lower, but you will see it at actual size.

  2. Design at 4K, export at 1080. Just export all your files at half res, but design so your clients can see it at actual size.

  3. Change the monitor to 1080 at least while you design these projects. Yes, you get less screen real estate, but at least on a mac, you actually get sharper, retnia text and graphics in the UI when your 4K monitor is set to HD, which looks great.

  • Thanks mate, so in suggestion 2, you would design a full width HD desktop at 3840px wide @72 dpi? and then save up with a width of 1920 px ?
    – pezzatron
    Commented Apr 4, 2017 at 21:41
  • Yup. You may have to cheat a few of the assets - enlarge them by 2x - but that's the idea.
    – Jeremy S.
    Commented Apr 4, 2017 at 22:08

If you're on a mac, some programs will give you the option to select 'Launch in Low Resolution Mode' if you right click on the application and select the 'Get Info' tab.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.