User Interface Layout Guidelines to design apps for iPhone, iPad and MacOS
What are User Interface layout guidelines?
User Interface Layout Guidelines help you understand the different components and OS experiences that you need to incorporate as part of your designs. This mainly applies when designing apps for mobile, tablet, desktop, and TV, for both iOS and Android. In this article, we will talk about Apple devices.
Why do we need user interface layout guidelines?
For example, when you are designing an app for an iPhone, always use the status bar component in your designs. This is to design realistic user experiences that match the real-world experience that a user will have. When a user downloads your app, they will see it with the status bar because it is an iOS component. So, incorporating the status bar into your designs will help you understand the amount of space you have left for designing your content in the mobile app. If you incorporate OS components and basic layout guidelines into your designs early on, you can avoid a lot of rework and user experience issues post-release.Designing apps for Apple devices
iPhone
The image highlights the different components and its sizes to be kept in mind while designing an app for an iPhone. The screen size used is 375px wide and 812px tall. On top, the status bar has a height of 54px and the navigation bar is 96px, excluding a search bar. On the bottom, the height of the tab bar is 83px and the home indicator is 21px. The home indicator lies on top of the tab bar. Space in the middle is what you can use to design your app. I keep the margins on the left and right side as 16px wide. For the best user experience, the maximum number of tabs used in the tab bar in an iPhone should be 5 or less.
iPad
Designing for an iPad app can get a little tricky because of all the device orientations and navigation methods you need to design for. iPads can be used in portrait or landscape modes. In both portrait and landscape, the app you design can have a sidebar (on the left side) or a tab bar (on the bottom of the screen) for navigation. A sidebar can have a collapsed or expanded view. The default behaviour of the sidebar in portrait mode is collapsed, and in landscape mode, it is expanded.
iPad Sidebar vs. Tab Bar Navigation
The sidebar can display a lot of items, which makes navigating an iPad app more efficient. You can also let people customize a sidebar’s items, provide actions (adding, drag and drop, etc.), and let them collapse or hide the sidebar to make more space for content.
The tab bar displays the different types of information or functionality that your app provides. It also lets people quickly switch between tabs of the app while preserving the current navigation state within each section. However, a tab bar is primarily used to support navigation between high level tabs/sections and not to provide actions.
Read more about the differences between a Sidebar and a Tab Bar in Apple’s documentation guides.
iPad Sidebar Navigation
- Portrait Mode with collapsed and expanded sidebars
The screen size used is 768px wide and 1024px tall. On top, the status bar has a height of 24px with a window grabber of height 24px and the navigation bar is 93px, excluding a search bar. The navigation bar has a sidebar icon that is used to expand or collapse the sidebar. The icon is 31px wide and 22px tall. On the bottom, the height of the home indicator is 19.5px. Space in the middle is what you can use to design your app. I keep the margins on the left and right side as 24px wide. The default behaviour for an iPad with a Sidebar navigation in Portrait mode is a collapsed sidebar.
In portrait mode, expanded sidebar view, the user interface layout guidelines remain the same except for the sidebar. The sidebar, when expanded only in portrait mode, acts as an overlay on top of your contents on the screen. The expanded sidebar is 320px wide and spans the entire height of the screen. Since the sidebar spans from top to bottom of the screen, including the status bar and home indicator areas, any color you give to the sidebar will be the background color for those components as well. Also, the sidebar icon should be placed on top of the expanded sidebar.
2. Landscape Mode with expanded and collapsed sidebars
The screen size used is 1024px wide and 768px tall. On top, the status bar has a height of 24px with a window grabber of height 24px and the navigation bar is 93px, excluding a search bar. On the left, the expanded sidebar is 320px wide and spans the entire height of the screen. It has the sidebar icon on top of it, that is used to expand or collapse the sidebar. The icon is 31px wide and 22px tall. On the bottom, the height of the home indicator is 19.5px. Space in the middle is what you can use to design your app. I keep the margins on the right side as 24px wide. The default behaviour for an iPad with a Sidebar navigation in Landscape mode is an expanded sidebar.
In landscape mode, expanded sidebar view, the user interface layout guidelines remain the same except for the sidebar. The sidebar, when expanded only in landscape mode, acts as a part of the screen and not as an overlay, therefore resizing the contents of the screen. When we collapse the sidebar in landscape mode, the contents of the screen should resize themselves to span the full width.
iPad Tab Bar Navigation
The screen size used is 768px wide and 1024px tall (portrait). On top, the status bar has a height of 24px with a window grabber of height 24px and the navigation bar is 93px, excluding a search bar. On the bottom, the height of the tab bar is 65px and the home indicator is 19.5px. The home indicator lies on top of the tab bar. Space in the middle is what you can use to design your app. I keep the margins on the left and right side as 24px wide. For the best user experience, the maximum number of tabs used in the tab bar in an iPad should be 8 or less.
MacOS
There is only one type of navigation for a Mac app, and that is the sidebar. A sidebar can have a collapsed or expanded view.
The screen size used is 1440px wide and 900px tall. On top, the navigation bar is 52px tall. The navigation bar has a sidebar icon that is used to expand or collapse the sidebar. The icon is 31px wide and 22px tall. On the left, the expanded sidebar is 200px wide and spans the entire height of the screen. Space in the middle is what you can use to design your app. I keep the margins on the left and right side as 20px wide. The default behaviour for a Mac app with a sidebar navigation is an expanded sidebar.
In collapsed sidebar view, the user interface layout guidelines remain the same except for the sidebar. The sidebar, when collapsed, resizes all the contents of the screen. The contents of the screen should resize themselves to span the full width.
Resources Used/Referred for this Article
1. Apple’s Design Resources
The files used in this article are:
- Apple Design Resources - iOS 17 and iPadOS 17 (For iPhone & iPad design components)
- Apple Design Resources - macOS (For MacOS design components)
2. Human Interface Guidelines for Layout and Components
I started out as a self-taught designer. In the initial days of my journey as a designer, I wished there was a simple and quick guide to help me understand the basic user interface layout guidelines for different devices and operating systems. The aim of this article is to help people design Apple apps with a fantastic user experience by being aware of the OS components and guidelines.
