
Let's have a look at how iOS Human Interface Guidelines differs or resonates with Google Material Design Guidelines.
![]() |
Google Calendar (Android) |
Design Philosophy
While both follow the Flat Design philosophy, with no textures, no exaggeration of 3D perspective and no highlights, the difference is the degree to which they following the flat design paradigm.When Apple released the iOS7, the flat design was criticized for the lack of affordance in its flat buttons and controls. The new Google Material Design Guidelines took care of this by introducing a subtle shadow to the controls.
The add button in the Google Calendar app shows a shadow indicating an actionable control on a separate layer.
The key element that leads to an entirely different experience for iOS flat design versus Google Material Design is the design metaphor. While Apple is following the 'transparent glass' metaphor, Google Material Design Guidelines is based on the 'stack of paper' metaphor.
![]() |
Stack of Paper (top) vs transparent glass (bottom) |
![]() |
Litely (iPhone) |
The numerous apps from Google make use of the stack of paper metaphor adopted by Google Material Design.
Design Principles
iOS Human Interface Guidelines recommend designs that elevate functionality. The Miranda app for iPhone is a perfect example of design that serves totally to the functionality and yet so simple. The control on right lets the user see the time in all the cities of their interest with just a glide of thumb. the additional controls for adding city is available only on pull down, leaving the screen clutter free otherwise.
![]() |
Miranda (iPhone) |
![]() |
Simple Weather (Android) |
The Google Material Design Guidelines on the other hand focus on the visual flair accomplished with bold and graphic visual treatment, grid based layout. The Simple Weather uses the bold graphics to its best. The colorful graphics convey the weather for the day.
Depth
iOS apps are noticeable for the depiction of depth through translucent layers and blurred images. The iOS Human Interface Guidelines recommend zero shadows. A beautiful example is the Yahoo Weather app for iPhone.![]() |
Yahoo Weather (iPhone) |
On the other hand, z-index is the integral part of the Google Material Design Guidelines, and depiction of depth through shadow is the primary design component.
Navigation
The navigation models adopted by iOS versus Material Design Guidelines is a significant aspect of consideration for app designers In iOS apps, the tabs are the primary top level navigation element, but Material Design apps can choose between, the navigation drawer or the scrolling tabs as the top level navigation.
![]() |
B&H (Android) |
![]() |
Google Play Newsstand (Android) |
The Google Play Newstand app displays the use of scrolling tabs as primary navigation element in a cool design, while the B&H app with all the options accessible from navigation drawer is another example.
Animation
Animation introduced by the Material Design Guidelines have taken a storm in the digital experience industry. Google Material Design Guidelines recommend animations in every micro-interaction, and magnetic reaction as feedback. The animation used in Morning Routine for every single piece of interaction is mind-blowing.
![]() |
Morning Routine (Android) |
Whereas, the iOS Human Interface Guidelines suggests use of subtle animations, and that too cautiously.Dimming and color change are are used primarily as feedback, such as the one used in phone dial screen .
Color
And last, but not the least is the use of color. While Material Design Guidelines make use of bold, unexpected and vibrant colors, with solid color panels. and buttons in accent colors, the iOS Human Interface guidelines recommends color as subtle enhancements.![]() |
Simple Weather (Android) |
![]() |
Calendar (iPhone) |
iOS Calendar app showcases the judicious use color to create a minimalist design. The key elements and controls highlighted with color on bare background. On the other hand, the Simple Weather app uses the bold and vibrant color panel to indicate a clear and sunny day.
Considering the above differences, you might be tempted to design completely different versions of a app for the different platforms. However, we need to provide a consistent user experience across the platforms. To sum up, if you are designing for both iOS and Google Material Design Guidelines, its a of balancing act. While the native apps need to provide a user-experience consistent with their platforms, the user should not be asked to re-learn the app when he switches platform.
To develop iOS app with material design, you can use one of the most complete open source library:
ReplyDeletehttps://github.com/fpt-software/Material-Controls-For-iOS
Excellent post and wonderful blog, I really like this type of interesting articles keep it you.ios 7 app design
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteNice article! To get more information about difference between flat and material design, I suggest to read this article too: Flat Design vs. Material Design: How Different They Are
ReplyDeleteThe clients can exploit the component to flip between light foundation and dim foundation flawlessly. click here now
ReplyDeletePixels function admirably in photographic pictures, yet are an ungainly device to use over various gadgets. Webdesign
ReplyDeleteGreat job for publishing such a beneficial web site. Your web log isn’t only useful but it is additionally really creative too.
ReplyDeleteTwin Cities Web Design
Nice article & very helpful.
ReplyDeleteWeb Development Company in India
ReplyDeleteGreatly explained the difference between the two top interfaces of the tech industry. It is true Front end development greatly impacts the success of your business as its displays the objects of your business, showcase brand authority, and lots more.
ReplyDeleteCasino, Hotel, Lodging - Mapyro
ReplyDeleteExplore our map for Casino, Hotel, 김천 출장샵 Lodging - see available casinos and hotels 과천 출장마사지 near Casino, Hotel, 보령 출장마사지 Lodging. 동두천 출장샵 Search for casinos, hotels, restaurants and 창원 출장샵 more.