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:
Display Size and Resolution
Typography
iOS App Icon
UI Elements
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:
Embrace Simplicity in your icon that can showcase the essence of your app.
Provide a single focus point that captures the gaze of the user.
Design an icon that is easy to recognise.
A simple background that avoids transparency in the background should be preferred.
Use letters or texts only if they are a part of the logo.
Never use any Apple products in your icon, as Apple has copyright over all of them.
Instead of incorporating your icon throughout the interface try to incorporate the colour scheme used in the icon design.
Test your icons against multiple wallpapers to make it adjustable across multiple home screens.
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:
Avoid scrolling
Must provide a cancel button
Present clarity between options
Activity Sheets:
Use the action button to display activity views
Make sure the titles easily specifies the purpose
Design simple templates for your custom activities.
Images
Make a separate column designated for collections and albums
All images should be of the same size
Pages
A page control button is a must.
If possible, iOS allows custom page navigation which will further allow the user to jump between pages.
Popovers
Alert or popover page should be shown one at a time.
Always include a close or done button in a popover.
Autosave work when a popover page opens.
Scroll View
UI should support zoom behaviour.
Page control element should be visible while scrolling.
One scroll view at a time.
Split View
Highlight the active section in the primary pane.
For easy access, restrict navigation to one side of the screen.
Table View
Communicate about the content loading progress.
Quickly show the content of the table.
Text View
Text should be legible. Do not use fonts, colours or sizes that may pose difficulty for the reader.
Show the appropriate UI keyboard type.
Web View
Provide forward and backward navigation buttons clearly.
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:
Aesthetic integrity
Consistency
Direct Manipulation
Feedback
User Control &
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.