Skip to main content
A
Abic77
New Participant
August 18, 2020
Answered

Screen Resolution Higher than design file resolution: How can i define scale to »full screen«?

  • August 18, 2020
  • 2 replies
  • 1869 views

Hey!
i am working on my very first Adobe XD Projekt. I have been doing wordpress sites with templates before so i have a little experience but not too much in building from the scratch.
My project has a resolution in XD of 1440 with 1160 as a main container. I am going to set several breakpoints / resolutions for the smaller screens.

My question is: How can i control what happens on screens with higher resolutions? Is there something like setting some elements to »full screen« scaling? Of course this is possible in css but i am not sure what the best practice in XD is. I am not coding it myself so is it something one would tell the coding team (like »the image here should be 100% width«?

thank you!

Abic

This topic has been closed for replies.
Correct answer Spas K.

Hi Abic, yes, that's correct.

 

You should look at the most common screen resolutions and design for those, or whatever the users of the website / app you think will use most of the time. In your case, since you have a fixed container for the content, whether the user is looking at it on a 1440 width screen, or on 1920, it will look the same. I usually go with 3 resolutions these days - 1920 (desktops), 720 (tablets) and 360 (phones).

 

A front-end developer will look at the different resolutions and figure out how to code the element's behavior. Often times an element will be full-width on the mobile device, but will be a card or a smaller element on a bigger screen. These things require media queries and more complex code, that can't be easily replicated with the way Xd and other design software works.

 

If you're showing the prototype to a client, it would be wise to make one prototype in the resolution they will be viewing it on, so they get the most realistic view on the design. Recently I had this problem that I sent a 1920 width prototype to a client, who viewed it on their laptop that was 1440, so everything looked smaller to them, when in reality it wasn't.

 

 

2 replies

Spas K.
Community Expert
Spas K.Community Expert
Community Expert
August 18, 2020

The prototypes created with Xd are not dynamic. They are more or less static images, with interactions on top, but do not act the same way html/css does in a browser.

 

If you want to design for multiple devices, you need to make separate artboards for each breakpoint/resolution.

There is also no way to switch between devices in a prototype, so I personally make a separate prototype for each device. I first design for mobile, then I copy the artboards to another file and resize everything for tablets, and then for desktop, or whatever you need.

 

There is responsive resize, but it only works within Xd. It's a feature to make it easier resizing and adapting elements for the other screen sizes when you make them. You don't have that dynamic behavior in the actual prototype.

A
Abic77Author
New Participant
August 19, 2020

Hello Spas

 

thank you! So you design an additional artboard with a very high resolution to show how things work on very large displays?

 

thank you

 

 

Spas K.
Community Expert
Spas K.Community ExpertCorrect answer
Community Expert
August 19, 2020

Hi Abic, yes, that's correct.

 

You should look at the most common screen resolutions and design for those, or whatever the users of the website / app you think will use most of the time. In your case, since you have a fixed container for the content, whether the user is looking at it on a 1440 width screen, or on 1920, it will look the same. I usually go with 3 resolutions these days - 1920 (desktops), 720 (tablets) and 360 (phones).

 

A front-end developer will look at the different resolutions and figure out how to code the element's behavior. Often times an element will be full-width on the mobile device, but will be a card or a smaller element on a bigger screen. These things require media queries and more complex code, that can't be easily replicated with the way Xd and other design software works.

 

If you're showing the prototype to a client, it would be wise to make one prototype in the resolution they will be viewing it on, so they get the most realistic view on the design. Recently I had this problem that I sent a 1920 width prototype to a client, who viewed it on their laptop that was 1440, so everything looked smaller to them, when in reality it wasn't.

 

 

    Rishabh_Tiwari
    Community Manager
    Rishabh_TiwariCommunity Manager
    Community Manager
    August 18, 2020

    Hi there,

     

    Thanks for reaching out. Please refer to this article: https://medium.com/thinking-design/protip-exporting-assets-in-adobe-xd-c586996de703

     

    Let us know if this helps or if you need any further assistance.

     

    Regards

    Rishabh

    A
    Abic77Author
    New Participant
    August 18, 2020

    Hey Rishabh,

     

    thank you! ok i learned something but i am still not sure how the best practice for the coder would be. Where does he know from that lets say my header / hero image on the first screen should be scaled to 100% screen width while lets say the headline stays at its design width and height of my artboard?

     

    thanks

     

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices