Material Design on iOS
Material Design is a style created by Google, presented for the first time on Google I/O 2014 and launched just after the keynote.
The basic metaphor of material design is a flat sheet of paper in 3D space. It is the default approach for designing Android applications, however, Google uses it on other platforms such as iOS and Web.
When it comes to Android, there’s no doubt that we should use it, however, it’s not so straightforward on iOS, where the current default approach is Flat Design, introduced with iOS 7 in 2013. I don’t think that either of them is better than the other – they are different, and that makes switching between platforms interesting.
Should we use Material Design on iOS?
When reading this section, please keep in mind that I’m not a UI/UX Designer. My opinion is an opinion of a developer who created apps for both iOS and Android and used them as a normal user for some years. The short and very subjective answer to the question above is: in most cases, NO. Every platform has its own style that users are used to. They know which gestures are likely to work, they know what animations mean, they understand the differences between various alerts, and know what those differences mean. Even if they aren’t real UX design agencies, and they cannot explain the meaning of something in great detail, they just feel it because of the sheer amount of time spent using particular platform. They have been embedded in a particular style for years, and it would very easy for them to understand a freshly installed application quickly.
Taking this into consideration, I think we should stick to the Flat Design on iOS and to Material Design on Android. My answer, however, was that we shouldn't use Material Design on iOS use it in most cases, so, what are those minor cases in which we can use it? The very few are the applications provided by Google, such as Google Calendar, Google Keep, or Youtube. Because of Material Design being there, we can see at the first glance that this app was created by Google team and it’s part of the Google family.
How to implement Material Design on iOS?
There are a few approaches to implementing Material Design on iOS. First of all, we can just create our own subclasses that would look similar to the given designs. Of course, it’s very time consuming, so if we want to implement Material Design-styled elements, we should look for a framework. There are two main players right now: Material, created by a group called CosmicMind and material-components-ios backed by Google.
Comparison
| Material | material-components-ios | |
| Date of v1.0 release | Aug 23, 2015 | Mar 4, 2016 |
| Number of GitHub stars | 9 828 | 2 368 |
| Number of contributors | 35 | 85 |
| Language | Swift | Objective-C |
| Number of issues | 904 (49 open, 855 closed) |
2129 (1018 open, 1111 closed) |
| Samples | ✅ link | ✅ link |
| Documentation | ⚠️ In code | ✅ link |
| Number of lines analysed (using cloc, only component files) |
|
|
Conclusion
Looking at the code, the Material framework is much smaller and it depends mostly on the existing UIKit classes. Consequently, it’s easier to understand and use. The Material-Components framework is more advanced and offers more components, though. It mostly depends on custom UIView subclasses, even for such elements as buttons. With more customisation also come more bugs and edge cases. Which one you should choose depends on your use case. I would recommend you make sure first that you really want to use Material Design on iOS. If the answer is still yes, check out the Material framework, and if it still isn't enough for your needs, try the material-components-ios framework.
