Designing for different screens sizes

Hello all,

Excuse the nooby question but, Id like to get an insight into how everyone design for different mobile screen sizes within their chosen design tool.
Do you design on multiple sizes at once, ie iPhone 12max, iPhone mini, and then something in the middle?
How else?

Thanks a lot

I wouldn’t design for multiple mobile viewports - just choose one.

Your job isn’t to recreate every possible experience, but to detail key differences in experience - usually between mobile and desktop and tablet if necessary.

It’s unlikely your design will change from a smaller/larger mobile device to a standard size one.

When designing for a responsive website or web app I will look at a few different breakpoints, usually mobile, tablet and desktop.
One thing to consider is where most of your users will sit - which device size will most users be using, this is where you should design first and then either scale up or down from there.
Depending on what your designing will affect how much it changes too - reporting software is tricky on mobile especially if people need large data tables to compare, however a shopping site there are lots of nice mobile patterns available.

Hope this helps

It depends on your market. If you are primarily targeting users that will be using high end devices you want to have an elastic layout that works well with 16:9 - 18:9 for the taller phones that are easier to hold. If you are designing for a broader market (global or next billion users) where users might have less high end phones then you may want to plan for phones where your design would look good on a 4:3 as well.

1 Like