Differences between
IOS & Android
UI design
Introduction to topic
Apple’s iOS and Google’s Android are the two leading
operating systems for mobile apps, each of them has a
different operating systems which leads to many more
differences in the design, today I will talk about those
differences.
Platform UI guidelines
iOS and Android each follow different interface design
and app development rules and guidelines:
Android = Material Design (Maintained by Google)
iOS = Human Interface Guidelines (HIG) (Maintained by Apple)
Android material design
Android devices follow Google’s Material
Design guidelines and principles. What’s
unique about Material Design over HIG
(by apple) is that it’s an open-source,
themeable library that companies use to
build a wide range of digital products,
including iOS apps–not only for Android
devices.
iOS HIG (human interface guidelines)
Apple’s Human Interface Guidelines (HIG) contain guidance and instructions
for designing and developing products for Apple’s products.
Apple’s iOS design resources provide
designers with design files and
templates for Apple products,
including iPads, iPhones, Apple
Watches, MacOS, etc.
Main differences in UI
01 02 03
Screen Sizes Units of Navigation
Measurement
04 05 06
Floating action System Fonts Other
Button (FAB)
01
Screen
sizes
Screen sizes
One of the benefits of designing for iOS is that Apple controls every device and screen
size. Designers can apply designs to various Apple templates and predict how their
products look and feel.
Screen sizes
On the other hand, Android is the Wild West regarding devices and screen sizes. There
are so many viewports it’s impossible to test products on everyone within allowable
timeframes and budgets.
02
Units of
measurements
Units of measurements
iOS and Android use different units of measurement and target sizing:
● iOS = pt (points) – 1 pixel = 0.75pt
● Android = dp (density-independent pixels/dips) – 1 pixel = 1dp
Tap target sizes also differ between platforms:
● iOS = 44 x 44pt or 59 x 59px
● Android = 48 x 48dp or 48 x 48px
03
Navigation
Screen sizes
One of the benefits of designing for iOS is that Apple controls every device and screen
size. Designers can apply designs to various Apple templates and predict how their
products look and feel.
Android
Android’s bottom navigation
allows users to:
● View all open apps
● Return to the home screen
● And go back to the previous screen
iOS
● On iOS, there is no return to home or back button, but users can view all open apps by
swiping up from the bottom left.
● The top navigation bar (top app bar on Android) is similar for both platforms, with a back
button to the left, a title center, and other action buttons to the right.
● iOS will often use text buttons for the top navigation bar’s right actions when there is only
one, like “Edit,” whereas Android always uses icons.
04
FAB
Floating action button
Floating action button
The Floating Action Button (FAB) is unique to Android devices and rarely featured in iOS
applications. The FAB is a screen’s primary call to action. For example, Twitter uses the
FAB to create a new Tweet, while Gmail uses it for composing a new email.
iOS’s primary CTA always lives on the far right
but moves between the top navigation bar and
bottom tab bar, depending on the screen’s layout.
05
System
Fonts
Contents of a portfolio
● A portfolio is composed of three main elements:
● Content - this includes the actual work you want to
showcase and can be anything from writing samples
to photographs or videos
● Design - the design should reflect your personality
and style while remaining professional. It should also
make it easy to navigate the portfolio
● Summary - a brief summary at the beginning of
the portfolio will help provide an introduction to
your work and give visitors a better understanding
of yourself and what you have created
Fonts used…
iOS and Android use different san serif system fonts;
however, the style and weight are very similar
Android iOS
06
Other
iOS flat design vs. Material Design elevation
Another key difference
between HIG and Material
Design is elevation. HIG
guidelines recommend a flat
design, while Material Design
uses shadows.
A great example of this difference is Airbnb’s FAB to open the map. At first glance,
these UIs look identical, but you’ll notice the Android version uses a shadow for the
FAB, whereas the iOS doesn’t.
Thanks!
Aya Amr
CREDITS: This presentation template was created
by Slidesgo, and includes icons by Flaticon, and
infographics & images by Freepik
