Design for iPad - iOS Design Handbook

iPadOS

iPadOS gives users the best of both worlds by consolidating the key Experiences from iOS and macOS. iPadOS is born from iOS to push and utilize the larger screens of the iPad for a better experience while offering distinct experiences. This opens a whole new way to interact with apps, unlike before.

iPadOS

Bigger Content

Often times, apps on the iPhone have smaller images to fit the smaller screens. That doesn’t always translate well on the iPad. Instead, try to have bigger images, and allow more images per row if content isn’t jeopardized. For example, on the App Store, the size of the cards change when in Landscape mode, Portrait mode and on the iPhone. In addition, there are 2 cards per row on the iPad versus 1 card per row on the iPhone.

Use Obvious Icons

Containing the Text

On the iPhone, the text takes the full width of the screen while on the iPad, it’s wrapped in a container to ensure that the character count per line isn’t over 90 characters.

Notice that in the App Store app, the texts are well-contained and never get too long per line. Even on the iPad Pro, the container doesn’t exceed 800 pt.

Center your modals

On the iPhone, modals are generally constrained against the borders. That is normal practice. On the iPad, you should avoid that because it would make your modal unnecessarily big. If your modal is smaller than the screen size, try to center it both horizontally and vertically, while having a fixed size.

Move your Content

One of the hardest things to do is to redesign your layout for the bigger screen. If your app feels strange with a lot of negative space, try to fill it with modules of your content. For example, on the Music app, the cover image and description are moved to the left side of the layout. Try to group your content together to make this transition easier.

Sidebar

A sidebar provides app-level navigation for a list of collections based on the content of your app. Having a sidebar makes navigating within the app more convenient for the users. This also offers more customization to the users, meaning they can pick the necessary shortcuts.

If your app has multiple levels of navigation and contents it is suggested to have a sidebar. If your app has not more than 5 section of content make sure of the Tab bar.

Pointers

Pointers are a new addition to the iPadOS, offering dynamic pointer effects and behaviors when users interact using a mouse. Ensure that you provide a consistent experience, whether users are interacting by touch or a mouse.

Set padding around interactive elements; this ensures a precise hit region. Make sure not to make the hit region too small or too big as users feel that it takes a lot of effort to interact with the element.

Drag and Drop

The ability to drag and drop texts and images across apps. This feature is especially useful for the iPad because of its large screen that can be split in two. What this means for designers is that you must ensure that your content is draggable. In other words, don’t use texts embedded in images or elements that are impossible to drag.

iPad Resolution

The iPad has 3 resolutions: 768 x 1024 pt (iPad), 834 x 1112 pt (iPad Pro 10.5”) and 1024 x 1366 pt (iPad Pro 12.9”). The iPad Pro 12.9-inch’s portrait width is the equivalent of the iPad’s landscape width, at 1024 pt. Hardware-wise, the iPad is looking like a professional desktop computer. The only thing that needs catching up is the software.

Unfortunately, apps as comprehensive as Sketch or Xcode don’t exist yet on the iPad. But for people who uses less complex tools like photo editing, video editing and other productivity apps, the iPad is already a compelling replacement for the desktop computers. As such, you must design with these limitations in mind, but also knowing that there is a growing demand for professional apps.

Multi-tasking

Multi-tasking lets users quickly switch from one app to another or simultaneously use two apps at once in Slide Over, Split View, or Picture in Picture mode. Because the iPad allows multi-tasking, having a beautiful adaptive user-interface is essential. Like this, the UI adapts to the different view types.

Slide Over

Slide Over is an overlay that appears on the right of the screen without affecting the current app’s layout. It can be triggered by dragging an app from the “dock” in iOS 11. The floating app has a size of 375 pt on the iPad Pro 12.9-inch, and 320 pt on all other iPads.

Split View

Split View allows users to multitask by running 2 apps simultaneously next to each other. There are 16 widths that your app must adapt to. Due to the sheer amount of resolutions, using Auto Layout and Size Classes is the only sensible way to go forward.

Split apps can take 1/3, 2/3 or 1/2 of the screen’s width in Landscape. In Portrait, it can take 1/3 or 2/3. Just like Slide Over, the app taking 1/3 will have a width of 375 pt on the iPad Pro 12.9-inch, and 320 pt on all other iPads.

iPad Size Classes

Size Classes allow you to categorize screen widths and heights, and set layout conditions based on those combinations. They’re even more essential on the iPad, just because of the sheer amount of screen resolutions to deal with thanks to the new Multi-tasking feature.

There are 3 types of Size Classes for both width and height: Compact, Regular and Any. By combining these, you will affect several devices at once. At full-screen, it’s generally just Regular x Regular.

Do and Don’t

These are the best practices for the iPad. To summarize, your layout should be adaptive and take full advantage of the larger screen. Images and medias should generally be bigger and texts should be comfortable to read.

Resources

The resources for the iPad is more scarce than for the iPhone. It is true that the iPhone is a bigger market for designers, but at the same time, one must not discard the value of having Pro users using your app. For tools, video, reading and other Pro apps, this is a great opportunity to expand your app to an audience that is willing to pay for quality.

An excellent page for reading more about adaptive layouts, from the human interface guidelines for iOS. Alongside check about the guide on Pointer Interactions in iPadOS.

Learn with videos and source files. Available to Pro subscribers only.

Purchase includes access to 50+ courses, 320+ premium tutorials, 300+ hours of videos, source files and certificates.

BACK TO

iOS Icons

Download source files

Download the videos and assets to refer and learn offline without interuption.

Design template

Source code for all sections

Video files, ePub and subtitles

Assets

Video

ePub

Subtitles

Intro to iOS 14 Design

A complete guide to designing for iOS 14 with videos, examples and design files