7

Do you design for iPhone 8 or X first?

over 5 years ago from , Product Designer

I'm designing a universal/adaptive iOS app, it'll work on all modern Apple mobile devices, including iPad. I feel strong about designing for the iPhone and scaling up to the iPad using apples size classes, but I'm not sure if I should start with the iPhone 8 or X first.

Is it better to design for iPhone 8 and then make tweaks for iPhone X, visa versa, or doesn't matter?

Thanks <3

17 comments

  • Duke CavinskiDuke Cavinski, over 5 years ago

    I’m curious, why not start at SE (320) ?

    8 points
    • Alex HoffmanAlex Hoffman, over 5 years ago

      Guess I didn't think of it ¯_(ツ)_/¯

      I assume you're suggesting just always starting with the smallest device?

      0 points
      • Duke CavinskiDuke Cavinski, over 5 years ago

        Was actually curious if you had a reason. But yeah I tend to do the smallest and the largest at the same time.

        1 point
        • Mikael StaerMikael Staer, over 5 years ago

          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.

          2 points
          • Alex HoffmanAlex Hoffman, over 5 years ago

            Awesome, appreciate the response, some really good points you brought up!

            0 points
          • Sean R, over 5 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?

            0 points
            • Mikael StaerMikael Staer, over 5 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?

              0 points
              • Sean R, over 5 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

                0 points
            • Mikael StaerMikael Staer, over 5 years ago

              Definitely refer to the OS guidelines too: https://developer.apple.com/ios/human-interface-guidelines/overview/themes/

              https://material.io/guidelines/

              0 points
  • David HaririDavid Hariri, over 5 years ago

    320 for life

    7 points
  • Harper Lieblich, over 5 years ago

    Each of the four iPhone sizes will make the same layout feel quite different.

    I generally do my initial sketches/wires at the SE size because it tells me the maximum amount of UI I can comfortably accommodate.

    In the visual phase, any time I arrive at a solution that shows promise, I do a quick "sanity check" across multiple screen sizes, rather than flushing out an entire design for one size.

    I often find that when spacing and scale of elements looks good at one screen size it will feel two small or large at other sizes. Sometimes I have to settle on a scale that doesn't look optimal for any one screen size so that it looks acceptable on all screens.

    4 points
  • Ryan Slama, over 5 years ago

    For a unified experience, it doesn't matter as long as you consider rounded corners and the notch. Basically, watch our for tool bars or other fixed objects that wouldn't work on the X

    1 point
  • Daniel PapeDaniel Pape, over 5 years ago

    I design for the most popular device that uses the site/app first, which is currently 375x667, then scale up/down from there for SE, Plus & X

    0 points
  • Julio CastellanoJulio Castellano, over 5 years ago

    I would start by designing for the iPhone 4, 5 and SE width 320px. There is actually still a lot of people using those devices. Once you figure that one out the others are easier. Smallest mobile first then work up to the desktop sizes.

    0 points
    • Account deleted over 5 years ago

      4?? Why do you torture yourself man? 5 is enough...

      I am sure apple already killed 4's batteries already in a irreversible way.

      0 points