UI Sizes & Layouts

UI Sizes & Layouts

3D Touch

A key new feature in iOS 9 is called 3D Touch, allowing people to quickly access options inside and outside of your app.
Users can now force-press your App Icon and find frequently used items. Inside an app, mails can be peeked and links can be previewed before entering full-screen.Think of 3D Touch like the keyboard shortcuts on your Mac – they enable people to do repeated tasks quicker. You have to design shortcuts that make power users more productive. But just like Keyboard shortcuts, essential features shouldn’t be exclusive to 3D Touch. Your users must be able to operate your app normally without it.

Points and Pixels

Developers work with point values, so it is important to understand the difference with pixels. When the iPhone was first introduced, the two units were the same: 1pt equals 1px. Then when retina screens came along, 1pt became 2px. So think of points as the values in the original iPhone, and pixels as the real values depending on the pixel density (iPhone 4,5,6 = @2x, iPhone 6 Plus = @3x).

iPhone Resolutions

The iPhone has 4 main resolutions: 320 x 480 pt (iPhone 4), 320 x 568 pt (iPhone 5), 375 x 667 pt (iPhone 6) and414 x 736 pt (iPhone 6 Plus). The layout doesn’t scale but expands based on the resolution. For example, the Navigation Bar only adjusts the width but keeps the same height. Elements inside it remain intact.
The iPhone 6 Plus is the only iPhone that acts more like an iPad in Landscape mode. In other words, a Left Navigation will appear, replacing the need for the Tab Bar.

iPad Resolutions

The iPad has 2 main resolutions: 768 x 1024 pt (iPad),1024 x 1366 pt (iPad Pro).
The iPad has 2 new features: Slide Over and Split View.Slide Over is an overlay that appears on the right of the screen without affecting the current app’s layout.
Split View allows users to multitask by running 2 apps simultaneously next to each other in Portrait mode.

App Icon

The App Icon is used for the branding of your app. It’s the first thing that users see when they experience it. It appears prominently on the Home screen, the App Store, in Spotlight and Settings.

@1x assets are no longer supported for the iPhone, so you don’t need to generate them. App icons have 2 resolutions now: @2x and @3x. There are 3 types: App Icon, Spotlight and Settings. For the iPad, @1x and @2x are used.

Super-Ellipse

Since iOS 7, the rounded corners have shifted from plain rounded corners to a super-ellipse shape. It is important to keep note that you shouldn’t export the icons with the mask, or you’ll potentially find black artifacts. Instead, just export square assets to the App Store.

Icon Grid

Apple applied a golden ratio on some of their icons. This ensures that the icons are the heroes while keeping good proportions. While this is a good rule to follow, it’s not a strict rule. Even Apple omitted it on many of their icons.

Colors

iOS uses vibrant colors to bring out the buttons. These colors tend to work well against a white background as much as a black background. Keep in mind that colors should be used sparsely, for call-to-actions and minimal branding areas like the navigation bar. Roughly, only 10-20% of your design should have colors, or they will compete too much against the content.
iOS often uses neutral colors to serve as the background and menu areas. A well-contrasted black text against a white background is used to make the text comfortable to read. Finally, the pastel blue is applied for making the buttons stand out.

Button and Font Sizes

The general rule is 44pt for buttons and 12pt for small text,17pt for body text and 20pt+ for titles.

Spacing and Alignment

A general rule is to have a minimum padding or margin of8pt. This creates enough breathing room, which makes the layout easier to scan and the text more readable. Also, UI elements should be aligned and texts should have the same baseline position.

Status Bar

It is recommended to include the status bar in as many places as you can. Users rely on it for important information such as signal, time and battery. The text and icons can be white or black, but the background can be customized into any color and merge with the Navigation Bar.

Navigation Bar

The Navigation Bar is used for quick information about the screen. The left portion can be used for placing Back,Profile, Menu buttons whereas the right portion is generally used for action buttons like Add, Edit, Done. Note that if you use any of these system icons, you don’t need to create assets for them.
Just like the Status Bar, the background can be customized to any color and typically has a subtle blur to ensure that the text is always readable. When the Status Bar is present, both backgrounds are merged.

Search Bar

When you have a lot of content, it is always wise to make it searchable.

Toolbar

When you need more real estate to place your action buttons and screen status, you’ll want to use the Toolbar.

Tab Bar

The Tab Bar is the main navigation between multiple screens. if you have few items. Menus that are always visible will increase usage since obvious Always Win. Additionally, it is encouraged to add text next to your icons as most people won’t instantly recognize symbols, especially when they’re not universally known.
When they’re not active, icons will generally have an outline instead of being filled. Like this, they attract less attention.

Table View

The Table View is a very common user interface for listing content. Most apps use a form of Table View. That’s because it can be very basic, or highly customizable down to the smallest elements.
At the basic level, you can use a number of preset Styles and Accessories.
Cells can also be grouped, with a title above and description underneath.

Collection View

When you have both rows and columns in a grid style, you’ll need the Collection View. Although a little more advanced, it can pretty much create any layout you can dream of.
Collection View layouts may look like these, or a combination of them. The possibilities are endless.

Modals

The Alert dialog is used for conveying critical information and prompting quick actions. Alerts should be kept minimal and exiting must be obvious.
The Activity dialog allows you to share content (text, images, links) to iOS features like Airdrop, Favorites, Bookmarks and apps like Mail, Facebook, Twitter. While the look can’t be customized, the options are.
When the information presented isn’t short, you can design a modal that is full-sized, typically appearing from a slide, fade, flip or page animation. Like other modals, it must be easy to cancel and kept as short as possible.

Keyboards

The keyboard is used to input information in text fields such as search, chat or login. It’s highly customizable, for URL, Email, Phone numbers and even Emoji. You can choose between the Light and Dark themes, as well as how the action button is named (return being the default).

Picker

When you have multiple options to choose from, you can use the Picker control. It’s particularly useful for dates, which controls 3 fields in one action.

Segmented Control

While the Tab Bar navigates to the main sections, the Segmented Control is used for sub-sections.

Sliders

Sliders are interactive controls that are less precise, but extremely useful for quick settings like Sound, Brightness and Video Progress.

Progress

The Progress bar is an indicator showing how far an activity has gone. For example, you can use this to show the loading progress of a Web View. Note that the height can be customized.

Switch

Use this to quickly toggle between on and off. Do not use this for anything else than on / off.

Stepper

Slower but more precise than the Slider, the Stepper allows the user to increase or decrease a value by an increment of one. The border and background are customizable.

iOS Icons

These are the native icons that permeate iOS. Since they’re commonly used, they’re instantly recognized by users for their meaning. Using them for other purposes may confuse your users, so it’s important to be aware of how they’re used in iOS.
When you design custom icons outside of these, it is important to use well-known symbols. Additionally, I strongly recommend to always accompany them with a small text of 10pt or more.

Resources

These templates are not only useful for study but also to re-use and customize, so you don't have to start from scratch and open the possibility for errors. As you get more comfortable with them, you’ll be able to get creative.

iOS 9 GUI for iPhone

If you're designing for iOS, you'll want to use pre-made elements such as the status, navigation and tab bars. Get comfortable with all the colors, sizes, fonts and components.

iOS 9 GUI for iPad

The new iPad UI Kit features the iPad Pro device and keyboards in both portrait and landscape modes. Everything is in vector.

Apple Watch GUI

A very complete UI Kit for the Apple Watch with very element including the Apple Watch devices, icons and clocks in vector. You can resize and export them at any resolution.