Design for Android vs. design for iOS
Android vs. iOS: platform choice
When deciding on a platform on which to develop your next mobile app, there are some things to keep in mind.
Android has a huge market and in the first quarter of 2018, almost 86% of users worldwide had phones that run on the Android OS. IOS had a much lesser reach with slightly more than 14% consumers.
The previous figures also translate into the number of app downloads.
The number of Google Play apps installed per user account for the first time is about 2.4 times higher than that downloaded from Apple Store.
Despite the lower number of iOS apps available, Apple generates 90% or 1.9 times more profits from its App Store.
The trend is motivated by the number of factors. Among them are the availability of Apple Store in China as well as the presence of other Android app stores (like Amazon Appstore and Samsung Store). Moreover, Apple devices are generally associated with prestige and high-end security and are owned by more affluent users.
Android vs. iOS design: where to start?
Design for both platforms may not seem much different at the first sight. But there are specific platform features that will significantly impact the usability and perception of an app.
Both Android and iOS have developed their own sets of rules, that tell how their applications should look like. Android devices are primarily based on Google’s Material Design, while Apple adheres to Human Interface Guidelines.
Both operating systems support UI kits to make it easier for designers to understand how the apps should be structured and look like. For example, one can download and try out:
- iOS 11 iPhone GUI for Sketch by Great Simple Studio or similar GUI both for Photoshop and Sketch designed by Facebook.
- Android Lollipop UI Design Kit by UXPin or Android Nougat GUI by Great Simple Studio for Photoshop and Sketch.
But before going deeper into platforms’ design features, let’s backtrack to this - skeuomorphism.
The term “skeuomorph” is compounded from Greek skéuos (meaning 'container or tool'), and morphḗ (meaning 'shape'). According to Techopedia, “skeuomorphism refers to a design principle in which design cues are taken from the physical world.” In other words, this is the approach of imitating the shape of real-life objects with 3D effects. The users should be able to easily deduce what the function of the element is. The aim is to invoke a feeling of familiarity in users, allowing them to apply their background knowledge.
The technique was widely used in the 2000s and first years of the 2010s, when most users were transiting to the digital world. It helped users get acclimated to new technologies as painlessly as possible.
Source: mashable.com. IOS Newsstand looks like a wooden shelf.
Source: mashable.com. IOS Podcast app imitates an old fashioned recorder with spools.
Skeuomorphism was hugely supported by Apple and Steve Jobs was a fan of it. However, the current company's chief design officer, Jonathan Ive, does not share this standpoint. So Apple officially ditched skeuomorphism at the Worldwide Developers Conference and presented its all-new flat-based iOS 7 interface.
Source: youtube.com. IOS 6 on the left, ioS 7 on the right.
Source: cs2024.wordpress.com. Calculator app on iOS 6 on the left, iOS 7 on the right.
Human Interface Guidelines is now based on three primary themes: clarity, deference, and depth.
This approach celebrates minimalism, use of crisp elements, and focuses on typography and flat colors.
“Negative space, color, fonts, graphics, and interface elements subtly highlight important content and convey interactivity,” HIG states.
To make the experience with the content smooth and pleasing, a designer is allowed to apply the effects of translucency and blurring. Bezels, gradients, and drop shadows can also be used, but only minimally and just to “keep the interface light and airy, while ensuring that content is paramount.”
The planes do not intersect and should allow for a clear distinction between background and foreground layers.
“Distinct visual layers and realistic motion convey hierarchy, impart vitality, and facilitate understanding,” claims HIG.
This design perspective allows focusing on the meaningful elements while leaving things fully responsive and visually appealing.
Google introduced its Material Design out of the need to unify the UI across different Android devices. The design is inspired by the real world and its textures and reimagines the mediums of paper and ink.
But “unlike real paper, our digital material can expand and reform intelligently. Material has physical surfaces and edges. Seams and shadows provide meaning about what you can touch,” Matías Duarte, Google's Vice President of Design, explained.
In other words, Material design can be treated as an enhanced version of flat design with a touch of skeuomorphism.
“Material design may be aesthetically flat, specifically the colors, but it is multi-dimensional: it takes the Z-axis into consideration,” MK Cook, UX/UI Designer, said.
“Material design adds animation, layers, and a hint of skeuomorphism to flat design making things easily distinguishable like buttons,” – Melissa Galle, graphic design manager, added.
Android’s design aims at creating interfaces that are optimized for the digital and embrace the real world just enough to make the interface intuitive.
To make things more illustrative, we will shed light on the main differences that every UX and UI designer should know before designing an app for iOS and Android.
Android vs. iOS design: app icons
An app icon is usually the first visual expression of your brand that a user gets acquainted with. Icons reflect the key idea and purpose of your product in a concise fashion. Every icon should be distinct and memorable, but each platform’s guidelines also have something to say about their concept and execution.
All iOS icons are created square shaped and are later automatically rounded off from the corners. Apple vouches for flattened images with no transparency and a simple background. The company also recommends avoiding unnecessary elements like nonessential words, photos, and interface elements. An icon should be friendly and clear.
Similarly, in its Material guidelines for product icons, Android, among other things, approves the use of paper shadows and provides recommendations about the range of colors to use. However, unlike iOS, Android icons can be transparent in the background and therefore get any shape that fits the icon area.
Android vs iOS design: vocabulary differences
Android and iOS share a set of basic elements, but apply different names to identify them. In order to avoid confusion, it is worth to know how each bar is called on Android and iOS. The thing is, these elements should comply with the platform style and size restrictions to provide the native user experience.
Android vs iOS design: navigation
Both Android and iOS have taken some different views on how the navigation of their interfaces should feel and look like.
One of the core components of both Android and iOS is the status bar, where such information as time, network connection, battery charge and other system data is placed. It has a different layout on both platforms with iOS info distributed along the bar length and Android’s shifted to the right corner.
The app bar/ navigation bar goes next and serves to display a name or current page of an app. On iOS, the bar is centered, while on Android it is left-sided.
One of the most common action users take is backward and forward moving within apps. Android provides its users with a navigation bar at the bottom. This is a set of three buttons (either physical or digital, depending on the device) that function as back, home and overview routes.
IOS sticks to a little different approach. Neither its devices nor its interface has a universal back button. It means that designers must ensure a decent navigation within the app and add a back indicator on the top left corner of every iOS app page.
Source: medium.com. LinkedIn Android app.
LinkedIn iOS app. Source: medium.com
Navigation on both platforms may also differ in terms of tabs use and placement. Android originally prefers a drawer bar on the left side of the page with a hamburger menu or a top tab bar.
IOS, in its turn, firmly supports a bottom tab bar that allows for a relatively easy access to the menu.
However, since 2016, bottom navigation has also become part of Android Material design and is implemented in such apps as Instagram and Foursquare.
Source: play.google.com. Instagram Android app.
Source: itunes.apple.com. Instagram iOS app.
And the drawer menu is still sometimes present in iOS apps.
One of the most eye-catching distinctions between the two operating systems is the presence of a floating action button (FAB) on Android interfaces. It is commonly used to perform the primary action on a screen like composing an e-mail or adding a new post in a social network app. FAB usually appears in the right bottom corner to ease single-hand operation and is positioned in front of the screen content. However, sometimes it can be spotted in other places like at the junction of two areas that makes it more noticeable. As a rule, it has a circular form with an icon in the middle.
One can also use extended buttons that are wider and contain a text label.
The counterpart of the FAB button for iOS is a call to action button. One can typically find it in the center of tab bars or in the upper right corner, like in twitter app.
Source: optocrypto.com. Twitter app for Android.
Source: 9to5mac.com. Twitter app for iOS.
However, rules are meant to be broken, and iOS apps also sometimes use those FAB. Take the LinkedIn iOS app, for example.
Android vs. iOS design: typography
Each system has its own default fonts that are recommended for designers to use. They help to create a sense of consistency and native look and feel across the platform.
Android suggests Roboto as its default system font. IOS prefers San Francisco font, which has two variants depending on the point size. SF Pro Text is used for text 19 points or smaller, while for text 20 points or larger one should switch to SF Pro Display, and adjust the spacing between letters appropriately.
Android vs. iOS: Screen resolutions
When designing an app, one needs to have a solid idea of how interface elements will appear on the screens with different resolutions. One of the great tools for examining how the things might respond is Sketch’s Resizing Constraints.
Android OS supports devices from different manufacturers, which leads to a number of screen sizes and densities to accommodate to.
Android uses a density-independent pixel (DP) as a core measurement unit. This is equivalent to iOS’ points. On a standard-resolution screen, one point counts as one pixel. High-resolution screens have a higher pixel density and require images with more pixels.
When it’s time to export graphical elements, Android will, as a rule, require 1x, 1.5x, 2x, 3x and 4x scaling factor.
Apple iOS devices are much more uniform in terms of image resolution.
Android vs. iOS design: patterns gallery
So we’ve touched upon main peculiarities of both platforms.
To get some inspiration designers can also use some nice online galleries with modern apps templates. Some of them are:
iOSpirations - a showcase gallery featuring the best iOS apps and icon designs for inspiration.
Android Niceties — a collection of the most beautiful, well-built Android apps.
This is by no means an ultimate list of differences between the two systems. But paying attention to these features will help you understand the ways in which the same tasks can be performed across the platforms. However, there are some examples of apps that borrow certain design patterns from their competitor’s OS principles. The final choice should depend on your users’ preferences.
Belitsoft provides mobile development and design services for both iOS and Android. Our talented designers know how to create engaging interfaces that follow both systems’ best practices to make your apps stand out. Write to us to learn more!