Highlighted

Question on iOS 375px width

New Here ,
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

34

Likes

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

Question on iOS 375px width

New Here ,
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

35

Likes

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

Have something to add?

Join the conversation