Botones y su variedad.

La historia de los botones en imágenes del jefe de diseño de Dmitry Ukolov : enlaces de texto, esceptomorfismo, diseño plano y material.


Cómo todo empezó


En los primeros días de Internet, todo el contenido estaba en enlaces de color de texto. Más tarde, los botones parecían indicar la transición o iniciar una acción, pancartas publicitarias clicables del tamaño de botones modernos, etc. Los botones solían llamar la atención sobre sí mismos a través de la animación de resaltados, gifs de imágenes, transfusiones y patrones de arcoíris, pero esto se refería principalmente a sitios web.


En las interfaces, los desarrolladores utilizaron otros métodos para separar el botón del resto de los contenidos de la pantalla. Esto se hizo debido a sombras o trazos, cuando los botones permanecieron neutrales y ciertamente no llamativos. Y si todavía usabas colores, entonces parecía que elegías un gotero al azar.


Estoy seguro de que hay explicaciones tecnológicas para todo esto, pero no soy un especialista técnico y lo aprecio con mis ojos y emociones.


imagen


Skeuomorphism y botones


¡Había más! Los botones se volvieron cada vez más intrincados: se agregaron volumen, se pintaron en diferentes colores para atraer más atención de los usuarios, los hicieron "vidrio", se les ocurrió una forma, no solo un rectángulo y un rectángulo con esquinas redondeadas, sino también con forma redondeada y ovalada, a veces incluso la forma de un botón Era difícil llamar a algo específico y mucho más. El skeuomorfismo y todo esto durante bastante tiempo gobernaron la pelota en el diseño web. Gracias a Apple, que revolucionó los dispositivos móviles y comenzó a transferir las herramientas físicas habituales a la interfaz móvil para que el usuario no se pierda. Los desarrolladores de aplicaciones y juegos corrieron para Apple, y comenzó: una calculadora, notas, reproductores de audio, mezcladores de DJ, etc.


imagen


Plano


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


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


imagen
imagen


Material design


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


imagen


imagen
«»


imagen


imagen
Material design



CTA (Call to Action)


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


imagen
«» Youtube



– , . , . , , – .


imagen
lagenceversions


, ,


imagen
beaconrelief



imagen
aconstitucion.com.ar


«»


. , . .


imagen
villerdl.ca



, . .


imagen
brandlovescore


, , , . , - ?


¡Prueba, experimenta, sugiere e inventa!
Cómo cambió el botón de 2009 a 2017.


imagen
Wojciech dobry


imagen
Seth coelen


All Articles