We are professionally involved in designing iPhone apps

Multitasking and Adaptivity

Today it is crucial to make the layout of every website and application adaptive due to a huge number of various display sizes and resolutions. Therefore, you have to design your products, keeping in mind many different screen sizes and ensure flexibility of every element, which can be achieved with the help of Xcode and other tools. There is a certain way in which the user interface adjusts itself from smaller screens like iPhone’s to bigger displays like iPad Pro’s. Instead of scaling up, the layout expands. In the case of bigger screens like iPhone 6 Plus in landscape mode or iPad, the tab bar is replaced by a left navigation.

3D Touch

3D Touch is a major new feature introduced in the iOS 9 platform, enabling users to easily access options both in and out of the application. Users of the devices running iOS 9 can use a Force Touch on the app’s icon to view frequently used items. For example, you can peek into messages or preview links without opening the app full screen. 3D Touch functionality is similar to keyboard shortcuts on desktop computers - they allow users to perform repeated actions faster and easier. 3D Touch shortcuts are an excellent way to design ways to increasing the productivity and enhancing the experience of the iOS’s power users. However, you should ensure that 3d Touch features are additions but not substitutes to the traditional interactions. The users should be able to comfortably work within the app both with the 3D Touch and without it.

Pixels vs Points

Many people still believe that point values equate to pixels, which is not entirely true. The two units were equal back when the first iPhone was released in 2007: 1pt was equal to 1px. However, with the appearance of retina displays, 1pt became equal to 2px. Therefore, it is better to think of pixels as the real values based on the density (@2x - iPhone 4, 5 and 6 and @3x -iPhone 6 Plus), while points as the values for the first generation of iPhones. Quick respond to evolving requirements throughout the development and increased adaptability of the project to the changing business goals; A lightweight framework for developers - more productive time to build software;

San Francisco Fonts

Since the release of OS X El Capitan and iOS 9, San Francisco has been the default font made by Apple Inc for its products. The introduction of the new fonts has affected the design for the iOS operating system. The tracking value and text/display settings are adjusted automatically in accordance with the font size. This ensures the readability of the typeface. If the font is 20 pt or more, use San Francisco UI Display, in other cases choose SF UI Text. Although, you can only apply these tracking values in Photoshop, there is a formula of how they can be converted into Sketch: font size * tracking / 1000. There are different plugins for Sketch that can help you quickly calculate the proper character spacing values.

Smartphone Resolutions

There are four main resolutions of iPhones: 320 x 480 pt for iPhone 4, 320 x 568 pt for iPhone 5, 375 x 667 pt for iPhone 6 and 7, and 414 x 736 pt for iPhone 6 Plus and 7 Plus. On the basis of the screen resolution, the layout expands rather than scales. iPhone 6 Plus and iPhone 7Plus are the only devices in the iPhone line that act similar to iPads when in landscape mode. As we have already mentioned, the tab bar is replaced by the left navigation menu on these smartphones.

Tablet Resolutions

There are two main resolutions of iPads: 768 x 1024 pt for iPad and 1024 x 1366 pt for iPad Pro.The two new features has been introduced to iPad with the release of the iOS 9: Split View and Slide-over:

Slide-over is a small panel that appears on the right side of the screen when you slide the screen to the left when inside the app;
Split View is a multitask feature that allows users to run two applications simultaneously in a portrait mode

App Icon

App icon is essential when it comes to your application’s branding. The icon is the first thing that users see when they have their first experience with it. The icon is how your app is presented in App Store, on the home screen of the user’s device, in Spotlight and Settings. The app icon in the iOS 9 has its specific template. THere is no need to generate @1x assets, as they are no longer supported for the Apple’s smartphones. So today the two main resolutions are @2x and @3x.

Each icon has its three version - a basic version, and version of Spotlight and Settings. @1x and @2x are the two resolutions used on iPads

Shape and Grid

Starting from iOS 7, Apple has been using superellipse-shaped icons instead of the simple icons with rounded corners that had been used before. Nevertheless, keep in mind that you should not submit to App Store the icons with the mask if you do not want to find black artifacts. Simple square assets will do perfectly well. When designing iPhone apps and some of the icons, Apple used a golden ratio. This means that the icons keep perfect proportions. You can follow the Apple’s example, but it is not obligatory. Even Apple’s designers often depart from this rule on many icons.

iOS 9 Colours

iOS prefers bright colours when it comes to the buttons. Vibrant colours stand out against a plain white or black background. However, do not overboard - it is better to stick to soothing colours of promotional materials and non-branding elements like menus or navigation bars. It is best to keep approximately 10-20% of the overall design colourful, otherwise it will distract the user's attention from the content. In iOS, backgrounds and menus are typically of neutral colours. Black letters against a white background is a classical solution that makes the text comfortable to read. Additionally, iOS uses the pastel blue to highlight the buttons.

Font, Button Size and Alignment

The general rule for buttons is 44pt, for small text - 12pt, for body text - 17 pt and for titles - 20pt+. As for alignment and spacing, a basic rule is to design a margin or padding of 8pt minimally. As a result, there is more space, which makes it easier to scan the layout and read the text. Remember that the texts should be at the same base line position, and user interface should be aligned.

Status and Navigation Bars

Apples recommends to place status bars in as many places as possible. It helps smartphone and tablet owners track useful information including time, battery and signal. While icons and text can be either white or black, you can choose any colour of the background and merge it with the navigation bar. This bar displays quick info on the screen. You can put Profile, Menu or Back buttons on the left and Edit, Done or Add buttons on the right. And do not forget that you do not need to design specific assets for these systems icons. You can customise the navigation bar’s background colour, which is alway slightly blurry, making the text more readable, just like it is in the case with the status bar. The backgrounds of the two elements will be merged as a result.

Search, Tool and Tab Bars

Tab bar is used to navigate between screens. Avoid Hamburger buttons if you have few items on the menu. Making all the elements visible will provide a better user experience, because simple is always better. Also, supply the icons with text, because it may be hard for the users to recognise the meaning of the symbols, especially if you create them from scratch. Another advice is to make the icons outlined instead of filled when they are not active. This will attract less attention to the elements that are not active at the moment.

Search bar is useful for applications with much content.
Toolbar is used when there is a lack of space for action buttons and statuses.

Designing iPhone Apps with Professional Developers

If you do not have enough expertise in the mobile technologies to build your iPhone application on your own, you can count on our specially trained experts in iOS development and design who will find the best solution to fit into your business, increase productivity and boost sales. If you wish to develop an MVP for your startup, a business app for your firm or an online platform to manage your workflow, contact us either by email or phone, and we will discuss your options and give you a valuable advices on app design, website development and online marketing.

Designing iPhone Apps for iOS 9