Size Classes and Core Components

So, designing for iOS used to be a lot more simple. There was only one phone.

We now have three different screen sizes for iPhone and three iPad sizes, with different orientations, and split screens, and multitasking screens.

And that might seem like a lot of different screen sizes to consider, but there's a basic framework for designing and building your app that simplifies the process.

This will save you time and your app will look great regardless of what device people are using.

The key things to consider are organizing your screens into size classes, using Dynamic Type, and taking advantage of standard UI elements. And all of these things are meant to make it easier for you to design and build your app.

So, first let's take a look at size classes.

All screen sizes -- all iOS screen dimensions fall under one of two size classes, compact or regular. And an easy way to think about this is that the narrower screen widths are compact size, like an iPhone layout. And a wider screen widths are regular like the width of an iPad. If you stack all of the screens on top of each other, in both portrait and in landscape orientations you can see that size class applies to both width and height.

The goal of creating these two size classes is so that layouts will be flexible and elements will adapt relative to their screen size.

So let me give you a couple examples of what that might potentially mean for your layout.

The iPhone 7 Plus in landscape, falls under regular width, which allows it to use Split Views like all of the iPads. And the two smaller phones in landscape are compact in both width and height. This means they will get shorter landscape bar heights than the standard height that you see in portrait.

Screen widths also define UIKit margins and margin, the margin widths can either be standard or like this iPad generous for wider screens.

But in this example and a lot of other cases, text, if text went edge to edge with the UIKit margins then the lines of text would be too long making it hard for the eye to jump down when you get to the end of a line.

So, we use readability margins to restrict the line lengths on larger devices. These margins are flexible because they can vary with the text size.

And smaller text needs more narrow readability lengths, and larger text can have longer lengths. And if you're using Dynamic Type with readability margins, then people using your app will have a much more comfortable reading experience.

So, let's talk more about Dynamic Type, what it is and how it can help people use your app. Dynamic Type are predefined text styles that can be scaled on a device so that people can see text at a size that is most comfortable for them. And there are a lot of people who find text in their apps to be way too small to read. So, using Dynamic Type will automatically allow text to scale up or down without compromising your layout. And it also makes opting in Accessibility Settings for even larger type, much easier.

It also makes localizing your app seamless. Your text will adjust the lettering, or line height based on the height of the characters. So using these features will only make it easier for more people to use your app.

So, this is our Dynamic Type chart. And this year, we've made some adjustments to our existing text styles by increasing the weight of Title sizes from light to regular. In most cases, we recommend using two to three of these text styles per screen. But with ten different text styles to choose from, there are countless combinations and a lot of flexibility when you're designing your app. The names of the text styles are meant to be descriptive, suggesting where certain styles are most appropriately used. So for instance, Body is intended to be used in places where large bodies of text are needed. And Body is also the default that we use throughout the system.

And from there, we can introduce smaller and larger styles, or in this case bolder, to create hierarchy.

But what if you're using a custom font in your design? So, this year, with our new API we have, we can make custom fonts Dynamic as well, which is great. Keep in mind that you may have to design -- assign different point sizes for each text style because not all fonts have the same proportions. And this is important for keeping your text optically the same size.

Etsy is a good example of an app that uses Dynamic Type. Here it is at its default size, and here it is at a much larger size, and it looks great.

So, last but not least, let's discuss UIKit Elements.

Rather than focusing effort on designing a task or function that people are already familiar with, we want you to be able to focus your time designing what makes your app unique. We have a bunch of standard UI elements that you can use in your app that will automatically adapt on all screen sizes. So, this includes things like TableViews which not only scale nicely with Dynamic Type, it also inherits readability margins and standard interactions, like swipe actions, and edit mode.

And there are a lot of other resources that will help enforce consistency and adapt seamlessly across devices.

It's important to note that all of these components are scaled for iOS 7, which is the size that we recommend you start a new design.

Once you have an iPhone design we have a couple tips for adapting it to iPad.

So, going back for a minute, we now know that regular size classes or iPads can use Split Views and to maintain content hierarchy between iPhone and iPad consider how your app will relay out.

The left side of the Split View can be referred to as the Master View.

And on the right is the Detail View. And the Detail View on an iPhone would be the page you have to drill down further to see.

Remember, an iPad will share both iPad and iPhone specific layouts and iPad layouts should maintain the same level of hierarchy as the iPhone layout including standard navigation, toolbars, and tab bars.

If your app has enabled multitasking, this will create consistency when your app has to coexist with another app. And while in multitasking your app will transition back and forth between the iPhone layout or compact, and back to regular size classes depending on its current screen width.

Okay, so to recap. When designing for iOS, it's important to keep these three things in mind.

Considering size class will make your app look amazing regardless of what device people are using. Using Dynamic Type will make it easy for your text to scale and translate to different languages, and this will enable more people to use your app. And taking advantage of existing UI elements will free you up from redesigning and rebuilding features that people might already be familiar with.

We encourage you to take advantage of these tools, not only to save you time, but so that regardless of what iOS app people are using, your app experience will be seamless. Thank you.