What is a cross-platform mobile app and how is it different from a native app? When should you choose a cross-platform approach, and what are its advantages and disadvantages. What a designer should know in order to effectively interact with developers and how to approach the design process correctly – says Max Shtompil, product designer at Welltech and curator of the Mobile Apps Design course at the Projector Online Institute.

A native app is developed using native programming languages such as Swift for iOS and Kotlin for Android. It will only work on the platform it was designed for. A cross-platform application will work on two platforms at the same time.

Advantages of a cross-platform approach:

Disadvantages of the cross-platform approach:

For example, you can pay attention to such well-known cross-platform applications as Pinterest, Skype or eBay. Even Instagram, once started as a cross-platform application, now includes some functionality written in React Native. Coinbase, on the contrary, switched from native development to React Native a year and a half ago.

Below is a diagram that explains how this works from a development perspective

Cross-platform application design: two approaches

There are two approaches to cross-platform application design:

#1 Creating the same visual design for both platforms

Examples of such applications are Pinterest and Coinbase.

When should this approach be used?

For example, consider the Coinbase app, where the main screen has the same design for both platforms, including tabs, buttons, list and icons.

#2 Creating a native design for each platform (can also be found as a platform specific expression).

The developer, in this case, indicates in the code that depending on the platform we show different components.

When should this approach be used?

We can see this in the example of the components on the “About” screen in the Google Pay app: on iOS, the NavigationBar is used, and on Android, the TopAppBar.

Cross-platform application design: where to start

The first thing I would recommend is to talk to the developers and understand what framework and library you will be using. Each library contains its own set of components to help you design your application faster. This is the same component library that we have on both iOS and Android.

It can be universal (one component for two platforms). For example, Slider in NativeBase

Or have multiple components that follow a platform specific approach.

Here, for example, modal windows in Ionic.


If your library does not contain multiple components, you can ask the development team to create them.

Next, you need to decide on an approach to design. If you plan to create a completely custom application, then everything is clear – we just make the same design. But if you want your application to be closer to native applications, then I recommend making native the components that your users are used to in these applications.

For example, time pickers, toggles/switches, modal windows and sliders. Everything else can be done the same. It’s important to remember that even in our native apps, we don’t always follow a native design for everything.

It is also worth noting that some libraries have the ability to call native components, so using them will be cheaper than creating your own components that look the same on all platforms. For example, the Time picker component looks drastically different on different platforms, so using this component natively would be the best option.

Prepare two separate layouts or one universal for all platforms?

I would recommend limiting yourself to one layout, especially if you use constraints and auto layout. This will allow developers to test the behavior of the application on different screen sizes. It is important to develop a design for the smallest size. For cross-platform components, use tags in Figma. However, if the differences between the screens of different platforms are significant, you should consider creating separate layouts.

It’s important to note that this is my personal experience and should be discussed with the team before deciding on mockups.

The process of creating a design can look like this:

In general, cross-platform development is a useful approach for creating mobile applications. However, the choice of suitable tools and technologies depends on the specific task and user needs. In some cases, cross-platform development will be the best solution

Leave a Reply

Your email address will not be published. Required fields are marked *

five × 2 =

This site uses Akismet to reduce spam. Learn how your comment data is processed.