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