Design for Android vs. design for iOS

Steve Jobs, Apple’s CEO, once said: ''Most people make the mistake of thinking design is what it looks like. People think it's this veneer - that the designers are handed this box and told, 'Make it look good!' That's not what we think design is. It's not just what it looks like and feels like. Design is how it works.'' Design is all about user experience and both Android and iOS are continuously working on developing their own styles. As a result, each platform has its own approach and a set of specific rules that should be taken into account when designing an app. Read on to learn more!
Aug 08, 2018

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.

Android design vs. iOS design: market share

The previous figures also translate into the number of app downloads.

Android design vs. iOS design: 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 design vs. iOS design: app revenue

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:

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.

IOS app design: Newsstand

      Source: mashable.com. IOS Newsstand looks like a wooden shelf.

IOS app design: podcast

 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.

IOS design

Source: youtube.com. IOS 6 on the left, ioS 7 on the right.

IOS app design: calculator

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.

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

IOS app design: icons

Source: developer.apple.com

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 app design: icons

Source: material.io

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.

Android design vs. iOS design: app bar

Source: medium.com

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.

Android app design: navigation bar

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. 

Android app design: back button

Source: medium.com. LinkedIn Android app.

IOS app design: back button

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.

Android app design: drawer menu

Source: developer.android.com

IOS, in its turn, firmly supports a bottom tab bar that allows for a relatively easy access to the menu.

Android design vs. iOS design: tab bar

Source: www.nextgeekers.com 

However, since 2016, bottom navigation has also become part of Android Material design and is implemented in such apps as Instagram and Foursquare.

Android app design: Instagram

Source: play.google.com. Instagram Android app.

IOS app design: Instagram

Source: itunes.apple.com. Instagram iOS app.

And the drawer menu is still sometimes present in iOS apps.

IOS app design: drawer menu

Source: itunes.apple.com

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.

Android app design: floating action button

Source: material.io

One can also use extended buttons that are wider and contain a text label.

Android app design: floating action button

Source: material.io

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.

Android app design: FAB

Source: optocrypto.com. Twitter app for Android.

IOS app design: call to action button

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.

IOS app design: FAB

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 design vs. iOS design: fonts

Source: https://material.io

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.

Android app design: scaling

Source: design.google

Apple iOS devices are much more uniform in terms of image resolution.

IOS app design: scaling

Source: developer.apple.com

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:

Dribble for Android and iOS - a resource where designers share their design samples, including the most trendy ones.

Pttrns for iOS and Android — a collection of design patterns, resources, and inspiration.

Inspired UI for iOS and Android - a showcase of the best examples of beautifully designed mobile apps.

Mobile patterns for iOS and Android - a library of screenshots for designers and developers to reference.

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.

Final thoughts

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!

Blog writers

Subscribe to Belitsoft's Blog for Entrepreneurs

Join successful software startup founders! Get insights from growing companies like, where to get an idea, how to validate it, how to launch, and how to hire people - everything. Enter your email address below (no spam):

Email *

RECOMMENDED FOR YOU

Lead Generation Design of The Best SaaS Websites

If clothes make the man, the design makes the website. That's where potential customers start evaluating a product. The SaaS website can (and should) be an online lead-generation machine, so each component of it has to be as good as possible. As people generally remember the first and the last thing they see, having impressive header and footer can go a long way towards making your product successful. What do some of the best SaaS companies do with their websites’ headers/footers? Look at this list to get and keep in mind some ideas for custom software development while building or redesigning your SaaS website. ...

PHP 7 vs Node.js

Our team is experienced both in PHP programming and Node.js development. We have a portfolio with both PHP-based applications and Node.js-based applications as well as mixed ones. What do we take into account when considering which tool to use in custom software development? ...

The Top 10 Advantages Of Laravel for Cost-Effective Web Development

Laravel framework is very popular for custom software development. It is the Most Starred PHP Framework on Github: more than 35 000 developers from all over the world (mostly from the USA) greatly appreciate robust features of this platform. Based on data of the BuiltWith, Laravel's popular websites verticals include Business, Entertainment, Media, News, Shopping, Technology, Vehicles. Why is Laravel so popular? ...

100% Remote Million-Dollar SaaS Companies

Companies that hire remote (distributed, virtual, dispersed, or dedicated) workers and do it well seem to have a huge leg up on the competition. Let’s learn how these successful SaaS companies use global talents to increase software quality and reduce the cost of rent and office supplies: Basecamp, Buffer, Chargify, Convertkit, Ghost(pro), Groove, Hubstaff, Invision, Olark, and Zapier. As the company where you can find a remote PHP developer, we believe that you could utilize their experience and expertise to build your own full remote SaaS company. ...

SaaS Founders Who Became Rich Starting With MVP

Belitsoft has a huge experience in MVP software development for startups and prototypes for existing brands. MVP is a minimal version of the product with the minimum set of features that is enough to deploy and test the key hypothesis to solve problems of this product’ potential customers. Experts suggest that, in B2B, it’s not an MVP until you sell it. Viable means you can sell it. ...

Profitable SaaS Startup Ideas

The way to get profitable startup idea is not to try to think of startup ideas (including SaaS development). It's to look for problems, preferably problems you have yourself.  In fact, for many entrepreneurs, successful business ideas start out as solutions designed to address a challenge they face personally. Solving the problem that frustrates you may be one of the best ways of finding an idea for your startup. Look at these software developers who turned their problem into success.  ...

Get A Free Quote

Do you have a software development project to implement? We have people to work on it.
We will be glad to answer all your questions as well as estimate any project of yours.
Use the form below to describe the project and we will get in touch with you within 1 business day.

Call us:
Phone - USA
Phone - BELARUS
Skype
EMAIL US:
Contact form