Princípios para Designs Bem Sucedidos de Botões

Existem mil maneiras de projetar e criar botões atualmente e você só precisa passar um tempo no dribbble para ter uma noção deles. Grade parte destes exemplos são exatamente os mesmos, mas, ocasionalmente, há aqueles nos quais se observa um pouco mais de cuidado e atenção na sua elaboração.

Tirando vantagem das maravilhosas novas propriedades do CSS3 nós podemos criar alguns botões elegantes e estilosos sem nem chegar perto de imagens e ter estilos reservas para navegadores antigos. Você pode preferir criar seus botões diretamente no CSS, ou você pode utilizar sua ferramenta de layout preferida, mas é importante pensar com cuidado em como o design do botão se encaixa no contexto.

É muito fácil simplesmente pegar um 'PSD de elementos de interface' que alguma alma caridosa tenha compartilhado de graça (e que sem dúvida terá botões inspirados na Apple). Mas por que não tirar um momento para considerar se tal estilo de botão é apropriado no contexto do seu design e considerar se existe espaço para criar alguma coisa um pouco mais original?

Reciclar o estilo de botão de alguém é aceitável, poupa tempo, mas não há mal em tirar um momento para entender o design e composição do seu botão (ou de outra pessoa) em mais detalhes. Como eles foram pensados? Eles se encaixam na interface/contexto/imagem? Há uma chance de criar algo único? Meus botões são proeminentes o bastante? Eu preciso de botões primários, secundários e terciários? Eles se diferenciam o bastante entre eles? Eles são bonitos?! (Por que não? Nós todos queremos fazer design de coisas bonitas, não é?!).

Aqui estão 10 coisas simples que eu sempre pensei quando estava fazendo design de botões. Eu não vou compartilhar idéias de como usar efeitos de camada no Photoshop mas sim alguns princípios de design simples que podem ajudar bastante na otimização do design de seus botões e outros aspectos da interface de usuário em geral.

1. Combinando com a Identidade Visual

É importante que seus botões combinem com o contexto visual onde estão inseridos. Isto pode significar se encaixar em uma paleta de cores, estilo gráfico ou pegar ideias de alguma forma de guia de estilo da marca ou logo. Talvez existam formas, texturas ou estilos de design proeminentes que você possa aproveitar. Talvez o logo possua um aspecto circular e você possa utilizar isso nos seus botões e outros elementos que conduzam a ações.

Se uma interface usa predominantemente cores lisas então talvez botões brilhantes ao estilo Apple não sejam o caminho a seguir. Se você puder, aproveite a oportunidade de extender a marca através da interface utilizando formas, efeitos e cores apropriados ou outras formas de embelezamento.

2. Correspondendo ao Estilo do Contexto

Seguindo o que foi dito acima, pare por um momento antes de abrir seu 'PSD de Elementos de Interface de Usuário'. É fácil pegar gradientes, sombras, bordas etc. mas pense por um momento se é a escolha certa somente corresponder à marca mas também à interface onde os botões vão estar inseridos e se eles precisam parecer muito 'como botões'.

Botões podem ter que parecer como botões dentro de aplicativos e em dispositivos móveis, por exemplo, mas em websites tavlez haja espaço para fazer algo um pouco diferente com seus botões e chamadas para ação.

3. Garanta que os Botões Tenham Contraste Suficiente

Com tantos designs de interface sendo inspirados pelo estilo dos sistemas operacionais da Apple, particularmente em muitos PDS's com elementos de interface de usuário, os botões podem ficar um pouco perdidos no meio de outros elementos utilizados na interface, diluindo o seu importante potencial. Tente utilizar cores, tamanho, espaço negativo e tipografia para garantir que seus botões tenham o peso visual necessário para se destacar do resto da interface.

4. Considere Botões Arredondados ou em Diferentes Formas

Seguindo do que já foi dito, se existem muitos elementos com bordas arredondadas no design, considere utilizar botões com bordas arredondadas também ou talvez alguma outra mudança na forma. Isto pode lhe dar um contraste um pouco maior que garanta que suas chamadas para ação tenham o destaque que elas precisam.

5. Tire Ênfase de Elementos de Interface Secundários

Se você está tentando fazer um estilo inspirado em sistemas operacionais ou está utilizando elementos pré-desenhados em um PSD então é provável que seus elementos de interface terão, predominantemente, formas retangulares com bordas arredondadas. Considere reduzir o nível de embelezamento de elementos que podem se parecer menos como botões.

Por exemplo, menus de seleção evidenciados, controles segmentados, menus de ação customizados podem todos ter as mesmas formas arredondadas mas usando menos sombras, bordas, molduras, gradientes ou outros efeitos podem ajudar a reduzir sua riqueza e promover o estilo do botão.

6. Combinando Cores de Traços/Bordas

Most buttons we see out there have some form of border or stroke on them. Loosely speaking, if your button is darker than the background on which it sits use a dark stroke of the general button color. If the reverse is true then go for a stroke that's a darker shade of the background color. If you stick with the former and use it on a darker background I find it can make the button edges a little 'dirty'. Using the latter can also help make your button really pop. I consider this to be a general design principle when dealing with strokes/borders in web design.

A maioria dos botões que vemos possuem alguma forma de borda ou traço. Falando francamente, se seu botão é mais escuro que o fundo no qual está situado use um traço mais escuro que a cor geral do botão. Se o contrário for verdade então opte por um traço que seja uma sombra mais escura da cor de fundo. Se você seguir o primeiro caso e utilizá-lo em um fundo de tela mais escuro, eu acho que isso pode fazer com que as bordas do botão fiquem um pouco 'manchadas'. Utilizar o segundo pode também te ajudar a fazer seu botão realmente se destacar. Eu considero isto um princípio geral de design ao se lidar com traços/bordas em web design.

7. Tenha Cuidado Com Sombras Embaçadas

Com o passa dos anos eu sempre jurei pela minha 'Lei da Sombra'. A 'Lei da Sombra' determina que sombreamentos funcionam melhor quando um elemento é mais claro que o plano de fundo. Se um elemento é mais escuro do que o seu plano de fundo então o sombreamento deve ser usado sutilmente. Assim como na combinação de cores de traços e bordas, eu considero isto um princípio geral de design que se aplica a todos elementos de interface de usuário.

8. Iconografia Sutil Pode Dar Indicações

Além de ser um pequeno detalhe que pode diferenciar seus botões de elementos de interface similares, o uso de iconografia simples como setas pode passar um senso de ação e uma pequena indicação do que vai ocorrer quando o usuário clicar.

Por exemplo, uma seta apontando para a direita depois de um texto em um botão pode passar ao usuário um senso de movimento ou de deixar a página. Uma seta apontando para baixo pode sugerir que algum conteúdo será progressivamente mostrado abaixo, ou talvez algum tipo de menu vai abrir.

9. Considere Estilos Primários, Secundários e Terciários

Se você está desenhando uma interface na qual existam muitas ações e funcionalidades na tela pode ser importante estabelecer alguma linguagem visual com seus botões através de estilos primários, secundários, terciários e potencialmente até mais.

Considere reservar as cores mais fortes e impactantes para seus botões primários e usar progressivamente menos força ou saturação à medida que reduz a importância. Assim como com cores e sombras, considere reduzir tamanho, espaço negativo, tamanho do texto e nível de embelezamento para reduzir ainda mais o peso visual dos botões que não são primários.

10. Sempre Faça Indicações de Estado

Este nem é tão difícil, mas muitas vezes só é considerado no final do processo de design. Sempre passe pelos principais estados exigidos para seu botão para garantir que eles sempre forneçam ao usuário informações sobre o seu contexto. Usuários provavelmente terão um modelo mental de como um botão funciona no mundo real pois eles o utilizam em vários estados. Simples ajustes de CSS com sombras, bordas e gradientes e afins podem dar ao usuário respostas simples e um toque de beleza!

Conclusão

Como designers vocês todos terão seus próprios processos. Eu aposto que em grande parte do tempo isto involve mexer sua cabeça pra longe da tela, incliná-la um pouco, apertar os olhos e dizer 'É isso mesmo!'. Esta é uma parte da diversão de fazer um design e claro que alguns designers talentosos podem conseguir acertar fazendo somente isto, mas eu acredito que é sempre recomendável passar por um processo interno de comentários, interrogações e racionalizações sobre as decisões de design que você está fazendo.

Não há mal em reutilizar ou se apoiar em estilos pré-desenhados e elementos de interface de usuário, eles obviamente podem salvar muito tempo. Pode ser até o caso que alguém já tenha feito exatamente o que você está procurando de maneira gratuita e com perfeição em cada pixel. Porém, eu não acredito que há mal em ter um entendimento mais profundo do processo de design e arte por trás do que você está criando e utilizar em suas decisões de design no futuro.

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!