iOS Guide To Create App Sections

Posted By : Shivam Singh Bhati | 11-May-2020



Device Screen sizes

Initially, 2G and 3G iPhones had the same artboard sizes of 320 x 480 and elements could be exported in the same scale. Then the iPhone 4, 4s came out in which the artboard size was still the same but export scaling changed to 2x i.e. you would need to export different screen elements at twice the size. Then major and bigger screen sizes started appearing from iPhone 6, 6+ to the current variant iPhone 11 Pro, 11 Pro Max. Now there are a bunch of different screen sizes and three export scaling sizes 1x, 2x, and 3x. While designing apps for the iPhone, you must consider these points:


I. Use the most common screen size. 

II. Check Google Analytics to see which iPhone your audience uses.

III.  Initially, design the iPhone with less width.


 Page Layout

You can divide the iPhone page standard layout into 5 sections:

  • Status Bar
  • Navigation Bar
  • Content page
  • Action Bar
  • Home Indicator (for iPhone without home button)


Read more: Guidelines for Perfect Mobile Design


Status Bar

Status bar appears at the top and above all apps, except for the full-screen apps. It shows time, signal, wifi and all other notifications associated with different apps. The new status bar has a width of 44pt available in all-new iPhones that don't have a physical home button. The old iPhones with a physical home button had a 20pt width status bar.

Navigation Bar


The navigation bar appears on the app screen. It is usually different for every screen. The navigation bar contains: title, action buttons, and search. There are three main types of navigation bar:


a. One row navigation bar

It is used to display page actions.

b. Two-row navigation bar

It is used for the page title.

C. Three-row navigation bar

It is used for search bar. It usually appears when the user scrolls upwards.


Content Page


The content page has the main information associated with the app. It follows the app design depending on the app you are using.


Action Bar


This section contains all the destination pages. The theme color of the application denotes the selected app icon or has a contrast value higher than other buttons. The font size of icon labels is from 10pt to 11pt. The background color of action bar can be a solid color or translucent which gives a background blur effect.


Home indicator


You can see this newly added section to the iOS family in iPhone X and above without a physical home button. It appears below the app and changes color depending on the color of the app. On a light background, the color of this indicator is dark and vice-versa.


Read more: 6 Simple Tips for Designing Better Dashboard



In this post, I have discussed different screen sizes and export scales for different iPhones. The sections divided in native apps follow similar pattern i.e. Status bar, Navigation bar, Content page, Action Bar, and Home screen indicator (iPhone without physical button).

The above-discussed content can assist you to create great apps that look like a native app.

About Author

Author Image
Shivam Singh Bhati

Shivam is an UX/UI Designer. He is an enthusiastic person, always ready to learn new technologies. He likes to play games, Listen to music, watch movies and anime.

Leave a Comment

Name is required

Comment is required