Multiplatform design vs. brand-based design in React Native

At bene : studio we love knowledge sharing to help the community of professionals. With 10+ years and over 100 projects behind us, we have a vast amount of experience. This is why we have launched a knowledge base on our blog with regular updates of tutorials, best practices, and open source solutions.

These materials come from our internal workshops with our team of developers and engineers.

Nowadays, iOS and Android are the two main platforms that define the mobile market. From the point of view of application design and development, we must concentrate on these two platforms if our goal is to reach out to the widest possible range of users.

The early phase of mobile application development is designing the user interface, the success of which can later play a decisive role in the popularity of the application itself. There are two main directions in this regard: design guidelines published by different platform creators, which define the design principles that can be used to present platform-specific components in our application. On the other hand, the appearance of our own brand can play a role in designing the user interface of the app, which has a great marketing value and the application can be linked visually to the brand.

I will examine the different design modes and how to organize the platform-specific style codes simply by using React Native, which is a popular cross-platform framework based on JavaScript. The two edges of the scale are the multiplatform and the brand-based design. It’s between these two methods and it’s worth mentioning the mixed UI design mode.

Multiplatform Design

In this case, the design of the application is determined by the guidelines with each platform. This can be useful if the application has complex functionality and the goal is to let the platform-specific users easily get to know these features. If the Android user knows how to look like the standard search bar on Android, he will recognize all of these standard search bars in every application.

Let’s see an example:

WhatsApp is one of the most famous messaging applications and it’s created by multiplatform design principles. The Android and the iOS version of the app looks really different because they follow each platform’s own guidelines.

Brand-based Design

This direction is recommended in two cases. On the one hand, when the brand that we want to deliver to the users through the application requires a strong visual appearance. These are cases where the brand has strong visual content, for example, a brand of a design office or a variety of art brands. In addition, it is also recommended to build a strong brand-based design if, due to the theme of the application, it is foreseeable that the same user will use the application on several different platforms. It is a great advantage and ease for the users if the same functionality in different platforms has a similar design. In this case, the design can work as a visual anchor for the functionality.

Instagram is a very popular application on the market. It’s available for different devices and its unique, strong UI design is almost the same on Android and iOS.

Mix of multiplatform and brand-based design

This solution is the most recommended if the app wants to reflect the brand’s unique design, but it would like to help users by adjusting the different UI components to the image of that platform. In this case, you need to design the most important functional components in such a way, like a search box or a button, to reflect the guidelines of the platform. In other parts of the application, you can use solutions that can be the same on different platforms and those follow the brand’s unique design.

This category includes Facebook, which has mixed unique design elements and platform specific components too.

Multiplatform Design Example in React Native

If we want to create multiplatform UI elements in React Native, we have to separate these style codes in our project. We have to define which one is part of Android and which one is a part of iOS. The main goal is the clear, understandable code and well-separated style definitions.

I created a very simple React Native component for input group. It has an icon, an input field and a wrapper view.

After that I defined styles. There are many common styles for the component and some unique per platform. If it’s necessary, possible to separate the iOS and the Android specific component in two files, named Component.ios.js and Component.android.js. As you see, I defined the platform-specific styles in other objects and I refer to them at the common style sheet.

The result is a component with separable, reusable multiplatform styles.

Conclusion

There are many ways to design mobile UI components. The main question is what do you want to communicate to your users. If you have a nice brand with a unique design, you should build it for your application, if you want to create a clear, easily understandable application, use common, multiplatform components. Or if you want both parts, use both, but always be consistent. If your search bar on Android follows the material design principles, every search bar in your Android app should look like a material design search bar.

Did you like this? Join us!

Want to ask some questions? Share them with us via e-mail to partner@benestudio.co and we can set up a talk with our engineers.

Fancy working for the studio where you can work on international projects and write articles like this? Check out our open positions!

Looking for a partner for your next project? Check out our services page to see what we do and let’s set up a free consultation.