Design

Dicas para um Design Infalível

Espaço entre os elementos, imagens personalizadas de qualidade, ferramentas eficazes de busca e formas criativas de convidar o usuário à interação. São os elementos que o usuário espera encontrar para usar um site com facilidade.

Como criar um layout infalível

Apresentaremos aqui dez elementos que você deve priorizar em seu site, seguidos de exemplos certeiros de aplicação de cada um deles e dicas de como usá-lo em seu próximo projeto. Veremos que pequenos detalhes fazem toda a diferença.

1. Espaçamento

Espaçamento é uma das mais importantes ferramentas de design pois é o ditador de tudo – desde o fluxo até a legibilidade. Designers estão começando a usar o espaço de maneiras que não víamos na internet na década passada por conta da popularização das telas sensíveis ao toque.

Deve haver uma consistência no espaçamento e nas relações de espaço. Elementos similares devem incluir espaçamento similar. A quantidade de espaço entre as linhas de um parágrafo devem seguir um padrão, assim como o tamanho da margem em volta das imagens.

O espaço também é importante ao criar um ponto de foco para a percepção da interface. Uma imagem ou bloco de texto cercado por espaço em branco pode aparentar ser maior e mais importante do que um  alocado junto com outros blocos de informação e em uma parte mais apertada do layout.

Também é válido lembrar que o espaço não deve ser necessariamente branco. Ele se refere à ausência de elementos e pode muito bem ser uma cor de fundo escura ou uma textura bem aplicada.

Como fazer

  • Escolha o elemento central, como um menu, formulário ou uma imagem de destaque.
  • Certifique-se que as informações estão organizadas numa maneira que inclua espaços consistentes entre os elementos.
  • Faça com que cada botão ou bloco de conteúdo fique destacado com o devido peso na hierarquia da informação.
  • Não desvie a atenção do usuário para blocos sem importância.

2. Navegação

 

A navegação não deve ser complicada! Ela precisa ser fácil de identificar e de usar. Também é importante manter os menus para navegação simplificados, para que não sobrecarregue o usuário com muita informação.

Navegação também inclui ferramentas que ajudam o fluxo dos usuários pelo site. Sites com efeito parallax, por exemplo, frequentemente incluem setas que orientam o usuário. Seja user-friendly. Quanto mais fácil for para as pessoas navegarem pelo seu site, maior é a chance do usuário conseguir o que procura antes de ir embora.

Como fazer

  • Balanço. Quanto mais itens de menu, menor a profundidade, e quanto menos, maior a hierarquia. Equilibre a navegação.
  • Use com bom senso os padrões de navegação, o usuário não vai estudar um manual para aprender a usar seu site.
  • Mantenha um padrão para o peso e posição dos links. O usuário espera encontrar uma experiência coerente.
  • Dê feedback. Diga para o usuário em que parte do site ele está navegando nesse momento.
  • Crie soluções interativas com javascript e css.

3. Sobre Nós

A página “Sobre Nós” deve dizer aos usuários quem você é e o que você faz. Pode ser usada para apresentar as filosofias e objetivos da compania, ou como o site foi desenvolvido. Também pode ser o local certo para testemunhos e declarações positivas de usuários e clientes, assim como histórias de sucesso da empresa. Esse tipo de página também pode servir direcionando o usuário para páginas relacionadas ou perfis de redes sociais.

O maior problema das páginas “sobre nós” é que tendem a ficar longas e muito descritivas. Mantenha a página o mais direta possível; dê aos usuários apenas a informação necessária para que fiquem interessados no negócio, e não entediados. Lembre-se de manter o design interessante e convide-os para conhecer o restante do seu site.

Como fazer

  • Use a página “Sobre Nós” para dar mais personalidade a sua marca.
  • Use fotos como da equipe ou do espaço e conte sua história.
  • Lembre-se que as pessoas hoje não tem tanto tempo assim, portanto seja breve e direto.
  • Convide o usuário a conhecer o restante do site.

4. Contato

As informações para contato aparecem em duas formas mais comuns: no topo do site ou em uma página de “Fale Conosco”.

Qualquer uma dessas formas pode funcionar bem, dependendo da arquitetura do seu site. A chave é fazê-lo de forma altamente visível. Apresentar informações como telefone, endereço ou um formulário para contatar o dono do site é o melhor jeito de conferir legitimidade ao seu projeto. É frustrante para o usuário tentar te contactar e não conseguir (a não ser que isso seja proposital).

Como fazer

  • Adicione informação de contato em lugares sempre visíveis.
  • Se você recebe clientes em um endereço físico, inclua a localização (um widget de mapa como o do Google Maps, por exemplo, vai muito bem), se você recebe muitos contatos por telefone, deixe o telefone em uma região bem visível.
  • Considere adicionar um formulário para que o usuário possa enviar emails direto de seu site (e não esqueça das páginas de sucesso e erro).

5. Call to Action

Qual o propósito do seu site? Seu site é a porta de entrada para seu negócio, e você deve construí-lo pensando no que ele deve ser mais eficiente. Seja uma venda produtos, serviços ou alguma captação de informação, você deve assegurar que ele está sendo projetado para atender essa conversão e os convites para essa interação devem ser diretos e óbvios – sem margem para dúvidas. 

Parte das dicas que já demos por aqui ajudam a conduzir o usuário na direção certa. O Dropbox, por exemplo, está muito interessado que você se registre logo, então já propõe isso logo na primeira página. E você, está direcionando sua página inicial para conseguir a sua conversão o mais rápido possível?

Como fazer

  • Faça um call-to-action direto e persuasivo, seja ele uma imagem, um botão ou um formulário.
  • Posicione o call-to-action na página inicial e acima da dobra.
  • Botões devem ser de cores contrastantes e dizer exatamente para o que servem: Compre Agora, Participe, Download, Inscreva-se.
  • Botões de conversão podem ser repetidos ao longo da página, caso o usuário não tenha sido persuadido de primeira.

6. Busca

Nem todo mundo tem tempo de procurar um conteúdo específico pela navegação do site, por isso a busca é uma ferramenta tão importante. Desenhe a caixa de busca de uma forma discreta e fácil de usar, mas assegure-se de que o box é grande o suficiente e que esteja sempre visível. Se quiser um ícone para a busca use a lupa sem medo, é um ícone universal.

Como fazer

  • Desenhe um box simples que ficará no topo de sua página para a busca.
  • A localização mais popular da caixa de busca (no ocidente) é no topo e a direita.
  • Deixe a caixa visível sempre que possível
  • Não esqueça do layout da listagem de resultados

7. Rodapé

O rodapé é uma forma de resumir seu site e trazer pra frente páginas que tenham relação à parte institucional da sua empresa, como redes sociais, endereço e contato. Por sua localização ser ao final da página, também é o espaço ideal para um pequeno mapa do site, links pertinentes e uma breve descrição do que é o site.

Faça com que o rodapé seja simples e útil. Ao desenhar um rodapé que exponha links ou botões, o importante é estar visualmente integrado ao site. Pode até ter um toque muito mais minimalista que o todo, mas dê uma personalidade para ele. Veja outras dicas de rodapénesse post bacana que preparamos.

Como fazer

  • Repita informações encontradas em outros lugares do site (o campo de busca no site pode estar no topo da página, no index principal e, novamente, no footer, por exemplo).
  • Introduza elementos citados anteriormente nesse post caso não haja outro lugar lógico para eles no layout.

8. Botões

Todo botão em um site deve ser reconhecido como um botão. Eles devem ter os mesmos efeitos independentemente da sua localização ou propósito. Criar um set de botões diferentes pode ser uma tarefa desafiante no caso de sites com muitos itens clicáveis. Considere criar um kit de botões para manter consistência e coesão visual ao longo do site.

Não esqueça de usar ferramentas de controle de estatísticas como o Crazyegg ou Google Analytics para medir com testes A/B que cores ou tamanhos de botão estão dando mais resultado.

Como fazer

  • Desenvolva um set de botões único para seu site.
  • Ofereça uma área de clique grande e confortável.
  • Faça testes A/B para medir a eficiência de cada botão.

9. Imagens

As pessoas amam ver coisas em ação. Crie visuais deslumbrantes para agradar usuários em seu site. Boas imagens ou ilustrações são um jeito fácil para fazer isso. Com um pequeno conjunto de grandes fotografias você pode exibir produtos, pessoas, ou qualquer coisa para incentivar os usuários em seu site ou app.

Como a internet está em um estágio que o peso das imagens não é um fator que compromete o acesso ao site, temos mais liberdade para usar imagens de maior resolução, mas lembre-se de oferecer uma alternativa para dispositivos móveis. Seja cuidadoso também ao usar bancos de imagem (stock images) como fonte para seu site não perder a identidade.

Como fazer

  • Procure um fotógrafo ou ilustrador para desenvolver e criar um set de imagens único.
  • Confie mais nas imagens exclusivas que nas de banco de imagem;
  • Ofereça uma experiência visual única.
  • Capriche no tamanho das imagens.

10. Web Fonts

Era uma vez… O tempo em que a web era ordenada por um restrito conjunto de fontes porque as opções que eram reconhecidas pela maioria dos navegadores eram limitadíssimas (Arial e Verdana, quem nunca?). Mas hoje essa limitação não existe mais e temos grandes ferramentas Open Source para uso de uma gama muito maior de fontes exclusivas, como  Google Web Fonts ou o Adobe Edge Web Fonts.

Entretanto, as fontes nativas ainda são muito importantes por duas razões: compatibilidade e performance, portanto não abuse de fontes carregadas e aproveite as que já estão disponíveis no sistema. Webfonts também podem ser importnates para o posicionamento do site em mecanismos de busca (SEO) se usadas no lugar de imagens que teriam texto para dizer alguma coisa.

Como fazer

  • Use um serviço com uma biblioteca de fontes livres, como o Google Web Fonts.
  • Evite muitas variações de fonte. Pode prejudicar a performance do site.
  • Usar webfonts para passar uma mensagem geralmente será mais eficaz que carregar uma imagem para o mesmo fim, compare.

Conclusão

Estas são 10 dicas que consideramos muito importantes para o design em um projeto e que queríamos compartilhar esse checklist com vocês. Elas certamente vão ajudar o seu site ou app a atingir o público-alvo de uma forma mais persuasiva e fácil de usar, e no fim todo mundo sai ganhando.

Pra fazer um layout incrível você tem que levar em conta a a tipografia, cores na interface e usar um design responsivo. Mas vamos com calma, um passo de cada vez. O básico você já aprendeu aqui =)

Faça o melhor layout que o mundo já viu. Você também tem alguma dica pra dividir com a gente? Deixe nos comentários!

Compartilhe

Ebrahim P. Leite

Ebrahim P. Leite

Escreva aqui uma descriçao breve sobre você...

Veja também

Comentários (6)

  1. teste teste

    teste teste

    Teste
  2. Ebrahim P. Leite

    Ebrahim P. Leite

    Teste
  3. Lucas de Oliveira

    Lucas de Oliveira

    Teste
  4. Ebrahim P. Leite

    Ebrahim P. Leite

    TEste
    1. Ebrahim P. Leite

      Ebrahim P. Leite

      REsposta!
    2. Ebrahim P. Leite

      Ebrahim P. Leite

      Resposta da resposta!