Design for Mobile (Android & iOS)

Estimated Time: 30 minutes

In this lesson we’ll cover UI design for mobile devices. As you likely know, Android and iOS are the primary operating systems (OS) used on most mobile devices in the world today. Android is owned by Google and iOS owned by Apple. The two companies regulary publish guidelines that help designers and developers build software for their platforms. Android's guidelines are called “Material Design Guidelines” while iOS’ guidelines are called “Human Interface Guidelines”.

Designing for Android - Material Design

Material Design is a set of guidelines published by Google. These guidelines provide best practices to help designers and developers build usable and beautiful products on Android devices. The best way to understand Material Design is to explore these guidelines yourself. Before doing this, here are a few good-to-knows about Material Design.

  • Spaces and sizes are always a factor of 8px. Spaces and sizes of components can be 4px, 8px, 16px, 24px, 32px and so on.
  • Visual cues such as shadows and background fills are used to show elevation - elevation is the distance between components and the background along the z-axis.
  • Components must have a minimum tap target size of 48px x 48px. This means that any component a human is expected to interact with (touch, swipe, etc) must be no smaller than 48px x 48px.
  • Material design has its own set of recommended icons.
  • Navigation is usually done through tabs at the top of the screen.

These points are covered extensively on the Material website. There is a lot of content on the site, so the points above are the key highlight. Review the three links below to understand how to design products that meet Google’s Material Design guidelines. While viewing the links you’ll notice that there are other aspects of Material Design that are not linked in this lesson, e.g., “Foundations" and “Develop”. You may review these if you wish, but they are not reuqiredfor this lesson.

Designing for iOS - Human Interface Guidelines

Human interface guidelines are published by Apple. These guidelines provide best practices to help designers and developers build usable and beautiful products on Apple devices. Apple’s guidelines have fewer constraints than Google’s. Instead, it asks designers to focuses on the four points below when designing for iOS:

  • Help users focus on primary tasks and content by limiting the number of onscreen controls while making secondary details and actions discoverable with minimal interaction.
  • Adapt seamlessly to appearance changes — like device orientation, Dark Mode, and Dynamic Type — letting people choose the configurations that work best for them.
  • Enable interactions that support the way people usually hold their device. For example, it is more comfortable to reach a control when it’s located in the middle or bottom area of the display, so it’s especially important to let people swipe to navigate back or initiate actions in a list row.
  • With people’s permission, integrate information available through platform capabilities in ways that enhance the experience without asking people to enter data. For example, you might accept payments, provide security through biometric authentication, or offer features that use the device’s location.

There are no specific icons or size/spacing factors so designers have to come up with these themselves. Personally, I use spacing factors of 6px when designing for iOS, some designers use 5px. Components in iOS are expected to have a minimum tap target size of 44px X 44px.

Just like with Material Design, the best way to understand Human Interface guidelines is to explore them yourself. A link to the guidelines is below. You’ll notice that there are also links to guidelines for iPadOS, macOS, tvOS and watchOS. You may review these if you wish, but they are not reuqiredfor this lesson.

These are the foundational knowledge required to design for Android and iOS. Everything else you need to learn can only come from continuously designing user interfaces.

It’s important to note that these are just guidelines. Products sometiems violate these guidelines. rThis doesn’t mean these products are designed poorly. Rather, it may be a case where the designers understand the guidlines and know how and where they can make customizations. It's also important to note that not all products have different versions of their applications for Android and iOS. Some products have one design which is built and deployed on both Android and iOS. This is not necessarily wrong to do, and is often a way to save on cost and time, and manage limited resources.

To wrap things up, let's review the key differences between Material Design and Human Interface Design which are highlighted in the article below.

Reflect

We’ve covered quite a bit of content on designing for mobile. Before moving on to the next lesson, spend a few minutes reflecting on material design and human interface guidelines and, what the differences between them are. What are the most important things to remember when designing for both platforms? What rules do you need to adhere to and which ones can be broken?