Help choosing the recommended size for web prototyping.

New Here ,
Feb 22, 2022 Feb 22, 2022

Copy link to clipboard

Copied

Hello everyone. I'm going to start developing my first web prototype in Adobe XD. I would like to know in what size of the desktop version do you recommend me to make the design so that later the font size is translated on the web in the same size. I look forward to your help. Thanks.

Views

977

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Community Professional , Feb 22, 2022 Feb 22, 2022

To be honest, I strongly disagree with XD's 1920 default. It's too large for designing for the average desktop. It creates problems later when a client or developer tries to view the prototype, and can't view it at regular size (without scrolling) because they'd need a monitor that's even larger than 1920 to fit their menubar, web browser interface, and the design. 

 

If you look at website monitor stats (like these) you'll see that 1920x1080 makes up only about 22% of people. The majority of th

...

Likes

Translate

Translate
Adobe Employee ,
Feb 22, 2022 Feb 22, 2022

Copy link to clipboard

Copied

Hello,

From Homescreen of XD , you can select any of the Web canvas : Web 1920 is recommended and have responsive ON.

So that canvas and its elements will be responsive to other Web size too.

Please continue with your work, for any further confusion. Keep us posted.

 

Thanks,

Anita Subedi

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 22, 2022 Feb 22, 2022

Copy link to clipboard

Copied

Thank you very much, for your answer I will continue forward. All the best.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Feb 22, 2022 Feb 22, 2022

Copy link to clipboard

Copied

To be honest, I strongly disagree with XD's 1920 default. It's too large for designing for the average desktop. It creates problems later when a client or developer tries to view the prototype, and can't view it at regular size (without scrolling) because they'd need a monitor that's even larger than 1920 to fit their menubar, web browser interface, and the design. 

 

If you look at website monitor stats (like these) you'll see that 1920x1080 makes up only about 22% of people. The majority of the rest have smaller monitors. For designing for a desktop/laptop montitor, I recommend 1440 at the largest, or 1280 at the smallest. I think 1440 is a good size. That's what I design with and typically recommend the people I teach XD to (I teach XD at Noble Desktop in New York City and online).

 

I would love to see Adobe add some smaller desktop sizes (like 1440, 1366, and 1280) and make 1440 the default.

 

If you already started your design, you can change your artboard size to 1440 (and set the Viewport Height to 900, which affects where the scrolling starts).

 

Best wishes on getting started with XD. I hope you enjoy designing with it!


— Adobe Certified Expert & Instructor at Noble Desktop | Web Developer, Designer, InDesign Scriptor

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Feb 23, 2022 Feb 23, 2022

Copy link to clipboard

Copied

LATEST

I agree with what Dan said. Although most new Windows laptops have 1080p screens, the majority still use 1440x900 (mac) and 1366x768 (win).

 

Also, keep in mind that browsers have an interface on top and bottom, which will "eat" anywhere between 100 - 150px from the height. So if you want to keep something above the fold either put a guide that's ~100px from the bottom, or reduce the viewport height by that amount. I usually do 1920x950 or 1366x650 for the smaller screens.

 

When there are a lot of interface elements for web apps, admin panels, etc., you want to design for the worst possible case, which would be the 1366x650 for desktops. If it fits and looks fine there, it will fit on the bigger screen too.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines