0

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?

  • What kind of prototypes are you creating and what software are you using to build the UI? – Bryce Howitson Oct 25 '18 at 19:52
3

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.

  • Thanks for the answer. To make myself clear, in Sketch, I set my web art boards to 50 to 70% zoom while designing the details. When I preview them, they appear too large. I understand that zoom is a localised function, for the designer’s convenience. My question, I guess is, how do I train my eyes to see at 100% zoom even when I’m designing at half to three-fourth the zoom level. – Rashmi Oct 27 '18 at 6:18
  • Then design at 100% on your display and export larger OR get an external monitor that more accurately represents mainstream (Air's aren't the resolution of most laptop displays these days) OR preview your work on the target device. – Bryce Howitson Oct 29 '18 at 2:35
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

  • Fair warning: The browser statistics they have collected is based only on their site's traffic. I'd wager that they have a higher percentage of larger screens, as much of their traffic is probably from people working in some way with web development. This seems like a task that would be much more likely to complete on a desktop rather than a mobile device. – maxathousand Oct 25 '18 at 20:40
0
  • 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/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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