Designing for iOS 13
Designers and developers were blown away at this year's WWDC19 when Apple kicked off the conference with a 2-hour keynote, announcing a lot of exciting new things for iOS 13, macOS 10.15 and watchOS 6.
In this article I unfold some of the most important additions and changes to keep in mind when designing for iOS 13, including Apple's new symbol library, Dark Mode, semi-skeumorphic controls and new modal stacks.
iOS 13 will be released in September 2019.
Building Consistent but Unique Interfaces with SF Symbols
SF Symbols is perhaps one of the most exciting additions to iOS 13, especially for developers and designers who care for the use of icons in interfaces. And why wouldn't you! Andrew Haglund posted this tweet showing what twitter would look like without icons, and I think it is safe to say that most of the internet would feel more cluttered without icons.
For this reason I warmly welcome Apple's new symbol library, SF Symbols. With over 1500 consistently designed symbols, it is now easier than ever for developers and designers to create meaningful and consistent icon-rich user interfaces. Because each symbol is available in either a stroked or solid version that can be configured to nine different weights, iOS developers can now design apps that are functionally consistent with the rest of iOS, while keeping their unique aesthetic and experience.
Apple's SF Symbols app is great for browsing the symbol library. Browse outlined and solid icon styles in nine different weights.
SF Symbols is integrated into Apple's San Fransisco Fonts which are natively used by iOS, iPadOS, watchOS, macOS and tvOS. This means that any of the symbols in the library can be used wherever one of Apple's San Fransisco fonts are used. The symbols scale according to the font size, and the symbol weight corresponds to the specified font weight, ranging from ultralight to black. All of this makes it really easy to design and develop with SF Symbols. The full symbol library can be browsed by downloading the SF Symbols app.
Same UI, different aesthetics. Made easy with SF Symbols.
The image above is a generic example app I designed to illustrate how different weights and styles of SF Symbols can be used to create functionally consistent but aesthetically different user interfaces. Notice how the visual aesthetic of each design depends on different icon styles and widths. The design on the left uses many colors combined with heavy weight, solid icon fills to achieve a more playful look, while the design on the right uses few colors combined with light weight, outlined icons that achieve a more 'professional' look.
Supporting Dark Mode
Just like Apple tries to make icons in iOS more consistent with SF Symbols, the introduction of Dark Mode is a step towards standardizing something that developers have previously implemented independently on a per app basis.
From iOS 13, apps will automatically opt in Dark Mode support. This means that users who have toggled Dark Mode as their default interface appearance will now experience an automatically generated Dark Mode version of your user interface, unless you have designed and developed a custom implementation. You can opt out of Dark Mode manually while improving your app's support for Dark Mode, and Apple encourages all developers to support Dark Mode in their apps, either wholly or partially.
If your app relies entirely on standard iOS 13 UI components, Dark Mode will seamlessly integrate with your app without much custom implemenation (but remember to test thorougly). If your app on the other hand has a custom look and feel, it is a good idea to take some time to design and implement a custom Dark Mode appearance that properly reflects the Light Mode version of your app.
When optimizing your app for Dark Mode keep these accessibility issues in mind:
Colors. If you're not using Apple's System Colors, it will often be best to provide separate Dark Mode color variants that are slightly brighter and more saturated.
Legibility. Make sure to adjust text colors for adequate contrast in Dark Mode. You can always use the system greys provided by Apple.
Icons. Consider using different icon styles for Light Mode and Dark Mode. Sometimes an outlined icon will be perfectly readable in Light Mode, while a filled version of the same icon will be more readable in Dark Mode.
The system tints and colors used in Dark Mode are slightly brighter than Light Mode colors, sometimes also with a different hue.
A Careful Re-introduction of Skeumorphism
A lot of developers and designers remember the days prior to iOS 7, when iOS apps were heavily themed to resemble real-world contexts by using shadow, lighting and texture. Since Apple announced iOS 7 at WWDC in 2013, a lot of these skeumorphic interfaces were stripped to a bare minimum, aiming for effective and functional interfaces commonly referred to as flat. In recent years a milder form of skeumorphic design has gained popularity again, and some designers have even started a revival movement for bringing back skeumorphic design. It now seems that designers and developers, including Apple and Google, are trying to find a middle ground between the heavily themed interfaces prior to iOS 7 and the minimalist direction that has been dominant since the introduction of iOS 7.
The new segmented controls in iOS 13 (on the bottom), first revealed at WWDC19.
In iOS 13, Apple carefully brings back shadow and lighting in some of the UI controls. The Segmented Control has a new look and feel that takes inspiration from the Switch and Slider controls, which somehow survived the iOS 7 treatment back in 2013, by preserving some subtle shadow and lighting. While the new Segmented Control is a subtle change, I think it shows how the use of subtle shadow and lighting can make the situation more clear to the user and bring in tactility to indicate that here is a control that can be interacted with.
New Modal View style in iOS 13 (on the right).
In addition to the updated Segmented Controls, Modal Views now express a sense of dimensionality by stacking modal views in a modal stack by default. While this might seem like a small change, I believe it is a big step towards bringing back some of the dimensionality from the skeumorphic design days.
Conclusion
All in all iOS 13 features some really nice improvements for developers and designers as well as end users. I look forward to seeing how SF Symbols and Dark Mode will be employed in practice, and how these new features hopefully contribute to an even more accessible iOS. Combined with the careful re-introduction of skeumorphism, I believe iOS 13 will feature a lot of consistent, accessible apps with clear visual hierachies and interaction patterns.
Our recently released iOS 13 UI Kit for Sketch and Photoshop makes it easy to design and prototype apps for iOS 13. It is a massive UI kit with meticulously crafted iOS 13 vector assets including most UI elements and support for designing with SF Symbols as well as Light and Dark Mode.
