A Brief Guide To UI Design For Mobile: Android & iOS

CareerFoundry Blog contributor Eric Bieller

As a new UI designer, designing for mobile can be scary. With so many device variations and design specs to follow, it can be daunting to say the least! The two most popular platforms, iOS and Android, have particular UI patterns that must be adhered to. Stray too far from these patterns and you run the risk of confusing your users.

So how do you design an app for both Android and iOS? What are the key differences between the two platforms? How do you make an app that feels the same on each platform without deviating from known design patterns?

In this article I’m going to dig into these questions and share some of the key differences between iOS and Android. By the end, you’ll have a solid understanding of the differences and be more confident about designing for them.

684what are the main differences between the two platforms x 684 352x

What are the main differences between the two platforms?

Each platform comes with its own unique patterns and quirks. Understanding these differences is the key to designing for them. Here are the most common differences between the platforms:

Single device manufacturer vs. multiple

Since it’s release, iOS has only been available on iPhone / iPad. This was a smart (and predictable) move on Apple’s part, whose aim is to have complete control of their software and user experience. This is good because it leads to a cohesive user experience, but bad because it doesn’t allow other manufacturers to innovate on their platform.

Conversely, Android can be installed on any device. So, instead of just one device manufacturer, there are many: LG, Samsung and Google just to name a few. This is good because it gives manufacturers control over the OS (operating system) and allows them to craft their own user experience, but bad because Android devices don’t always have a cohesive user experience (more on this in a bit).

Physical back button vs no back button

Some android devices have a row of physical buttons on the phone itself, typically back, home and overview, while iOS only has a home and lock button.

This is just another thing that has to be kept in mind when designing your Android. What happens when a user hits the back button in your app? Check out the Android documentation on the subject to get a better handle on how the physical back button works vs digital one.

Conversely, when designing for iOS, you’ve got to put more thought into how the user gets back to their previous screen. A common pattern to use is a left pointing arrow in the top left of your app.

Different UI Patterns

The two platforms offer similar functionality, but it’s executed in different ways. Each has its own standard for things like lists, menus and headers. There are a couple things you can do as a designer to understand these patterns and make sure you’re using them properly.

  1. Make sure you’re familiar with iOS’ Human Interface Guidelines and Android Material’s Design Specs. These guides are the starting point for gaining a solid understanding of each platform’s unique design patterns.
  2. Pay attention when you use your favorite apps! Look for the different patterns being used. The best apps will stick to conventions but present them in their own unique style and personality.

This is actually a tough question to answer. If you’re talking about devices in the hands of consumers, Android is way more popular than iOS. This is due to a lot of factors including device price, availability and having many device manufacturers. And some people just prefer Android to iOS! I know what my fellow Apple fans are thinking: “People actually prefer Android to iOS”? Yep, it’s true believe it or not!

Worldwide, Apple is at about 14% while Android is enjoying 82.8% of the market.

That being said, iOS is still hugely popular, especially in developed nations like the USA, Canada and the UK. So as a UI designer, it’s extremely important to be well versed in the individual quirks and design patterns of each platform.

684designing two versions of your app x0 0 684 352 684 352x

Designing two versions of your app

One thing that really confuses new UI designers is understanding how you manage the design and execution of the two separate platforms. This can certainly be difficult, considering that apps should feel similar on each platform and offer the same functionality, without violating each platform’s native design patterns.

Firstly, there are tons of UI kits out there for each platform that will give you a great starting point. Sketch has iOS templates built right in (File >> New From Template >> iOS UI Design) and here’s a great one for Android.

Some elements should be the same size throughout your app like the status bar, common buttons, etc. You shouldn’t guess on these. Instead, consult the UI kits or the platform design specs.

For each interaction, make sure you consult the iOS Human Interface Guidelines or Android Material’s Design Specs to make sure you’re adhering to their common patterns. These design specs cover tons of UI elements and interactions such as switches, lists, cards, alerts, icons, buttons, etc.

You’ll need to have two separate design files for your app, but the user flows should be very similar (if not identical). Think of the user flow as the glue that keeps the two designs feeling cohesive.

When it comes time to code your app, you can use frameworks like PhoneGap which allow you to code a single version of your app, but compile it to either platform. For basic apps this can work well. But if you’re wanting a more native, polished experience, you’ll need to build a separate version of your app for each platform.

684conclusion x 684 352x


I hope you’ve enjoyed this introduction to designing to iOS vs Android. If you’d like to learn more about designing for the two platforms, take a look at the UI Design Course here at CareerFoundry. Our course goes in-depth on what it takes to design for mobile and gives you a well-rounded understanding of the concepts mentioned in this article.

And if you’d like to learn more, check out this article: How mobile design is different from designing for other platforms.

What is CareerFoundry?

CareerFoundry is an online school for people looking to switch to a rewarding career in tech. Select a program, get paired with an expert mentor and tutor, and become a job-ready designer, developer, or analyst from scratch, or your money back.

Learn more about our programs