Designing user interfaces for iOS can sometimes become difficult for designers. Therefore, the CreateBytes design team has come up with an exhaustive list of things in mind while a designer is designing an application for iOS (Apple). Also, we will keep updating this blog timely to keep up with the new additions so keep on coming back and utilizing this iOS UI kit for This blog will cover 5 main elements which are further bifurcated and discussed briefly. The last update has been done and the blog contains the iOS 14 UI kit as well. 

The topics discussed below are:

1. Display Size and Resolution 

2. Typography 

3. iOS App Icon 

4. UI Elements 

5. Themes & Color Palette

Display Size and Resolution 

Initially, it was easy to keep up with the screen size but now Apple keeps on changing the screen size with each gadget generation and thus the designer needs to keep updating his/her artboard size. Here is a table given below which will help you throughout. 

Device  Display Size Portrait (px) Landscape (px)  Pixel Per Inch (PPI) Asset Resolution Iphone 12  Pro max 6.7” 1284 x 2772 2778 x 1284 458 @3x Iphone 12 6.1” 1170 x 2532 2532x1170 460 @3x    Iphone 12 mini 5.4” 2340 x 1080 2340 x1080 476 @3x Iphone 11 pro Max 6.5” 1242 x 2688 2688 x 1242 458 @3x Iphone 11 pro 5.8” 1125 x 2436 2436 x 1125 458 @3x Iphone 11 6.1” 828 x 1792 1792 x 828 326 @2x Iphone XS Max 6.5” 1242 x 2688 2688 x 1242 458 @3x Iphone XR 6.1” 828 x 1792 1792 x 828 326 @2x iPhone XS,X 5.8” 1125 x 2436 2436 x 1125 458 @3x iPhone 8+, 7+, 6S+,6+ 5.5” 1080 x 1920 1920 x 1080 401 @3x iPhone 8, 7, 6S, 6 4.7” 750 x 1334 1334 x 750 326 @2x iPhone 5, 5S, 5C 6SE 4.0” 640 x 1136 1136 x 640 326 @2x iPhone 4, 4S 3.5” 640 x 960 960 x 640 326 @2x iPhone  (1st, 2nd , 3rd Generation) 3.5” 320 x 480 480 x 320 163 @1x iPad Pro 12.9” 2018 12.9” 2048 x 2732 2732 x 2048 264 @2x iPad Pro 11” 2018 11” 1668 x 2388 2388 x 1668 264 @2x iPad Pro  (1st Generation) 10.5” 1668 x 2224 2224 x 1668 264 @2x iPad Air/ Retina iPad 9.7” 1536 x 2048 2048 x 1536 264 @2x iPad Mini (2nd, 3rd, 4th generation) 7.9” 1536 x 2048 2048 x 1536 326 @2x iPad Mini  (1st generation) 7.9” 768 x 1024 1024 x 768 163 @1x

Typography

Up till now, they have been using Helvetica Neue as a font but after the release of iOS-9, Apple has changed their default to San Francisco. San Francisco is further divided into two categories, i.e, “SF UI Display” and “SF UI Text”. Both of them have different spacing and usage categories. Further iOS considers the weight and colour of the element rather than size or uppercase. The table below highlights the style of iOS typography: 

 

Element Type	Size (pt.)	Weight	Colour Code
Page Title (Unscrolled)	34	Bold	#000
Page Title (Scrolled)	17	Semibold	#030303
Paragraph text, List item titles, links	17	Semibold	#000
Secondary Text	15	Regular	#8A8A8E
Tertiary Text, Captions	13	Regular	#8D8D93
Buttons, Text input controls	17	Regular	Multiple Colours
Action bar labels	10	Regular	#8A8A8E

 

iOS App Icon 

Apple developers in their Human Interface Guidelines have clearly given a list of things that will help the designers to conclude perfection in the design.

For their app icon theme they have given certain points to keep in mind, which are: 

1. Embrace Simplicity in your icon that can showcase the essence of your app. 

2. Provide a single focus point that captures the gaze of the user. 

3. Design an icon that is easy to recognise. 

4. A simple background that avoids transparency in the background should be preferred. 

5. Use letters or texts only if they are a part of the logo. 

6. Never use any Apple products in your icon, as Apple has copyright over all of them.

7. Instead of incorporating your icon throughout the interface try to incorporate the colour scheme used in the icon design. 

8. Test your icons against multiple wallpapers to make it adjustable across multiple home screens. 

9. Lastly, keep your icon corner in perfect square shape. 

App Icon Specifications

 

Feature Title	Value
Format	PNG
Colour Space	sRGB or P3
Layers	Flattened with no transparency
Shape	Square with no rounded corners

App Icon Sizes

 

Device	Icon Size(px)
iPhone	180 X 180 (@3x) or  120 X 120 (@2x)
iPad Pro	167 X 167 (@2x)
iPad, iPad mini	152 X 152 (@2x)
App Store	1024 X 1024 (@1x)

 

UI Elements 

Bars

• Status Bar: By default, the background colour of the status bar is transparent by which it means that the UI designer is free to design and the status bar will not hinder the image/ application. 

• Navigation Bar: Apple developers suggest hiding the navigation bar if you want the user to focus on the content. Also, the same bar should be visible with a single tap as well. 

• Search Bars: Developers point out that the search bar should be tagged along with the navigation bar so that it is always visible and easily accessible to the user. 

• Tab Bar: As suggested there are two rules for the tab bar; first, the tab bar should be always visible and secondly, the size should be consistent so that the user can easily switch between tabs. 

• ToolBar: The toolbar while scrolling should be hidden. And, insert only those commands which the user generally uses to create enough room between the buttons. 

Views

• Action Sheets: 

1.  Avoid scrolling

2. Must provide a cancel button

3. Present clarity between options

• Activity Sheets:

1. Use the action button to display activity views

2. Make sure the titles easily specifies the purpose

3. Design simple templates for your custom activities.

• Images 

1. Make a separate column designated for collections and albums

2. All images should be of the same size

• Pages

1. A page control button is a must. 

2. If possible, iOS allows custom page navigation which will further allow the user to jump between pages. 

• Popovers

1. Alert or popover page should be shown one at a time. 

2. Always include a close or done button in a popover. 

3. Autosave work when a popover page opens.  

• Scroll View

1. UI should support zoom behaviour. 

2. Page control element should be visible while scrolling.

3. One scroll view at a time.

• Split View

1. Highlight the active section in the primary pane.

2. For easy access, restrict navigation to one side of the screen.

• Table View

1. Communicate about the content loading progress. 

2. Quickly show the content of the table.

• Text View

1. Text should be legible. Do not use fonts, colours or sizes that may pose difficulty for the reader. 

2. Show the appropriate UI keyboard type. 

• Web View

1. Provide forward and backward navigation buttons clearly.

2. Safari is the primary source to use the web therefore, the UI should not be built as a browser. 

Themes & Color Palette

• Clarity should be the topmost priority as not only the theme but, font, size and colours should be easily adaptable to the eyes of the user. 

• Design Principles to be followed by UI designers:

1. Aesthetic integrity 

2. Consistency 

3. Direct Manipulation

4. Feedback 

5. User Control & 

6. Metaphors

• iOS13.0 and later, the user will be able to select the dark mode, therefore, the design must be able to shift and adapt to the corresponding mode. Test your design, time and again to make sure that the user doesn’t face any difficulty with the interface. 

•  Design your launch screen identical to the first screen that the user will visit when the app is opened. Try to avoid text on the launch screen. 

• Choose and test colours after how they will be seen in the device before the final selection. iOS’ generic colour palette is given below. 

Final Word

Designing an application for iOS is a perfect blend of art and science and one must be magnificent in this skill to achieve the final goals. This ios UI kit including that of the iOS 14 UI kit can help any designer to design an User Interface for iOS. But, a perfect design requires perfect craftsmanship which is available by our team. Visit our website and know more about our services. 

https://createbytes.com/

https://createbytes.com/web-and-app-development