Botões e sua variedade

A história dos botões nas imagens da cabeça do design de Dmitry Ukolov : links de texto, skeuomorfismo, design plano e material.


Como tudo começou


Nos primeiros dias da Internet, todo o conteúdo estava em links de cores de texto. Posteriormente, os botões apareceram para indicar a transição ou iniciar uma ação, banners publicitários clicáveis ​​do tamanho de botões modernos etc. Os botões costumavam chamar a atenção por meio da animação de destaques, gifs de imagens, transfusões e padrões de arco-íris, mas isso preocupava principalmente sites.


Nas interfaces, os desenvolvedores usaram outros métodos para separar o botão do restante do conteúdo da tela. Isso foi feito devido a sombras ou traços, quando os próprios botões permaneceram neutros e certamente não chamativos. E se você ainda usava cores, parecia que você colocou um conta-gotas aleatoriamente na cor.


Tenho certeza de que existem explicações tecnológicas para tudo isso, mas não sou especialista técnico e aprecio isso com meus olhos e emoções.


imagem


Skeuomorfismo e botões


Havia mais! Os botões se tornaram cada vez mais intrincados: foram acrescentados volumes, pintados em cores diferentes para atrair mais atenção dos usuários, transformados em “vidro”, com uma forma - não apenas um retângulo e um retângulo com cantos arredondados, mas também com arredondados e ovais, às vezes até a forma de um botão era difícil chamar algo específico e muito mais. O ckeuomorfismo e tudo isso por algum tempo dominaram o design da web. Obrigado à Apple, que revolucionou os dispositivos móveis e começou a transferir as ferramentas físicas habituais para a interface móvel, para que o usuário não se perca. Os desenvolvedores de aplicativos e jogos correram para a Apple, e ela começou - uma calculadora, notas, players de áudio, mixers de DJ, etc.


imagem


Plano


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


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


imagem
imagem


Material design


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


imagem


imagem
«»


imagem


imagem
Material design



CTA (Call to Action)


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


imagem
«» Youtube



– , . , . , , – .


imagem
lagenceversions


, ,


imagem
beaconrelief



imagem
aconstitucion.com.ar


«»


. , . .


imagem
villerdl.ca



, . .


imagem
brandlovescore


, , , . , - ?


Tente, experimente, sugira e invente!
Como o botão mudou de 2009 para 2017.


imagem
Wojciech dobry


imagem
Seth coelen


All Articles