Unit 1: Intro to Design
Unit 2: Figma Fundamentals
Unit 3: The Creative Process
Unit 4: Color Theory
Unit 5: Introduction to Illustrator
Unit 6: Typography
Unit 7: Layout
Unit 8: Typesetting
Unit 9: User Interface Design
Unit 10: Design Systems
1 of 2

iOS Design Conventions

In this lesson, we will cover design conventions for the iOS platform. Please keep in mind that design guidelines change every year as Apple updates its platform. If you are working on an iOS app design, it is recommend that you check the latest Human Interface Guidelines published by Apple.

First, let’s take a look at screen sizes.

Screen Sizes

Depending on what device you are designing for, you will be using slightly different screen sizes. In most digital design programs, you can bring up the screen size templates by selecting a corresponding device.

For example, when you create a new document in Figma, you can hit the F key on your keyboard and then choose one of the iPhone presets on the right sidebar.

If you’re designing an app for a general audience, use the overall most popular iPhone screen size: 375x812pt or 375×667 pt, but as they’re the same width, you can use either.

If you’re designing an app for a tech- or design-savvy audience, the most popular iPhone screen size is likely the newer 414×896 pt**.** Again, keep in mind, screen sizes change as devices get updated. It is important to stay up to date. Luckily, most digital design programs will get updated with the latest device templates as they come out so you don’t have to memorize them yourself.

A design that works well on a narrower screen will almost certainly work well on a slightly wider screen, but the reverse is not true.

So it’s always better to design for narrower screens first, then double-check and adjust for larger screens.

Next, let’s explain the use of points vs. pixels in the context of iOS design.

iOS Points vs. Pixels

Pixels are the smallest physical element that we can control on a digital display. The more pixels can be fitted into a specific screen size, the clearer the rendered content becomes.

Points, on the other hand, are a resolution-independent measurement.

When the original iPhone was introduced, both points and pixels were the same (320×480 pixels = 320×480 points), but the situation changed with the release of the first iPhone with a retina screen in 2010.

Depending on the screen pixel density, a point can contain multiple pixels. For example, 1 pt contains 2 x 2 pixels on a retina display. For ultra retina displays, 1 pt may equal 3×3 px. That is what 1x, 2x and 3x means in the export panel on some digital design programs.

This is where it gets complicated. Most design programs are in pixels and not points, but developers code in points.

That’s why embracing resolution-independent design makes it easier for both designers and developers.

Resolution-Independent Design

It’s impractical to create multiple versions of each design to account for different screens since there are too many of them nowadays, designers need to strive for designs that achieve resolution independence.

There are two methods to create resolution-independent designs:

  1. Use a baseline resolution of 1x, where 1 pixel equals 1 point and export at 2x or 3x.
  2. Use vector graphics as much as possible

Designing at 1x makes the math simpler when scaling up. Designing at 3x, for example, can sometimes result in non-integer numbers when scaling down from the higher resolution and creates unnecessary problems for designers.

Next, let’s talk about general page design layout considerations on the iOS.

iPhone Page Layout

While different iOS apps have different layouts, many standard pages will have a layout something similar to this:

https://learnui.design/blog/img/ios/page-layout.png

iOS Status Bar

The status bar appears at the top of every page – except for some full-screen images, videos, or media.

https://learnui.design/blog/img/ios/status-bar-new.png

The status bar contains the time, signal, wifi, and battery indicators, and can be written (text and icons) in either black or white.

The background to the status bar can be any color – or even transparent. To find variations on a color that contrast well against white, use a contrast checker like this one.

https://learnui.design/blog/img/ios/status-bar-transparent.png

If you’re using a status bar on anything except the lightest of images, you’ll probably want to use white text. If your image is very light, your status bar needs to change to the dark color version. Because there are only two options for the status bar – light and dark, sometimes the color contrast won’t be exactly passing contrast checker depending on the color of the background image. The standard is a bit more lenient here because the information there is not critical for users.

To make it easier for users with weak visions, designers can also choose to add a subtle dark gradient overlay at the top for white text to compensate for images that may be between the light and dark extreme.

Or, if you want a minimal status bar over a variety of images, use a background blur.

https://learnui.design/blog/img/ios/status-bar-blur.png

This “frosted glass”-style status bar doesn’t add any additional colors, borders, or needlessly attention-attracting elements to the interface – it only blurs whatever colors are below it, making the text more readable.

Only since iPhone X do iPhones have the “notch” design and rounded corners on the border. Older iPhones (and all iPads) have a shorter, more compact status bar.

https://learnui.design/blog/img/ios/status-bar-old.png

iOS Tab Bar

On iOS apps, primary destinations in the app are listed as tabs across the bottom.

https://learnui.design/blog/img/ios/tab-bar.png

Let’s note a few thing design conventions:

  • The selected icon is denoted with the app theme fill color
  • The labels are 10-11pt text in SF, the default font
  • The background can be ever-so-slightly translucent and have a background blur – the “frosted glass” effect.
  • Add labels for icons. Clear labels will simplify the process of navigation for first-time users. Adding labels is especially important for less known icons.

Untitled

  • The tab bar is always visible within the app, except:
    • When a keyboard is shown
    • When a modal is open (during critical tasks, the user should focus on the task at hand rather than navigate to other parts of the app)

https://learnui.design/blog/img/ios/tab-bar-more.png

There should be 2-5 tabs in total. If you need to display more than 5, the fifth icons should be a “More” catch-all that shows other destinations on a separate screen when tapped.

iOS Buttons

Usually we think of buttons as being colored rectangles with centered text – and iPhone apps certainly use those kinds. But if you’re used to designing for the web, you might be surprised to realize that many buttons on iOS are simply either icons or colored text – in either the nav bar (at the top of the screen) or action bar (at the bottom of the screen).

https://learnui.design/blog/img/ios/buttons-page.png

However, iOS does have on-page buttons as well.

https://learnui.design/blog/img/ios/buttons.png

Because page-wide actions appear on fixed menus, many on-page buttons apply only to a certain part of the page – and therefore will appear on cards.

Minimum Text Size on iPhone Apps

With any design system, it can save you a lot of headache to just define a minimum size. For iPhone apps, that’s the action bar labels, at 10pt.

https://learnui.design/blog/img/ios/text-smallest.png

iOS Tap Target Size

Everything the user should be able to tap on – every button, every slider, every input control – should be at least 44×44 pts in size.

The only exception where it’s really excusable to break this is text links. In paragraph text, each line of text will likely be quite a bit shorter than 44pt. That means that your links will have tap target of less than 44pt size and if there are links in the same position in two consecutive lines of text, it will be pretty difficult for users to tap them accurately. While this can’t always be avoided, it’s worth knowing about this as something to minimize.

https://learnui.design/blog/img/ios/tap-target.png

iOS Dark Mode

iOS has an OS-level “dark mode” setting, where participating apps have (generally) dark backgrounds and light text, instead of light backgrounds and dark text.

https://learnui.design/blog/img/ios/dark-mode.png

While iOS will automatically transition to the dark version if you’re using native controls and colors, you should understand the general principles of dark mode for any custom UI you do.

Here are a few simple guidelines:

  • Text colors are inverted. It’s a bit of an oversimplification, but black text becomes white, dark gray text becomes light gray text, and middle gray text stays basically the same.
  • Background colors are shifted. Unlike text, where darker colors become lighter, the background colors are all just shifted darker. If a background color was lighter in light mode, it’s still lighter in dark mode. Why? Because light comes from the sky. If you understand that, you’ll understand we’re relying on background color for depth cues (unlike text). And so it works in a totally different way.
  • Theme colors are translated to pop against dark. Any accent colors that you were previously using on light backgrounds now need to pop similarly against dark backgrounds. Since white has a brightness of 100% and black has a brightness of 0%, this often means you’ll be lowering the brightness of bright colors.

https://learnui.design/blog/img/ios/dark-mode-colors.png

Have Only One Primary Goal Per Screen

When you’re designing a screen in your app, focus on the primary goal you want the user to accomplish.

If you find yourself trying to add too much information to a single view, add another view.

In iOS, you can see Apple does this quite often on their “create” screens in applications like the built-in Contact app.

Avoid Clipping Content

All recently released iPhones have one thing in common – they feature a display with round corners and notch. Round corners and notch can clip the content. When designing screen layouts, always use a safe area layout guide to push the content to the point where it won’t be clipped. Generally, 16 points are enough to make the proper margin. Also, the system includes predefined layout guides that make it easy to apply standard margins around content, but you can always define custom layout guides.

Scroll to Top