2021 UI Design Guidelines for iOS

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. 

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: 

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

App Icon Sizes

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. However, crafting the perfect design demands skilled craftsmanship, something our team excels in. Learn more about how we can bring your vision to life by exploring our services.