A Peek into the iOS Design Guidelines for Building Mobile Apps

May 5th, 2016

A Peek into the iOS Design Guidelines for Building Mobile Apps

The challenge for developing an iOS application is the system update which brings in a host of new changes that have to be integrated with the application to get approved for the market. We list a few guidelines that follow HIG for iOS by Apple to use to build apps for the iPhone.

Resolution and Display

Based on the device, the resolution and display specifications vary for every Apple device.

Device Retina Portrait (px) Landscape (px)
iPhone 6+6+, 6S+ Retina HD 1080 x 1920 1920 x1080
iPhone 66, 6S Retina 750 x 1334 1334 x 750
iPhone 55, 5S, 5C Retina 640 x 1136 1136 x 640
iPhone 44, 4S Retina 640 x 960 960 x 640
iPhone1st, 2nd & 3rd Generation No 320 x 480 480 x 320
iPad Air / Retina iPad1st & 2nd Generation / 3rd & 4th No 1536 x 2048 2048 x 1536
iPad Pro No 2048 x 2732 2732 x 2048
iPad Mini2nd & 3rd Generation Retina 1536 x 2048 2048 x 1536
iPadMini, 1st & 2nd Generation No 768 x 1024 1024 x 768

(Source: http://iosdesign.ivomynttinen.com/)

For iOS devices, designing of a different display is done in points, which are basically entities with multiple pixels. Points are resolution-independent measurement unlike pixels, which are the smallest physical elements that can be controlled by the developers. For a retina display, a single point contains 2×2 pixels.

App Icon

With the new iPhones and iOS7, app icons have the superellipse shape. However, there is no official template of the shape, hence; developers will have to use unofficial templates for the same. For versions older than iOS 7, effects such as rounded edges, drop shadows, and gloss effect are automatically added.

With Apple’s golden ratio grid system, size and elements can be aligned on the icon.

Know More: Top 8 iOS App Development Trends to watch in 2016 & Beyond

Typography

Prior to iOS 9 and Swift coding, all iOS devices used Helvetica Neue, thereafter San Francisco has become the default font. In this there are two shapes – SF UI Display and SF UI Text hile Display is used for UI components, Text is used for wider letter spacing and is primarily used for long texts.

There are custom fonts that can be used within the iOS app, though it is important to ensure you have all the required permits.

Icons and Iconography

Icons are part of Navigation Bar, Tool Bar or Tab Bar. Bar button icons have two different states – default state with outlined style and a stroke of 1-1.5pt width and active state with solid color fill. Button icons must be drawn in one solid color with a transparent background.

With these simple guidelines, you will have ample head-start on iOS application development.

32

Share

Let's Discuss Your Project

Get free consultation and let us know your project idea to turn
it into an amazing digital product.

Let’s talk

NEWS & BLOG

Releted Blogs

What The New iOS 14 Brings for App Developers?

iOS Apps Jul 28th, 2020

What The New iOS 14 Brings for App Developers?...

Read more
The Biggest Announcements Made by Apple at WWDC 2020

iOS Apps Jun 30th, 2020

The Biggest Announcements Made by Apple at WWDC 2020...

Read more
Key Technology Trends to Watch for Futuristic iOS App Development

Internet of Things Sep 24th, 2019

Key Technology Trends to Watch for Futuristic iOS App D...

Read more

INQUIRY

Let's get in touch

UNITED STATES

31236 Meadowview Square,
Delmar, DE 19940, USA

Sales: +1 (732) 927-5544

UNITED KINGDOM

13 Layton Road, Hounslow,
London, TW3 1YJ

Sales: +44 7404 607567

AHMEDABAD

A-201, The Capital, Science City Rd, Ahmedabad, Gujarat 380060.

Sales: +91 635-261-6164