What a Designer Needs to Know About iOS Dark Mode When Working with a Developer
To reduce communication gap between both parties
As a senior iOS app developer, it is my responsibility to analyze an app UI / UX design from a developer standpoint and provide feedback to the designers. One of the common problems that my team encounter is the communication gap between designers and developers, because of that, designers sometimes might create UI / UX design that is impossible or extremely difficult to implement by the technical team.
With the introduction of dark mode in iOS 13, Apple has redefined the meaning of colors and UI styling in iOS, which further widen the communication gap between designers and developers. This has motivated me to create this article that from a technical perspective, explain what a designer needs to know regarding adopting an iOS dark mode in order to smoothen the communication between both parties.
Without further ado, let’s dive into all these changes one by one. 💡
Semantic Colors
In order to standardize the look and feel of the iOS app in both light and dark mode, Apple has introduced semantic colors for some of the commonly used iOS UI elements.
Semantic colors do not have absolute RGB value, they are colors that will automatically adapt to the iOS interface style (light mode / dark mode). According to Apple documentation, developers or designers should use semantic colors whenever it is possible so that their app will be future-proof with any UI changes made by Apple.
For content background colors, there are 3 levels of standard content background colors and 3 levels of grouped content background colors.
Apple also introduced semantic colors to handle text color and overlay color in dark mode. Do note that ‘Label Colors’ in image below are not referring to the background color of the label, believe or not, they are actually referring to the text color. 😅
To read more about how or when to use semantic colors, you can refer to the Apple documentation.
System Colors
Aside from the semantic colors mentioned above, Apple also predefined 9 system colors. All these system colors are dynamic, meaning they will automatically adapt to the selected interface style just like semantic colors.
The following image showcases all 9 system colors together with their color code in both light and dark mode.
Blur and Vibrancy Effect
Prior to iOS 13, there is only 1 type of blur and vibrancy effect. In iOS 13, Apple introduced 4 types of blur effects and 8 types of vibrancy effects. As you might have guessed, all these visual effects will automatically adapt to the iOS interface style.
The blur effects that available are: thick, regular, thin and ultrathin.
(source: developer.apple.com)
Vibrancy effects are usually applied to content within a blur effect to make it look more vivid while blending perfectly into the blurred background.
Apple introduced 4 types of vibrancy effects for text (Labels), 3 types of vibrancy effect for overlay (Fills) and 1 specific vibrancy effect for the separator.
(source: developer.apple.com)
SF Symbols
SF Symbols are a collection of over 1500 symbols provided by Apple for designers and developers to use within their apps. As mentioned in iOS Human Interface Guidelines, SF Symbols automatically look great in Dark Mode and they are optimized for both light and dark appearances. Therefore, Apple highly recommends everyone to use SF Symbols whenever it is possible.
SF symbols are highly customizable, there are 3 sizes and 9 weight levels for you to choose from.
(source: developer.apple.com)
Furthermore, you can also change the SF Symbols tint color base on your app’s theme.
Apple has created an SF Symbols App for macOS to help developers and designers in searching and browsing all the SF Symbols that currently available. You can download it here.
Some might wonder what if you cannot find the SF Symbols that suit your needs? Fear not, you can use the SF Symbols App to export the symbol that is similar to the design that you want and customize the symbol using Illustrator or Sketch.
Dedicated Image and Color for Dark Mode
In conjunction with the release of iOS 13, Apple also released Xcode 11. By using the asset catalog in Xcode 11, developers can now create custom image and color groups that specify what color and image to be shown in light and dark appearance.
Here’s the result from the above asset catalog.
Wrapping Up
If you are a designer, I hope this article helps you understand how dark mode adoption works in iOS from a technical perspective. If you are a developer, feel free to share this with your fellow designers. You can also get the sample project here. When both designers and developers thinking on the same page, the communication gap will no longer be a problem.
Thanks for spending your precious time reading this article. If you find this article useful, please do not hesitate to share it. Leave me a comment if you have any questions or thoughts. 🙂
Originally published at https://swiftsenpai.com on November 15, 2019.
