Skip to main content
Solved

How to choose the right frame size

  • February 25, 2021
  • 5 replies
  • 61289 views
cristinaperal

This is a question from a very beginner. The first thing when starting to wireframe is setting the dimensions of the frame, right?

Imagine you’re designing an app for smartphones. In real life, the app will be displayed at multiple screen sizes (depending on the device). This means, if I design it on an “iPhone X” frame, it will then show some differently as planned when using a “Samsung Z”, for example. How do you choose the right frame size to wireframe?

I’m sure you don’t design it for every device, do you? Maybe is there any “safe frame size” from which you can start to design, which you know from experience that makes it optimal for every device?

I would like to know how you usually go through with this “problem” when starting a project. Looking forward to your answers!

Best answer by Eric

Yes, that’s all fine. This is mostly a beginner practice, eventually you will just know how everything’s going to work and how a page/component will break down, so you can start wherever, but for starters, it is much easier to start with mobile and go up.

So you should have a list of desired features/things you want in/on this site/web app etc… so start from how does this menu/submenu/bar/avatarbar work on mobile etc…

It won’t always be that way. You won’t have to do that forever, just until you know how it works.

View original

5 replies

Eric
  • Eric
  • 20 replies
  • February 25, 2021

For a beginner, you should try to design for mobile first, it’s easier to go bigger than it is to get smaller. (if your applications has smaller and larger screens/is responsive)

However, once you’re experienced, you will just know/understand how it’s going to break down to smaller screens. (once again if it’s a web app or something)

Start with 320px as the min width as the iPhone SE was/is one of the smallest still “in use”. Some people have already done away with that and started at 360px. as per the smallest common androids.

Breakpoints going larger or smaller, should generally follow your design/product and cater to what you want to do, there’s no hard or fast rule, it should break/respond/change once it hit’s desirable points to do so. This may vary if you have per say a card that changes, or maybe it’s a large video viewer on the screen etc… the breakpoints may be totally different. Whatever feels (and/or tests) more naturally.

Vidyesh_Churi
cristinaperal
Ervan_Kurniawan
5 people like this
  • Vidyesh_Churi
    Vidyesh_Churi
  • cristinaperal
    cristinaperal
  • Ervan_Kurniawan
    Ervan_Kurniawan
  • amolinge17
    amolinge17
  • Favour_Mustapha
    Favour_Mustapha
cristinaperal

Exactly, I meant it for a website or app that has to be responsive, for example, for several smartphone models.

So the recommendation would be to always start at the minimum screen size, right? Then it should adapt to larger smartphones following my design (although there might be exceptions with certain elements, as you said).

Thank you Eric!

Then my second question would follow: Imagine you have to design this website for both mobile and desktop, and always responsive. If designing for mobile first, do you then create a separate file por desktop version? In this case, would you also start with the minimum desktop screen size available? Let’s say Mackbook 1152 px.

amolinge17
1 person likes this
  • amolinge17
    amolinge17
Gleb
  • Gleb
  • Power Member
  • 4706 replies
  • February 27, 2021

Found this picture, I’d say this is pretty accurate, however every project is unique and you may want more or less or different breakpoints depending on your target devices screen sizes.
Common breakpoints chart. Mobile: 0-480. Tablets: 481-768. Laptops: 769-1279. Desktop: 1280+.

If you need more info, just google something like “breakpoints web design”, you will find lots of articles on this topic.

cristinaperal
Samsara_Nguyen
Omna_Gupta
9 people like this
  • cristinaperal
    cristinaperal
  • Samsara_Nguyen
    Samsara_Nguyen
  • Omna_Gupta
    Omna_Gupta
  • Soban_Ajmal
    Soban_Ajmal
  • Michael_Yagudaev
    Michael_Yagudaev
  • amolinge17
    amolinge17
  • vltrav
    vltrav
  • Favour_Mustapha
    Favour_Mustapha
  • Nastaran
    Nastaran
Eric
  • Eric
  • 20 replies
  • Answer
  • February 28, 2021

Yes, that’s all fine. This is mostly a beginner practice, eventually you will just know how everything’s going to work and how a page/component will break down, so you can start wherever, but for starters, it is much easier to start with mobile and go up.

So you should have a list of desired features/things you want in/on this site/web app etc… so start from how does this menu/submenu/bar/avatarbar work on mobile etc…

It won’t always be that way. You won’t have to do that forever, just until you know how it works.

cristinaperal
Ervan_Kurniawan
Soban_Ajmal
4 people like this
  • cristinaperal
    cristinaperal
  • Ervan_Kurniawan
    Ervan_Kurniawan
  • Soban_Ajmal
    Soban_Ajmal
  • amolinge17
    amolinge17
cristinaperal

Thank you @Gleb and @Eric for the tips and resources! I think it’s more than enough for me to get started 🙂

A
Favour_Mustapha
2 people like this
  • A
    anjola_olowu
  • Favour_Mustapha
    Favour_Mustapha

Reply


Terms & ConditionsCookie settings

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