TWO MAJOR PLATFORMS FOR DESIGNING

Designing an app is the mainstay of a development process. Before aiming to design, developers study the scope document, understand the app purpose and research specific apps to get the flow clear.

Both android and iOS follow different guidelines, therefore, the task of designing the wireframes becomes tricky. It’s because the user interaction of both the platforms is different.

Let’s take a look at the designing principles of both these platforms as well; (TWO MAJOR PLATFORMS FOR DESIGNING)

App Icons

App Icons embraces the communication between the users and business. These icons not only stands out on the home screen, it appears throughout the device, For instance in the Settings screen, Search Results. Hence, the icons should be beautifully designed that creates an impact on users.

For instance, Camera icon. The icon in iPhone is designed using the light and dark shade of grey colour in the background elevating the camera image. Whereas, in Android, the icon is designed reflecting the idea of how it works.

Device Buttons

Every device has a standard set of buttons at the bottom. iPhone consists of a single button placed at the center in a circular shape known as Home Button. Android, on the other hand, consists of 3 three buttons. Home Button, Recent Apps Button and Exit Button that react on your finger touch.

Navigation

Navigation is the significant element of any app. It makes easy for users to tour the app. iPhone usually follows tab navigation. For instance, iPhone Facebook app has tabs at the bottom. The pane is translucent in colour with icons stating the idea of the view. You cannot place the tabs at the top because it’s inimical to the designing guidelines.

Button Styles

Below are the three different styles of button:

Floating Button: These buttons float above the UI with the primary action attached to it. It seems as if the button is embossed on it. These buttons have a unique purpose and not meant to use in every app.

In iPhone, there is no such component like floating action button. Developers represent floating buttons placing a simple button in the view. They add Coregraphics framework in the project and write the block of codes in the implementation file to convert this core component into the floating button.

Moreover, in Android, this style of button is listed in the library. Developers simply drag and drop the button and set few properties to make it float above the UI.

Raised Button: These buttons are placed in the UI to add effects to the simple view. For instance, submit button in Registration View. You click on the button to submit your details and the colour of the button changes to a darker shade for a while.

In iPhone, developers place the button inside the view and set requisite properties. The colour of this style of buttons changes when they change their state. For instance, the colour of the selected state varies from the unselected state. They are probably found in rectangular rounded shape.

Compared to iPhone, Android has different styles of buttons listed. Alike iPhone, the colour of button changes with the change in state. They are found in rectangle shape but depending on the requirement, size and shape may vary.

Flat Button: These buttons have an opaque surface with the text highlighted in the view. They are usually used in the dialogue box or message box. For instance, the image above displays the style of flat buttons used in iPhone and Android.

In iPhone, usually buttons are aligned in a single row  whereas in  Android, they are placed at the bottom right corner separately.(TWO MAJOR PLATFORMS FOR DESIGNING)

Action Sheets

Action Sheets is the widget that slides up from the bottom displaying a list of actions relevant to the context of the current view.

In iPhone, the sheet animates using the bottom-top effect with a cancel button as a separator. The sheet dismisses on click of any of the listed action or cancel button. In iPad, the action sheets appear in the Popover view. The view disappears when touched anywhere outside.

Cards

Cards is a convenient tool to display content of various forms whose size and supported actions may differ substantially. For instance, images with caption or listing registered user personal details or listing news feed with ratings, likes and comments.

In iPhone, there is no such component called Cards. Developers represent cards using a core component UIView outlining it with the color properties. As cards are designed in the view using the core component UIView, developers are required to write a block of code to add shadow effect for the separator.

Whereas in Android, you will find cards component in the library with a shadow effect. Therefore, there is no need to write extra block of codes to add shadow effect separately. Developers use it to display various form of contents such as images with captions, news-list, user details etc…(TWO MAJOR PLATFORMS FOR DESIGNING)