Designer News
Where the design community meets.
↵
Do you design for iPhone 8 or X first?
almost 6 years ago from Alex Hoffman, Product Designer
Alex Hoffman, almost 6 years ago
Awesome, appreciate the response, some really good points you brought up!
Sean R, almost 6 years ago I actually have a related question kind of. If I use a 12px font at 320SE does dev have that font scale up proportionally at 375 and 414? Or do I need to let them know what that font size should be at the different resolutions?
Mikael Staer, almost 6 years ago
Typically the same size.
But I would say actually that it could be a good idea to do so. Not so much for the phones, but once on tablet, there's so much screen real estate, that it makes sense. However, you may run into issues if using default UI components, like navbars and such, since I don't think those have scaling built in. This can add a lot of complexity, so it may not be feasible for your dev team. It all depends on your needs—do you have many tablet users, does it make sense to make such detailed changes for that case?
Sean R, almost 6 years ago Ok I see. I worked on a design mobile app and when I viewed a screen on the 8+ the font looked smaller that's why I asked and they said that's how it is. Thanks for the links
Definitely refer to the OS guidelines too: https://developer.apple.com/ios/human-interface-guidelines/overview/themes/
Agreed. Always start with the smallest first, as it typically presents the most challenges.
If you can get everything into the small form factor,. then it quite easily scales up.
The problem is when you get to "phablet"sizes (and tablet sizes). In some cases, depending on your UI, you may have to reorganize content. Similar to designing a properly responsive website, you may have to scale elements or reformat the layout for it to fill the space in a way that makes sense. For example, a popular pattern is a horizontal/side scrolling card list; depending on the size and number of cards, at bigger screen sizes, there may not be anything to scroll—so how do you account for that. Likewise, how small can those cards get at the smallest screen size before you have too much text wrapping.