I just downloaded the free iOS 13 GUI for figma and I tried to see whether their app templates follow a standard grid layout format, and by the way it looks they don't - components are not aligned across the grid in a particular way. So I was wondering if I have to follow a strict layout grid guideline for iOS design or should I just create my own? I know that some people prefer to use a 12-layout or 6-layout grid template but for me it feels kind of weird aligning my design elements around a 12-layout or 6-layout grid template and I would rather use something more customizable to my own design needs. Any clarification would be much appreciated.
-
What does Apple's own Human Interface Guidelines say about grids and their layout?– locationunknownApr 7, 2020 at 5:11
-
Hi @locationunknown thanks for the comment! The only layout related terms Apple Human interface Guidelines talk about is 'Safe Area' and 'Margin', but they don't mention anything about columns, gutter, etc. I included a link here so you can have an idea: developer.apple.com/design/human-interface-guidelines/ios/…– Aly DabbousApr 7, 2020 at 16:17
Add a comment
|
2 Answers
The 12-column grid is a safe choice to use on both iOS and Android projects. I will share with you an article that completely demystified the usage of grids in mobile design:
https://uxdesign.cc/digging-deep-in-layout-grids-in-mobile-app-design-ef07ace5b291
answered Oct 25, 2020 at 18:30
I agree with Mihnea. Also it can be useful to use the iOS design system in Figma first, to craft your initial mockups. There are free iOS Figma templates available here.
-
1Hi Hannah, this should probably have been a comment rather than an answer (but I understand that you don't have the necessary reputation to do that currently).– NashMar 23, 2021 at 7:34