Exploring the shadowy world of cross-platform and native application design for iOS and Android.

Overview

What we’re about to go over today is an often overlooked aspect of UI design that underpins nearly every activity we do for creating both the UI and UX of a native application.

The rules can be obscure, the application of them even more-so, and the documentation sparse, at best.

Today, we’ll be exploring the shadowy world of cross-platform and wholly native application design for iOS and Android.

What is native app design?

Let’s face it: most UI designers start off on web. It’s the fastest and easiest thing to get into, and it’s also what most courses will train you on.

Most courses train you in responsive design, and that’s fine, but there is next to no course that I have found which will actually train you in native design for particular platforms.

Why? Because it can be deceptively hard to do correctly. Let’s talk about why.

The trouble with native UI

“But what’s so bad about native UI,” asks the designer, “isn’t it just another type of responsive design? Nothing fancy, I do that on the web all the time.”

→ Short answer: no. It’s not just responsive design, and I see a lot of designers who just treat it that way without understanding that there are a whole other set of rules that go along with designing native UI.

Native UI can be a huge thorn in the side of UI designers and developers because each platform (iOS and Android respectively) has it’s own standards that define BOTH best practices, AND design defaults.

• For iOS, it’s the Human Interface Guidelines for standards, and then SwiftUI and/or UIKit for default components.
• For Android, it’s the Material Design Guidelines, and MDC (Material Design Components) and/or Jetpack Compose for default components.

If you’re already confused, don’t worry, you’re not alone. Let’s take a look at how this differs from a web design context.

Web UI vs Native UI

When you’re designing for the web, you essentially setup your page, you have your HTML, CSS, JS, and respective libraries, and that’s it.

You don’t have to deal with any weird platform inconsistencies, and for the most part everything works as long as it is supported by the majority of browsers.

• On the web, the browser reads your markup, styles, and scripts, compiles them into the Document Object Model, and displays them for the user. The only components you have to worry about are ones that ship with the browser (like input field defaults) and anything that comes with your CSS library (like Bootstap for example).
• On native, the process is similar, but not the same. Instead, there are components which are pre-defined by the platform’s respective libraries, which are then used to build out the UI, and render it for the user.

Why is this distinction important? Because it can throw a huge wrench into UI designer’s processes.

Honestly, I am still not 100% sure on native design

I’m serious. I’ve been doing this for over 12 years, and it seems like every single time I turn around they’ve changed the standards, modified the component library, or deprecated a feature set.

Sure, there are standards like 16–20pt/dp/logical pixel margins, 4-col grid, 8–16pt gutters, don’t put anything in the safe areas, etc. but outside of that, is there really any Right Way™ to do this?

After reviewing a plethora of professional, large-scale applications like YouTube, Facebook, Uber, AirBnB, and many more I have concluded that platform standards are broken more often than they are adhered to.

→ As an example, the tap targets for YouTube’s top navigation bar menu bleed directly into the margins of the app. The safe area. Where it’s not supposed to go.

I could go on about this, but suffice it to say that if you come from a web background like me and are confused as hell about native, don’t feel bad, it’s super weird.

Some resources that have helped me greatly

Below are a list of resources that have helped me greatly on my quest to better understand native UI, how it’s rendered, and how to work with it more effectively.

How to learn native UI design the right(ish) way

Most courses do not cover this stuff in any real, meaningful way. Like I said they normally cover responsive web design just fine, but they won’t even touch native.

So how do you actually learn how to do it right? Reverse-engineer it:

#1: Look at both the HIG for iOS and Material Design Guidelines for Android.

Dig into both the HIG and MDG because they will tell you at a base level what the standards are for each platform without customization.

#2: Take screenshots of apps you use, bring them into your design tool, and start picking them apart.

Start blocking them out using a 4/8pt grid to see what components are used, where they’re used, how they’re sized, and what context they’re used in.

See where the rules are adhered to, and note where the rules are broken.

#3: Check application pattern libraries to see how real apps are composed/laid out

I’m not talking about Dibble or Behance here, I’m talking about combing repositories of actual application screenshots that are used by millions of people every day, and seeing how they do it.

This will show you the general layout of every single application, platform to platform, what components are standard, what can be customized, and where custom components have been created.

If a component looks non-standard, it’s safe to assume that it’s custom, in which case pick it apart too and see how it was designed, and how it works.

ADDITION: Check Mobbin’s Dictionary section for a whole lot more detail as to what patterns are called in a more cross-platform fashion, what they look like, and how they are used in the context of real-world applications.

#4: Keep practicing

Build out your own UI’s constantly. Watch YouTube tutorials constantly. Live in your design software every single day.

Bringing it all together

In summary:

1. Native design can differ heavily from cross-platform web design.
2. The differences can be obscure and sometimes difficult to fully grasp.
3. Patterns, defaults, and standards get modified regularly on native platforms; beware.
4. In order to learn native design (not just pretty flights of fancy on Dribble and Behance, but real, actionable native UI design), read the HIG and MDG, study real apps, pick them apart, and build out your own UI’s constantly.

It can feel like a tall order to include native UI in your stack outside of responsive design, and believe me when I say that it is not only well worth your time, but it is also in extremely high demand across the design industry, and can give you a competitive advantage that can be hard to outmatch.

Nick Lawrence Design
Website | Portfolio