Custom vs Standard UI elements

image

Each of you noticed that some apps have the same elements across different applications. In most cases, those are default UI components that operating system suggests using. These components may be anything from pop up notifications to the controllers like drop-down menus, sliders, back buttons, etc. Those all are native components.

 

As you are not tight to use only native elements and strictly follow the brand book, you are allowed and welcome to create your own UI or customize the suggested elements. As long as you stay reasonable and the app is easy to understand and use, you are all fine.

 

From the developer’s point of view, there is a big difference. When you build an app with default components, you just add those from a set and the app is good to go. The situation is different when you develop an app with a custom UI. It is not the end of the world, yet it requires additional work from a developer.

 

Here are some examples of custom vs standard elements look, specs and efforts required for an implementation:

 

Floating Action Button with overflow menu 

float button standard

Material Design specs

patina floating button

Our solution in Patina project

custom floating button

Work by Dave O Brien for Eventbrite

This element would take up to 5 hours of developer’s work

 

Swipe to refresh

swipe2refresh standard

Material Design specs

pull2refresh custom

Work by Ramotion

This element would take up to 40 hours of developer’s work

pull2refresh2

Work by MDS in Roadie

This element would take up to 8 hours of developer’s work

pull2refresh3

Work by Yup Nguyen

This element would take up to 16 hours of developer’s work

pull2refresh4

Work by Divan Raj

This element would take up to 16 hours of developer’s work

 

Navigation drawer or a sidebar

nav_drawer_standard

Material design specs

nav_drawer1

Work by Charles Patterson

This element would take up to 24 hours of developer’s work

navdrawer22

Work by Sam
This element would take up to 70 hours of developer’s work

navdrawer2

Work by My.com

This element would take up to 60 hours of developer’s work

navdrawer3

Work by Jakub Antalík

This element would take up to 40 hours of developer’s work

And don’t forget about details. Details make perfection, and perfection is not a detail!

 

Sliders

standard_slider

Material Design Specs

c_slider1

Work by Alex Pronsky

This element would take up to 16 hours of developer’s work

c_slider2

Work by Gal Shir

This element would take up to 80 hours of developer’s work

c_slider3

Work by Virgil Pana

This element would take up to 60 hours of developer’s work

 

So whatever the reason for app customization, you should follow simple rules:

  • Be consistent. In case you dress up some specific elements, for example, buttons on the tab bar, make sure they all are customized on each screen.
  • Keep one style. No matter what, stay close to common sense and keep one style and color schema. Rainbows are only cool when you see them in the sky.
  • Follow design style guide and specs. They were developed for a sole purpose to make it obvious and simple for everyone to navigate through an app.

 

Leave a Reply

Your email address will not be published.