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.
Apple has shifted to flat design since iOS 7 and this shift has sabotaged the essence of app designing. On the other hand, Android has stepped back to skeuomorphism by introducing the essential component Material Design. This component has standardised the designing of Android apps.
Take a quick look at the comparison chart: Flat Design Vs Material Design
The competency to build an ultimate user experience is now seen in Android apps. Developers can easily play with the materials and add various effects like shadows, animations, gradient and textures to give the view the exact look as the wireframe.
Moreover, Apple is now focusing only on app performance which has made the design integration rigid. As a consequence, developers are prone to write extra lines of code to show the requisite effect in the view.
You have probably got an idea about the intricacies developers face while designing an application.
Let’s take a look at the designing principles of both these platforms as well;
- 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.
Whereas, Android follows drawer navigation. This navigation slides in from left overlaying the view. For instance, gmail app consists of a menu that slides in containing the relevant menu items of the view.
There are other navigation styles too listed in the designing guidelines of both Android and iOS. But above two are the principal navigation styles used in almost every app.
- 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.
- 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.
In Android, it is termed as Bottom Sheets. You will find them in two different styles
Modal Bottom Sheets can be used as an alternative to menus or dialogue. It animates at the 8dp height from the bottom containing appropriate content. For instance, Linkedin app. Sharing content via Share Button animates bottom sheet containing the list of social media forums in a page view. Modal bottom sheets can be best used to deep linking the content from other apps.
Persistent Bottom Sheets slides as a different view in the app. The best example is Map. Taking the cursor on the search bar animates a view from the bottom with a list of locations.
- 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…
- Segment Control
Segment Control is a linear set of two or more segments each listing a different set of data on being pressed.
In iPhone, developers can add five or fewer segments in a segmented control adjusting the layout to equalise the width and height of the segments. Preferably, they use two segments placing the control in the center without disturbing the other elements of the view. For instance, Contacts is designed using two segments in lieu of header while other features are aligned on the tab bar.
Contrary, the material design in Android lists different options including Buttons, Tabs and Selection. Buttons work the same as described above.
Tabs… If you use Whatsapp, you will find three different tabs along with the Page Title at the top left corner. They look like simple tabs but indeed are segments listing the accurate data of the pressed event.
However, Selection is a type of segment that enables the user options via gestures and clues. For instance. If the user wants to delete multiple images from the gallery, the checkbox surfaces at the top left corner of every image allowing him to complete the action.
Wrapping Up
Undoubtedly, the future is apps. And, the designing guidelines of both the platforms are slated above. Now, it’s up to you which platform you choose for your app concept.
