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](https://habrastorage.org/getpro/habr/post_images/c06/003/cb5/c06003cb582d76752abdd9a5cf795d53.png)
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](https://habrastorage.org/getpro/habr/post_images/05d/1b2/01b/05d1b201be508c9204550fe196478919.jpg)
Plano
. , , , . , , ! , , , , , . , , , – .
. , , , , – . . , , - - . , . , , , , . « », .
![imagen](https://habrastorage.org/getpro/habr/post_images/28f/79a/812/28f79a812cc0dfee1e0035c291236b2e.jpg)
![imagen](https://habrastorage.org/getpro/habr/post_images/2d0/75d/4dd/2d075d4dd06e8cdc6a37975ff9804f78.gif)
Material design
Material design, , . Google : , , « », . . Google.
![imagen](https://habrastorage.org/getpro/habr/post_images/851/604/533/851604533e77a38febdf3d6ac7ace955.png)
![imagen](https://habrastorage.org/getpro/habr/post_images/abb/849/5d4/abb8495d4136c13803e96a1a3d743ed7.png)
«»
![imagen](https://habrastorage.org/getpro/habr/post_images/d46/996/90c/d4699690c9a80ac947bbb9d6d4553012.png)
![imagen](https://habrastorage.org/getpro/habr/post_images/df8/cdb/538/df8cdb538fdc517e3da02ca3008f43fa.png)
Material design
CTA (Call to Action)
: «», «», «» .. . , , , , ..
![imagen](https://habrastorage.org/getpro/habr/post_images/957/8c3/97f/9578c397fedbfde451f187402bb001d0.png)
«» Youtube
– , . , . , , – .
![imagen](https://habrastorage.org/getpro/habr/post_images/1ff/a4a/6fb/1ffa4a6fb86c15c79ee79175cb79e46c.gif)
lagenceversions
![imagen](https://habrastorage.org/getpro/habr/post_images/cf4/741/46a/cf474146a5c2eac8e19dd3665556e903.gif)
beaconrelief
![imagen](https://habrastorage.org/getpro/habr/post_images/068/403/9b5/0684039b5dbced2109db8f1f06e1ec76.gif)
aconstitucion.com.ar
«»
. , . .
![imagen](https://habrastorage.org/getpro/habr/post_images/30c/a35/0fa/30ca350fa0d4f0e82de7ee6621b05893.gif)
villerdl.ca
, . .
![imagen](https://habrastorage.org/getpro/habr/post_images/b3c/f46/cf1/b3cf46cf17ae76de18e64891e62b88c2.png)
brandlovescore
, , , . , - ?
¡Prueba, experimenta, sugiere e inventa!
Cómo cambió el botón de 2009 a 2017.
![imagen](https://habrastorage.org/getpro/habr/post_images/4f3/23e/d81/4f323ed810c5e8320c59145184142dd0.gif)
Wojciech dobry
![imagen](https://habrastorage.org/getpro/habr/post_images/bd8/4ee/79b/bd84ee79bf04be9884ae5412adf094c6.gif)
Seth coelen