Buttons are the basic element of UI Design. Although they looks very simple, it is very important to design an effective button that will user to take action, such as buy, add to basket or simply bring you to another page. Hence Buttons is considered as CTA (Call To Action).
How’s the button look like in the early UI Design?
In the early days, there was not any mobile apps, buttons only exist in PC Operating System such as Windows. The basic concept of a button was based on the principle of “something that differentiates itself from the background” – by using a border (stroke), gradient and drop shadow. This makes it easily recognized as a clickable element.
What are the different styles of Buttons in modern era?
The concept of Skeuomorphism is making a button look like a real life button (from the texture, size, etc).
Flat Design Button
The Flat Design Button is a way to represent things in digital media without trying to reproduce the appearance of physical things. As a result, it is designed with minimalistic look, dismissing the heavy visual effects that have been traditionally used.
Almost Flat Design and Floating Action Button
Almost Flat Design (AFD) and Floating Acton Button (FAB) is an evolution of the flat design button. This style is mostly flat but using a little effect such as shadow or highlight to create some depth in the UI. Google Maps, part of the Google Material design is a good example of FAB. Through its FAB, Google Maps creates a great user experience that has positioned itself as the app for getting direction.
Another great example is Evernote. The buttons in the app is designed with subtle shadows on the navigation bar, with the green as its primary colour which acts as the main identifiers. Colour is very important in the AFD and FAB Style.
Ghost Buttons are those transparent and empty basic shaped buttons, such as square or rectangular. Ghost buttons are designed with a thin line border (stroke), which has active and inactive state. Both Hopper and Lufthansa use Ghost Buttons to offer a spectacular clean modern look.
In conclusion every button, either classic or modern, is designed for users to take action. Mobile App is one of the platform that use buttons as its crucial element. When you design a button, it is recommended to start with the primary CTA Buttons, and please keep in mind that designing Buttons is always about creating a smooth interaction and user experience.
Hope you found this article helpful! If you do so, please like and share this post to help others understanding more about UI Design!
Holla at me on Twitter.
Disclaimer: These are my personal views and opinions and not associated with my employer or any other reference on this post. I am also not endorsing any company or service mentioned on this post.