User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
Design Systems usually contain details about the components, typography, tone, etc. There are some systems that also provide screens/page/views, but the majority I've seen online are optimized for Desktop / Web.
I'm curious what are the preferred dimensions when providing screen example for Mobiles?
If you are using Figma - I would set up the grid as a style by breakpoint ranges. There are just SO many mobile devices these days that it may not be the best idea to have a few representative devices. If you really have to, then based on which country you are designing for - pick the top 3-4 from there to provide as examples, not just iPhone since it is not the most popular device in every country.
althought this is an old thread, you have to know that: It is much better to design native for mobiles. You should keep the feeling of material to Androids and HIG to IOS. Especially for IOS is very important due, if you refuse it there is danger for your app to be rejected by Apple. Finally, have in mind that images for IOS devices with retina screen should be x2 size. Also, there is not any de facto demensions for Android but Iphones have some specific demensions. Maybe it is best for you to design between some safe area. Here you can see some details about Android
For 2019, I would go with iPhone 8's sizes (375x667)WxH, since it's the same for iPhone 6s, iPhone 7 and iPhone 8 (750px × 1334px). Having the same proportions and being in top usage for US makes it a great candidate.
