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?
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.Sign up to join this community
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.
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.
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.
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.
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