Skip to main content
Question

What size to design a frame for a website

  • October 1, 2023
  • 6 replies
  • 27379 views

Josef_Green

Hello! I am new to web design and I was wondering if I could get any guidance based on what size to design a website template that later would be loaded to the web.

I would like to design one for a mobile device, and one for pc.

Do I need to design two templates? Is there a way to design one size then scale it to size?

Will the website be automatically sized based off the device?

Any guidance would be greatly appreciated!

Thanks,
Josef G

6 replies

Meltem_Ozgen

Hi Josef, you could check these sources (1 , 2) for understanding better variants and modes


Josef_Green

Thanks @Meltem_Ozgen that helped a little bit, I was wondering if I need to design two websites, one for mobile and one for pc, or if the device will automatically scale down based on the screen size.

I also was wondering if I needed to add constraints, and frames to make sure that the scaling would go properly.

Thank you for your time!
Josef G


Fernando_Lins

You will have to make different frames for desktop and mobile (and any other in-between sizes you need) because Figma prototypes are not responsive. Even though you can create a responsive frame (with auto-layout, auto-layout wrap and constraints) and it will help you a lot while designing, it is pretty much ignored for the prototypes at the moment.


Josef_Green

Thank You so much @Fernando_Lins, what is the best size to use for mobile, tablet, and pc?


Fernando_Lins

Usually something like 1366x700 for desktop, 1024x600 for tablet and 400x700 for mobile, but you should do some research on what is most used by your target audience, in your country, etc. There are many websites with that information.


Josef_Green

Great that helps a lot!


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings