Designing for iOS 13

Designers and developers were blown away at this year’s WWDC2019 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-skeuomorphic controls and new modal stacks.

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. 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.

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.

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.

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.

If you need help on revamping your existing app design to iOS13, or designing a brand new app from scratch, feel free to reach us to us at [email protected] . At Avixity, we provide free consultation for your business growth.

 

 

Leave a Reply