• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Question on iOS 375px width

New Here ,
Jul 12, 2020 Jul 12, 2020

Copy link to clipboard

Copied

Hey all, 

I have a question about designing for iOS devices in prototyping apps/software like Sketch, Adobe XD, etc. When you make a new document and select the size for your projects (or artboards), iOS mobile devices start at 375px in width. My question is how do you treat your designs in an odd number space when using even-numbered elements and spacing while respecting Apple's guidelines and the safe area?

 

Here's an example of what I'm trying to ask.

 

9CEA3027-2F38-412D-87A5-62FA6E170A4C.png

 

Each square is 40px x 40px with a 10px gutter between each square. If you want to touch the left and right safety margins, and group all and scale proportionally, you end up either with the squares or gutter spaces varying in width by 1px. How would you design this row so that it scales up for devices with the squares and gutters all being equal and also the layout working with the margins?

TOPICS
Design , How to , Prototyping

Views

489

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jan 09, 2021 Jan 09, 2021

Copy link to clipboard

Copied

LATEST

About a year ago I thought "Enough of this!" and started designing on 376px wide artboards. I'm designing web apps, so they should be responsive and 1px doesn't make any difference. This probably won't work for iOS app UI design. Also, I've noticed a long time ago that Apple prefers odd sizes and spacings:

monterxz_0-1610194755073.png

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines