Website mockups in 4k

Question

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.

Answer 1

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.

Answer 2

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.