3

Normally you start designs with the smallest devices and scale up … but how to properly scale down?

2 years ago from

Ok here is the problem for a app project we started designing on a iPhone x because the client wanted to be as progressive as possible (…) But for some reasons beyond our control we now moved on straight to production and are still on the iPhone X screens. Developers asked for "scaled down" versions of the main screens for iPhone 5 and I as a designer am wondering what would be the best way? Just scale them down pixel perfect manually? But developers will not change all sizes manually will they? Scale down by percentage? But then it is not pixel perfect …

How would you guys handle this? Developers don't really know what they want …

6 comments

  • Taylor LingTaylor Ling, 2 years ago

    This is why when designing for iOS and Android, it must start with the smallest device size (iOS = 320x568, Anroid 360x640) because the UI will be able to fit well for larger device from a small design (if the design is done with responsive in mind), rather than the other way round.

    I'd say if you want the best result out of this, you should redesign all the screens in iPhone SE size (320x568) again so you (and the dev) will be able to see how each element are responsive to the screen size, and they can code accordingly.

    EDIT: Just to add that a 'direct' scale down will not work because that's not how it works in the mobile development. The text size for example, in the same point size, will appear 'almost' similar in physical size on any iOS devices, regardless of their pixel density. If you just scale down the iPhone X design to iPhone SE, your dev will have a lot smaller pt sizes for everything, and you can expect to see the app become a mess since they are become smaller than the initial design.

    3 points
    • Radley MarxRadley Marx, 2 years ago

      I'll just add:

      It sounds like a lot of work, but once you have the basic elements in place for the SE, you'll find it goes pretty quick when you start to scale up.

      The main catch is you'll find some things scaled for SE will look tiny & awkward on the Xs. Spend some time finding a balance between the two, but prioritize for the Xs since that's the screen you'll be using for marketing.

      Edit: Also check out Apple's UI Guidelines. They should have rules in place for what to scale for the SE vs X.

      0 points
  • Adam WAdam W, 2 years ago

    It's a lot more manually intensive to adjust than simply scaling everything down proportionally, but approach it like you would responsive web design. Adjust your layout to the new, smaller viewport keeping as much of your styling as consistent as possible with the larger screen size. Only modify styles, margins/padding values when totally necessary to accommodate the smaller screen size.

    If you are already this far into production, it might be useful to work out any adjustments in the live environment. Seeing your larger design considerations in a smaller size may also uncover items that you can adjust for globally that become consistent from size to size.

    1 point
  • Miramark DiazMiramark Diaz, 2 years ago

    I usually start with the smallest resolution to design, and then scale it up. The thing here is you guys should know which device resolution is higher on your active users. This will eliminate the back and fourth discussion which resolution to based on designing your product.

    0 points
  • Denis RojcykDenis Rojcyk, 2 years ago

    So physically buttons, the status bar, the navigation bar, basically all the elements are the same size on all iOS devices. If you are designing in vectors (which you should), then it won't be a problem, all you will have to do is to resize the elements so they fit the screen. So a navigation bar isn't wide 375pts but only 320pts, the height stays the same.

    0 points
  • coffeebreak the Noble, 2 years ago

    pfff You're in a tough problem, I'm not sure how I would do it also but I don't see anything other then just scale them down proportionally probably by hand yes.

    Look at the UI similarity between a iPhone5 and iPhone X... just the ppi is different, grid, AI will still be the same probably.

    iPhone 5 vs iPhone X - https://imgur.com/n4LQY81

    I don't know if your developing for iOS only but when I design for my development team I'm use to use golden ratio and percentages for everything to adjust in most of the resolution cases.

    So for your problem I would just ask them if they can try to fix it with code, sit next to them and try with them, you'll all waist less time then you making every screen now in iPhone5, even if it is just resizing... or if you use sketch with the responsive plugins try to do with that, but still tho...

    Now that I'm thinking see if the pixel density can fix that.

    0 points