Buttons and their variety

The history of buttons in pictures from the head of design by Dmitry Ukolov : text links, skeuomorphism, Flat and Material design.


How it all began


In the early days of the Internet, all content was in text color links. Later, buttons appeared to indicate the transition or start an action, clickable advertising banners the size of modern buttons, etc. Buttons used to draw attention to themselves through the animation of highlights, gifs of images, transfusions and rainbow patterns, but this mainly concerned websites.


In the interfaces, the developers used other methods to separate the button from the rest of the contents of the screen. This was done due to shadows or strokes, when the buttons themselves remained neutral and certainly not flashy. And if you still used colors, then it seemed that you randomly poked a dropper into the color.


I am sure that there are technological explanations for all this, but I am not a technical specialist and appreciate it with my eyes and emotions.


image


Skeuomorphism and buttons


There was more! Buttons became more and more intricate: they were added volume, painted in different colors to attract more attention of users, made them “glass”, came up with a shape - not only a rectangle and a rectangle with round corners, but also with rounded and oval, sometimes even the shape of a button it was difficult to call something specific and much more. Skeuomorphism and all this for quite some time ruled the ball in web design. Thanks to Apple, who revolutionized mobile gadgets and began to transfer the usual physical tools to the mobile interface so that the user does not get lost. Developers of applications and games ran for Apple, and it began - a calculator, notes, audio players, DJ mixers, etc.


image


Flat


. , , , . , , ! , , , , , . , , , – .


. , , , , – . . , , - - . , . , , , , . « », .


image
image


Material design


Material design, , . Google : , , « », . . Google.


image


image
«»


image


image
Material design



CTA (Call to Action)


: «», «», «» .. . , , , , ..


image
«» Youtube



– , . , . , , – .


image
lagenceversions


, ,


image
beaconrelief



image
aconstitucion.com.ar


«»


. , . .


image
villerdl.ca



, . .


image
brandlovescore


, , , . , - ?


Try, experiment, suggest and invent!
How the button changed from 2009 to 2017.


image
Wojciech dobry


image
Seth coelen


All Articles