1. Understand and use your platform's design system components and guidelines

1. Understand and use your platform's design system components and guidelines

Example from MacOS guidelines
Example from MacOS guidelines

Why

For whatever platform you build apps for, there are guidelines you can read and follow. Web, iOS, Android, TV, Watch and so on. All of them have their own guidelines and design systems.

The goal of a platform design system is to streamline the user experience between the apps the people use. Your app/website always lives next to other apps and websites. Therefore it's important for users to have a seamless user experience and not to have to learn how each app works from the beginning.

For example, iOS has the swipe gesture for list items. If you are building an iOS app and have screens with lists, you should use it.

image

Focus on the users not yourself

I've met many people and companies that decided to build their own fully custom components and gestures in order to make their app "look unique". I find this way too selfish and arrogant. Not respecting platform guidelines is a huge mistake in my opinion. They are there for a reason. And the reason is design consistency and usability.

The companies that created these platforms (Apple, Google, etc) have spent a lot of time and money to decide how an alert or a list should look and work like. So follow their guidelines and respect their expertise.

This doesn't mean that you shouldn't make your app branded with its own illustrations and colours. It only means that you shouldn't violate the platform guidelines.

Trust me, there is almost no case that your users will complain that "your app looks a lot like an app made by Apple or Google" This is actually a benefit for them, because they don't have to think when they use it. They are already familiar with the layout, interaction patterns and overall UI composition.

Going the fully custom route is most of the times about you, and not your users. Most of the times it's about making yourself feel that you are unique, and that your app stands out.

Or sometimes people go the custom route because they want to keep their codebase simple and small. They a single UI kit that works for iOS, Android and Web and use it everywhere which is also wrong. You can't use the exact same component you use for web, in iOS and in Android. Each platform is different.

So please, put your users first and design what's best for them. Not for your team or brand.

The guidelines

For web

Web is not owned by anybody, therefore there are no 100% official design guidelines on how things should work. However you can define these guidelines first by observing the most commonly used websites and apps and also by using mature UI kits.

For Apple products

For Android

  • Material design
  • Since the guidelines are not complete enough and don't provide many examples, you can also:
    • Download the apps made by the Google team and deconstruct them. Research also the pre-installed Android apps.
    • Use this paid UI kit https://materialdesignkit.com/