How much zoom to design at

Question

I’m a self-taught, new designer. When I’m designing on MacBook Air, 13 inch I design at 50 to 70% zoom on an average.

When, I see the prototypes on the browser, they appear too large or too small. Is there any best practice for this?

Answer 1

Zoom is local to your application and computer. It has nothing to do with the size something is output. Instead, you need to create your assets at whatever size the final will be.

Additionally, your Mac doesn't have a retina screen. That's Apple's fancy way of saying there are more pixels per square inch than traditional monitors had. This means your screen and the target screen aren't the same density.

Pixel Density

You can see "pixel density" in action if you think about a traditional monitor, say 24" with screen dimensions of 18" wide by 12" tall and a phone with a screen of 6" wide by 3" tall (yes I'm guessing at dimensions). If the desktop monitor and the phone both have HD displays with 1,920 pixels wide and 1,080 pixels tall, the pixels on the phone will be much more condensed.(1920/6 vs 1920/18) This means everything on the phone would look tiny!

Device manufacturers get around this by doubling or even tripling pixel dimensions when they're displayed on the phone to make elements look "normal" size in that format. So 500px on your screen would take up the same space as 1000px does on the phone.

Designing for higher pixel densities

Here you have a couple options. First and easiest is to simply use a vector drawing tool (like Sketch, Figma, XD, or Illustrator) to create your interface. Then when you're done, export assets with a multiplier like 2x bigger. This works with vectors since they're math based and will scale without degrading.

Your other option is to start with a document that's 2x or even 3x the size and realize that 50% or 25% zoom REPRESENTS actual size on your screen but has NO IMPACT on the size the assets are exported.

Answer 2

Set artboards to target screen dimensions (72ppi).

Your artboards in whatever design tool your using should match the dimensions you are designing for. I use W3 Schools to monitor the most common screen resolutions.

https://www.w3schools.com/browsers/browsers_display.asp

It shows 1366*768 is the most common but not the widest. However, I opt to design for 1366*768 and anything wider I just allow content to stop at 1366px.

By using artboards at the appropriate dimensions (not resolution) it wont matter how zoomed in you are when design, the end product will look appropriate. Keep in mind though you should always review your product/designs in the final state your users will see.

Assets

Some devices have higher than 72PPI. Its recommended you export your assets a various resolutions to accommodate for these devices, but for content and layout just use 72PPI.

PPI - Pixel Per Inch

Answer 3

• Design at 1x, always.
• Design in vector, so when you export you can export at 2x, 3x etc.
• If you are designing for responsive, design separately for each screen size group (desktop, tablet, phone vert).
• When designing for desktop, design for medium size, which would be something like 1280px in width.
• If you preview by loading a JPG in a browser, view it as actual size, at 1x.
• If you are using a prototyping tool, such as Adobe XD, disable the scrolling point, so your preview will be at full-screen actual size.
• If you are designing for smartphone, use it's screen size as in dp: 375px width for iphone6. Check this table: https://material.io/tools/devices/