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 Crazyeggou 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
Fontsou 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 aqui
na Homem Máquina 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.