First off this will be a four-part series and will cover mobile, web, watch and tablet design which makes it a four-part series.

I have been designing way too much the past couple of days which is expected as I a the sole designer at my current company so it's during this time that I have learnt quite a lot of stuff about designing the “small things.”

UI/UX design is a very broad field that seems to have no end just like the galaxy but there are things that have been there to guide design. Junior designers barely get to know most of this stuff despite the availability of resources.

Growing as a designer you learn lots of stuff courses never tell you about things like bottom sheets, modals and stuff like that (which is why we are here actually) so I will go through one by one and how they are used (for both Android and iOS.

I will be using Google’s Material design which a design system that was developed by Google in 2014. It is based on the principles of physical paper and ink, but applied to digital interfaces. It uses more grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows.

In the case of Apple I will be using Apple’s Human Interface Guidelines (HIG) are a set of recommendations for designing and developing apps for Apple platforms. They cover essential information about platforms, foundations, patterns, components, inputs, and technologies.

A badge is a small, filled oval containing a number that can appear on an app icon to indicate the number of unread notifications that are available. After people address unread notifications, the badge disappears from the app icon, reappearing when new notifications arrive. People can choose whether to allow an app to display badges in their notification settings.

Badges show notifications, counts, or status information on navigation items and icons (According to Google’s material design guidelines).

They are the red dots, usually with a number inside, that appear on the app icons of your home screen, in the App Library, or on both or neither. Notification badges indicate that you have unread notifications from that app.

In the case of Apple, a notification can present a customizable detail view that contains up to four buttons people use to perform actions without opening your app. For example, a Calendar event notification provides a Snooze button that postpones the event’s alarm for a few minutes.

This UI pattern is present in both Android devices and iOS devices but on the iOS side, they are called notification badges.

For best practices;

For Android

For iOS

Checkboxes let users select one or more items from a list, or turn an item on or off. These are commonly used with surveys and stuff like that. Basically things that need one or more options

Google’s material design system advises that Checkboxes should be used instead of switches if multiple options can be selected from a list

In the case of Android, Radio buttons or Switches can be used alternatively for selection controls.

Apple defines a checkbox as a small square button that’s empty when the button is off, contains a checkmark when the button is on, and can contain a dash when the button’s state is mixed. Unless a checkbox appears in a checklist, a descriptive label follows the button.

A radio button is a small, circular button followed by a label. Typically displayed in groups of two to five, radio buttons present a set of mutually exclusive choices.

Radio buttons are the recommended way to allow users to make a single selection from a list of options.

Only one radio button can be selected at a time.

Radio buttons are not common with Apple design as they seem to make content look clustered and in most cases toggles are used. They are however very common with Androids especially in the settings.

Sheets

These are used by both companies and there are two types of sheets on both sides.

Starting with Google, it has bottom sheets and side sheets.

Bottom sheets show secondary content anchored to the bottom of the screen.

Bottom sheets display supplementary content and actions on a mobile screen. They are a very versatile concept that can be used in different modes and with different heights.

They can have a drag handle or not have one depending on the way you want it to operate basing on the content it holds as well.

The other type of sheets is called the side sheets which are mostly used with larger screens.

Side sheets show secondary content anchored to the side of the screen.

There is two types of side sheets; standard side sheet and the modal side sheet

Read more here