Diseño de Botones Durante los Años: La Línea de Tiempo de Dribbble

Botones. Con ellos, finalizamos las compras en Internet, iniciamos sesión en nuestra aplicación bancaria y enviamos formularios completos con nuestra información más personal. El diseño web está creciendo a un ritmo increíble, y los estilos parecen cambiar de un mes a otro. En solo unos años, hemos pasado de los enlaces de texto al esqueuomorfismo a un diseño plano. La navegación es uno de los elementos más importantes del diseño web, y el botón de llamada a la acción (o call to action) es su herramienta más sólida.

En este artículo, rastrearé ocho años de historial de diseño de botones web basado en Dribbble.

La Línea de Tiempo de Botones en Dribbble

En 2009, se creó Dribbble: una plataforma para diseñadores de todo el mundo que compartió pequeñas piezas de sus proyectos actuales. Usando Dribbble, podemos seguir la historia de las tendencias y el diseño de los botones en los últimos ocho años. He pasado por algunos miles de disparos de Dribbble para crear una línea de tiempo interactiva de estilos de botones:

Haz clic en el botón de arriba para navegar por la línea de tiempo de Dribbble.

2009

En este año, Internet cumple 40 años, y los primeros “disparos” aparecen en Dribbble. El diseño de los botones está dominado por la escala de grises. Los degradados delicados, las esquinas redondeadas y las sombras aparecen en casi todos los diseños de los botones. Esta estética se refiere a los botones del sistema nativo.

Wojciech Dobry,  Dan Cederholm, Josh Bryant, Dribbble, Sarah Parmenter, Matthew Smith

2010

El año en que se crea Instagram. La forma de los botones no cambia drásticamente, pero hay muchos más colores, más detalles (como sombras interiores) y muchas más tipografías decorativas.

Wojciech Dobry, Morgan Allan Knutson, Troy Bergland, Claudiu Cioba, Liam McKay, Jared Christensen

2011

CSS3 estrena ese año, y el número de usuarios de Internet crece a mil millones. El esquemorfismo todavía reina, y muchos diseñadores están desarrollando este estilo de una manera muy creativa. No puede encontrar ninguna regla para aplicar sombras o iluminación aquí, pero puede estar seguro de que todos estos elementos están presentes en cada proyecto.

Wojciech Dobry, Julien Renvoye, Claudiu Cioba, Meagan Fisher, Josh Hemsley,Jonathan Moreira

2012

El declive y la forma final de esquemorfismo, y el comienzo tímido del diseño plano. Este año es, con diferencia, la forma más desarrollada de skeuomorphism, donde algunos diseñadores han alcanzado el nivel maestro en este estilo, mientras que otros han comenzado a buscar algo nuevo.

Wojciech Dobry, Eduardo Santos, Mike | Creative Mints, Maykel Loomans, Ian Collins,Dawid Liberadzki

2013

En este año, Apple definitivamente se mueve desde el esquemorfismo, lanzando iOS7. Sin dudas, este año es el comienzo de la tendencia que continúa hoy — el diseño plano. Casi todos los diseñadores de Dribbble, en un momento, abandonan cualquier intento de dar una tercera dimensión a su aplicación o botones web y deciden desaparecer.

Wojciech Dobry, Cosmin Capitanu, Eddie Lobanovskiy, Jonathan Moreira, Riki Tanone

2014

Google lanza Material Design. Sin embargo, muchos diseñadores no siguen este estilo por completo. Este es un año bastante interesante, porque de repente todo el mundo comienza a usar el estilo del botón fantasma o botones planos. Aparecen en la mayoría de los disparos en Dribbble. Dos fronteras Pixel con colores vibrantes — eso es 2014.

Wojciech Dobry, Eric Hoffman, Ramil Derogongun,Mason Yarnell, Colin Garven, Bill S Kenney

2015

Solo unos meses después de escuchar el anuncio de Material Design por Google, los diseñadores UI se enamoran de esta guía. La superficie plana del botón con una sombra delicada debajo indica el impacto significativo de Material Design en las tendencias actuales. Mira cuántas personas aplican este estilo a sus proyectos.

Wojciech Dobry, Victor Erixon, Leo Leung, George Vasyagin, Hoang Nguyen, Joshua Krohn

2016

Los diseñadores se aburren, por lo que nuevos elementos para mezclar con Material y Diseño Plano. Los gradientes aparecen en la superficie de los botones, no para enfatizar la tercera dimensión sino para enfatizar el material del botón en sí. El botón gana sombras de color y comienza a brillar.

Wojciech Dobry, Anastasiia Andriichuk, Gleb Kuznetsov✈, Ghani Pradita, Kristofor, Ben Mingo

2017

Tengo mucha curiosidad de cómo veré este año en otros ocho años. En lo que va de año es, por un lado, un año de minimalismo y diseño plano. Por otro lado, todavía estamos buscando nuevas formas. Estamos en una etapa en la que no somos tecnológicamente limitados; estamos limitados sólo por los marcos de tendencias y moda.

Ben Cline, Anton Aheichanka, Vera Voishvilo , George Vasyagin, Ghani Pradita

¿Qué sigue?

¿Cuánto tiempo seguirán evolucionando los estilos de los botones? No lo sé. Solo sé que lo harán. Los motivos de la evolución pueden variar: el cambio tecnológico, la creciente conciencia del diseñador, el aburrimiento.

No se puede negar que los botones están esperando otro cambio. ¿Tal vez este cambio será su muerte? Con gestos, interacciones intuitivas, AR, VR e interfaces de sonido, ¿aún necesitaremos los botones en los que hemos trabajado durante años?