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
I am designing a mobile app (UI/UX Design) for a client that will be developed using React Native. What screen size should I start with? Do I need to design 2 different apps for this?
I have been designing single platform apps up till now and I know how the screen sizes work. So I know what the base screen size for Android (width-360px) and iOS (width-375px).
Devices often share similar screen dimensions, so it would take forever to create a version for every possible device configuration.
The most efficient way would be to create a single, scalable layout (see Material Design, for example) for each device type, e.g. phone, tablet, and desktop. However, you could consider creating versions for each operating system as the guidelines differ a lot and have a far bigger impact on usability.
Always start with the smallest physical screen dimensions you have in your target list. If you can fit the smaller space, you can easily fit the larger.
Consider how each of your screen elements will respond to increasing screen dimensions. At some point, some of them will begin to look awkward. That's where you must consider setting a breakpoint to change some parameters of your design. Keep doing this until you reach the largest screen in your target list.
Most native widgets across the two big mobile operating systems look and feel quite similar. There are some exceptions (notably the selector widget which renders a wheel in iOS and a dropdown in Android). When you use one of those, you may have to consider alternative layouts for the two systems. Otherwise you should be fine with just one.
Avoid pixel-perfect definitions of your layout and typography. There are a number of invisible layout widgets in React Native. Learn and use their terminology in describing your design.
