@Ironhack UX/UI Bootcamp - Intro to UI design: One design to govern them all
For this 4th week of the Bootcamp, we are tasked with designing an e-learning app to be launched both on iOS and Android systems. In order to understand the difference between Google's Material Design and Apple's Human-Centered Design, I had to do some research and analyze both design standards. Here you will find the top 5 guidelines that affect my ongoing project the most:
Bottom navigation bars allow movement between primary destinations in an app, displaying three to five destinations at the bottom of a screen. Different platforms have different rules and they need to be taken into consideration. Tabs usually appear at the top of the screen on Android and the bottom of the screen on iOS. This has been changing since Android 10 introduced gesture navigation, getting closer to what Apple's iOS has been doing for a long time and leaving behind that classic bottom navigation control that left us fiscally a few years ago. Open any Google services app and you will see a clear example of this change.
Action Buttons are those that communicate actions that users can take. They are typically placed throughout the UI. Buttons should easily discoverable and indicate that they can trigger an action, and both that action and the button's state should be clear. A button’s position and size should scale in relation to its container.
To communicate the key actions of an app Material Design on Android uses Floating Action Buttons, consisting of an icon (sometimes labeled as in Gmail), that floats on top of the main content. On the other hand, the majority of apps on iOS place action buttons on the top title bar. . The text on buttons in Material Design is usually all uppercase. Sometimes we find uppercase button text in native iOS apps too, but most often we find title case.
According to Google's Material Design Guidline, touch targets are the parts of the screen that respond to user input. They extend beyond the visual bounds of an element. Both iOS and Android have slightly different guidelines for touch targets (44px @1x for iOS and 48dp/48px @1x for Android). Material Design Guidelines also suggest aligning all elements to an 8dp square baseline grid.
Historically Apple has used Helvetica Neue, however, in 2015 shifted to Helvetica-inspired San Francisco. Apple restricts the usage of the typeface and only licenses it to registered third-party developers only for the design and development of applications for Apple's platforms. Android on its side has been using Roboto, a neo-grotesque sans-serif typeface family, as the standard system typeface since 2011 on Android 4.0 "Ice Cream Sandwich". The entire font family has been licensed under the Apache license. (Take note Apple!)
The basic size of both the texts are similar, but Material Design android vs iOS has a huge difference in font sizes and their layout. While iOS mainly uses bold type to build the text hierarchy, Android uses more white space between texts.
The hamburger menu, or navigation drawer as officially named by Materia Design, helps you save precious screen space, becoming one of the most popular navigation patterns for small and medium screens and a core component on Android. The drawer panel allows you to hide the navigation beyond the left edge of the screen and reveal it only upon a user’s action. The main downside of the hamburger menu is its low discoverability, and it’s not recommended as the main navigation menu, being more suitable for secondary navigation options.
