Você pode gostar de criar seus botões diretamente em CSS, ou pode preferir ir para a ferramenta de layout de sua escolha, mas é importante pensar cuidadosamente sobre como o design do botão vive no contexto.
É muito fácil simplesmente alcançar um pré-projetado ui-elements.fig que alguma alma generosa compartilhou de graça. Mas por que não reservar um momento para considerar se esse estilo de botão é apropriado no contexto do seu design e considerar se há espaço para criar algo um pouco mais original?
Faça algumas perguntas a si mesmo
Reciclar os botões de outra pessoa é bom, economiza tempo, mas não há mal algum em reservar um momento para entender o design e a composição de seus botões (ou de outra pessoa) com um pouco mais de detalhes.
- Como eles são projetados?
- Eles se encaixam na interface/contexto/marca?
- Existe uma oportunidade de criar algo único?
- Meus botões são proeminentes o suficiente?
- Preciso de botões primários, secundários e terciários?
- Eles diferem substancialmente um do outro?
- Eles parecem lisos?! (Por que não, todos nós queremos criar coisas legais, certo?!).
10 Princípios do Design de Botões
Aqui estão meus dez princípios para projetar botões. Não vou dar ideias sobre como usar efeitos no Figma, mas, em vez disso, compartilhar alguns conceitos de design simples e gerais que você poderá usar em seu próprio design de interface do usuário.
1. Marca correspondente
É importante que seus botões correspondam ao estilo contextual. Isso pode significar ajustar-se a uma paleta de cores, estilo gráfico ou assumir a liderança de alguma forma de diretrizes de marca ou logotipo. Talvez existam algumas formas proeminentes, texturas ou estilos de design que você pode escolher. Talvez um logotipo tenha um aspecto circular e você possa perceber isso em seus botões ou outras chamadas à ação em potencial.
Se uma interface usa predominantemente cores planas, talvez os botões grandes e brilhantes do tipo Apple não sejam o caminho a percorrer. Se puder, aproveite a oportunidade para experimentar estender a marca até a interface usando formas, efeitos, cores ou outras formas de embelezamento apropriados.
2. Combine o estilo contextual
Seguindo de cima, pare por um momento antes de abrir a ui-elements.fig arquivo. É fácil alcançar graduações, sombras, chanfros, etc., mas pare um momento para pensar se é a escolha certa não apenas para combinar com uma marca, mas também com a interface na qual os botões se encontram e se eles precisam parecer excessivamente “botão”.
Os botões podem precisar parecer particularmente como botões em um aplicativo e no celular, por exemplo, mas com sites talvez haja espaço para fazer algo um pouco diferente com seus botões ou chamadas para ação.
3. Certifique-se de que os botões tenham contraste suficiente
Com tantos designs de interface sendo inspirados no estilo do Apple OS, particularmente em muitos PSDs de elemento de interface do usuário, os botões podem se perder um pouco entre outros elementos usados na interface do usuário, diluindo seu poder potencialmente importante. Tente usar cor, tamanho, espaço em branco ou tipografia para garantir que seus botões tenham o peso visual necessário para se destacar do restante da interface.
4. Considere botões arredondados ou bem torneados
Na sequência do exposto acima, se houver muitos outros elementos de interface do usuário de canto arredondado em seu design, considere o uso de botões circulares ou talvez alguma outra alteração na forma. Isso pode fornecer um pouco mais de contraste, garantindo que suas frases de chamariz importantes tenham o destaque de que precisam.
5. Desenfatize os elementos secundários da interface do usuário
Se você está buscando um estilo inspirado no sistema operacional ou está trabalhando com um kit de interface do usuário de elementos pré-projetados, é provável que seus elementos de interface do usuário sejam predominantemente de forma retangular de canto arredondado. Considere reduzir o nível de embelezamento em elementos que podem se dar ao luxo de parecer menos “botão”.
Por exemplo, menus de seleção sob medida, controles segmentados, acionadores de menu personalizados podem ter as mesmas formas de canto arredondado, mas usar menos sombra, borda, chanfro, gradiente ou outros efeitos pode ajudar a reduzir sua riqueza e, por sua vez, promover estilos de botão.
6. Correspondência de pinceladas/bordas
A maioria dos botões que vemos por aí tem algum tipo de borda ou traço neles. Falando vagamente, se o seu botão for mais escuro do que o plano de fundo no qual ele está, use um traço escuro da cor geral do botão. Se o inverso for verdadeiro, escolha um traço com um tom mais escuro da cor de fundo.
Se você ficar com o primeiro e usá-lo em um fundo mais escuro, acho que pode deixar as bordas do botão um pouco “sujas”. Usar o último também pode ajudar a fazer seu botão realmente se destacar. Considero que este é um princípio geral de design ao lidar com traços/bordas em web design.
7. Tenha cuidado com sombras borradas
Ao longo dos anos, sempre jurei pela minha “Lei das Sombras”. A Lei das Sombras afirma que as sombras projetadas funcionam melhor quando um elemento é mais claro que o plano de fundo. Se um elemento for mais escuro que o plano de fundo, as sombras projetadas devem ser usadas com muita sutileza. Semelhante aos traços e bordas de correspondência de cores, considero isso um princípio geral de design que se aplica a todos os elementos da interface do usuário.
8. A iconografia sutil pode fornecer recursos
Além de ser outro pequeno detalhe que pode diferenciar ainda mais seus botões de elementos semelhantes da interface do usuário, o uso de elementos icônicos simples, como setas, pode dar uma sensação de ação e uma pequena perspectiva sobre o que acontece quando um usuário clica.
Por exemplo, uma seta apontando logo após o texto em um botão pode dar ao usuário uma sensação de seguir em frente ou sair da página. Uma seta apontando para baixo pode sugerir que algum conteúdo será divulgado progressivamente abaixo, ou talvez algum tipo de menu seja aberto.
9. Considere os estilos primário, secundário e terciário
Se você estiver projetando uma interface em que haja muitas ações e funcionalidades consistentes em exibição, pode ser importante estabelecer alguma linguagem visual com seus botões, estabelecendo estilos primários, secundários, terciários e potencialmente mais.
Considere reservar a cor mais forte e ousada para os botões principais e usar progressivamente menos força ou saturação à medida que reduz a importância. Assim como cor e sombra, considere reduzir o tamanho, espaço em branco, 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 estados de feedback
Na verdade, isso é óbvio, mas geralmente é algo considerado no final do processo de design. Sempre trabalhe com os principais estados necessários para seus botões para garantir que eles forneçam ao usuário feedback suficiente em seu contexto. Os usuários provavelmente terão um modelo mental de como um botão funciona no mundo real à medida que o usam em seus vários estados. Alguns ajustes simples de CSS com sombras, bordas e gradientes e afins podem dar ao usuário um feedback simples e um toque de colírio para os olhos!
Conclusão
Como designers, todos vocês terão seu próprio processo pelo qual passarão. Aposto que muitas vezes isso pode envolver mover a cabeça para trás da tela, inclinando-a levemente, semicerrando os olhos e dizendo “Sim, isso mesmo!”. É claro que isso faz parte da diversão de projetar e designers talentosos tendem a acertar fazendo exatamente isso, mas acho que é sempre bom fazer um pouco de comentário interno, interrogando e raciocinando sobre as decisões de design que você está tomando.
Não há mal nenhum em reutilizar ou apoiar-se em estilos pré-projetados e elementos de interface do usuário, eles obviamente podem economizar muito tempo. Pode até ser o caso de alguém ter criado exatamente o que você estava procurando e está oferecendo gratuitamente. No entanto, não acho que haja mal algum em ter uma compreensão mais profunda do processo de design e do ofício por trás do que você está criando e informar suas decisões de design no futuro.
