What’s different when designing apps for iOS or Android?
Most of the time companies don’t have the time or budget to design and develop two different apps for Android and iOS. Often you’ll start by designing for one selected OS and then make distinctions to fit the other OS, and once it’s ready you hand it over to your development team.
To better design your app for both OSs (yes, we Googled it and “OSs” is the proper way to say it, we promise…) you need to understand key differences early on to save time and money.
When designing for both OSs it’s good practice to study devices running the different systems to understand how they work and to see how the same apps behave on them.
If you don’t have alternative devices, borrow them for a day or two. A couple of days playing around should get you familiarized with the key differences. Make sure you note them down, as the more you use them the more natural the differences will start to look for you.
Study the guidelines
First of all, don’t guess or assume anything. Simply dedicate some time to read the guidelines for both, Android and iOS to understand how certain elements are intended to function and appear visually.
Nobody has time to read boring manuals, but this research will pay off in the long run. Reading the official guidelines will subconsciously influence every design decision you will make.
iOS Human Interface Guidelines: Designing for iOS — these guidelines are Apple’s recommendations and suggestions to developers designing cohesive and usable apps that follow similar user interface principles to other iOS applications.
Up and running with material design — Android uses a new design metaphor inspired by paper and ink that provides a reassuring sense of tactility. Visit the material design site for more resources.
Utilise UI kits
The best way to learn how apps are structured is by copying. Download freely available UI kits for Android and iOS and try to recreate selected apps using them.
Why is using a UI kit so important? Because these are the official visual guidelines used by the operating system and are hard to go wrong with. Experimenting with them initially will help you better understand how certain things look on one or the other operating system.
- iOS 9 GUI (iPhone) for Photoshop and Sketch by Facebook Design Resources
- Android Lollipop UI Design Kit for Photoshop, Sketch by UXPin
Browse pattern galleries
Pttrns for iOS and Android — collection of design patterns, resources and inspiration.
Inspired UI for iOS and Android — a showcase of the best examples of beautifully designed mobile apps.
iOSpirations — a gallery featuring quality iOS/OSX app and icon designs for inspiration.
Android Niceties — a collection of screenshots encompassing some of the most attractive looking Android apps.
Android on Dribbble — talented designers share their Android designs in progress.
Let’s get started
Let’s jump into some of the most important principles you should keep in mind when designing apps for both Android and iOS.
Status bar
The status bar is a global element on both operating systems, appearing at the top on almost every app. On Android and iOS the status bar indicates the battery charge, network connection and clock.
The main difference here is that Android can also show icons for running apps.
Key takeaway: No need to design a custom status bar. Stick to the standard status bar size and icons by using the UI kits.
Navigation bar
Both operating systems have a navigation bar directly below the status bar. It is best to use the standard height as provided in the official UI kits. The navigation bar contains navigation controls like filtering, menu, search and “back” button only on iOS.
Also, this area is used to display the title of the app or a specific app screen, e.g. “Facebook”, “Edit Profile”, “Settings” etc. The main difference between the two OSs is that on iOS that title is centered and on Android it is placed on the left.
In some cases, iOS apps replace their title with their logo.
Key takeaway: keep the standard height and apply the default icon and title placement for both OSs.
Back button
It’s important to note that Android devices have a physical back button used to go back to the previous app screen. In comparison, iPhone doesn’t have this button and it must be included in the navigation bar.
Key takeaway: Don’t forget to include the back button in your iOS designs. Use the standard “back” arrow icon from the iOS UI kit or design your own and place it on the left side of your navigation bar.
Tab bar
Yes, there are many elements called bar. This is the last one, though.
This bar in most cases appears in different places on the screen depending on the operating system. For iOS, it is placed at the bottom of the screen and has multiple tabs with icons and text below, although this depends on the app.
Android, in contrast, places the alternative bar below the navigation bar, so it has three bars stacked on top of each other — the top status bar, then the navigation bar, and the tab bar. The tab bar on Android can use icons or text depending on the app.
It’s worth noting that Android has global navigation component with three buttons that is placed at the bottom of the screen, with buttons to go back, home and to show history. This menu is shown on every screen across an app.
Key takeaway: probably the biggest difference between Android and iOS is that the tab bar appears in different locations OSs.
Typography
Default system fonts are San Francisco on iOS and Roboto on Android. It’s essential to choose readable fonts and as a general rule don’t use more than two fonts in your interface, no matter the operating system. Here is a list of best free fonts to use in your apps if you don’t want to go with the default system font.
Typography on both Android and iOS must be legible, have enough white space around to be easily readable and scannable, and employ visual hierarchies by using font weight and color.
Key takeaway: Use default system fonts where possible, and if not, choose no more than two legible fonts, using plenty of white space.
Buttons
Buttons share a similar structure on both Android and iOS. There are two types of buttons: floating boxed buttons and flat buttons, with just text as the clickable area. The main difference is that Android essentially uses Material Design and has noticeable shadows that create a feeling of depth, where on iOS, everything is absolutely flat.
Another difference is that on Android, button text is bold uppercase, where on iOS it uses regular styling.
Key takeaway: when designing buttons for your app, simply reuse the buttons from the OS UI kit and customize them to your needs.
Tabs
Tabs or segmented controls allow you to switch a view of the screen without the need to go back or load a new screen. In most cases tabs are placed below the navigation bar and display multiple selections.
The visual style is significantly different on Android, where the tab control is simply a horizontal menu with uppercase text and underline indicating the active selection. On iOS it’s a rounded corner container with lines separating selections and no uppercase styling.
Key takeaway: Don’t simply copy-paste your tabs menu from one OS to another one. The structure can be the same, but to style it visually, refer to official guidelines or use the UI kit.
Icons
Both operating systems enrich the user interface with contextual icons presented alone or accompanied with text. Icons are subtle and the most significant difference is probably that icons on iOS use a simplified thin outlined style when inactive, and filled when active, whereas on Android solid, thicker icons are the norm.
Key takeaway: use icon sets specifically designed for Android or iOS.
Popups
The main difference when showing a popup is that on iOS it’s extremely simplified and appears in a rounded corner box with line-separated buttons. On Android, in comparison, alerts and other popups use the previously mentioned button style of uppercase text with no visual box surrounding them.
Key takeaway: Generally, it’s best not to customize these popups and simply use the default system popups for alerts, sharing options, and modal views so that the user experiences familiar interaction with your app.
App icon
To wrap things up, let’s look at a highly influential element of your app — the launch app icon. This is the one that appears on the home screen or menu alongside other apps. The main difference here is that iOS is very strict with app icons, you have to follow their template and design your icon inside a flat rounded rectangle shape.
Android, on the other hand, gives you more freedom with the shape and style of your app, but still requires a slight shadow.
Key takeaway: Analyse apps on the market and follow specific OS guidelines for designing your app icon. A great place to start is a free App Icon Template providing a usable template for Android and iOS.
Summary
Don’t try to reinvent the wheel. If in doubt, always refer to the official guidelines or simply take the standard UI kit and customize it to your needs. Yes, it may hurt your creative feelings but you want people to understand how to use your app from previous experiences of using apps on their device, right?
To save time check out some free app design UI kits to help you design your next app.
Further reading options:
- A UX starter guide to converting iOS into Android design by Caroline Smith.
- The iOS Design Guidelines by Ivo Myntinnen.
- A Tale of Two Platforms: Designing for Both Android and iOS by Chris O’Sullivan.
☞ Please tap or click “♥︎” to help to promote this piece to others.
