Dez princípios essenciais do design de sites

Suas escolhas para o design do seu site têm um grande impacto na experiência e na funcionalidade do usuário - mesmo os visitantes sem nenhum conhecimento de design. Para aqueles distraídos, que querem uma resposta rápida, a primeira impressão é fundamental. 

Um web design eficaz muitas vezes passa despercebido porque deixa o site fácil de usar e de entender. E são as escolhas intencionais no design que possibilitam essa facilidade. 

Identificamos os dez principais princípios de design para você criar, com confiança, um site lindo e fácil de usar. Confira exemplos visuais no guia completo dos nossos principais princípios de web design.

1. Organize a cópia por importância

Um dos objetivos de qualquer design de site é divulgar informações ao visitante do site. Para sinalizar quais informações são mais importantes aos visitantes, use uma tipografia clara, com hierarquia de tipos. 

Em outras palavras, os textos do site devem ter título claro, títulos de seção e corpo. Como orientação, comece com menos de quatro fontes e estilos de tipografia por página da web.

Crie títulos e cabeçalhos de forma que combine com o conteúdo. Pegue este artigo como exemplo. A fonte tem tamanho e estilo que sinaliza a hierarquia das informações na página, desde o título até as principais conclusões e o conteúdo do corpo.

A organização clara do conteúdo do seu site facilita para os visitantes lerem e navegarem. Além disso, os buscadores entendem melhor a estrutura seu site, o que pode turbinar a SEO e as classificações nas buscas.

Confira nosso guia para escrever textos para o site

2. Escolha cores que deem equilíbrio visual, contraste e tom

A paleta de cores é uma das melhores ferramentas para definir o tom e o clima do site. Ao escolher as cores, pense em como sua marca ou empresa deve fazer os clientes se sentirem. 

Se você quer animar as pessoas, use cores vivas e ousadas. Se você quer um clima tranquilizador, tente cores mais suaves. Em seguida, use esse esquema de cores de forma padronizada para deixar o site com um visual coeso. Prefira cores contrastantes para destacar os elementos importantes; e combine as cores para balancear o visual.

Cada cor vem em vários tons; por isso, considere todas as opções e teste diferentes combinações antes de eliminar uma cor. 

Confira dicas para escolher as cores, fontes e ícones do seu site

3. Conduza os olhos dos usuários com o layout

Pense nos layouts e na composição da página como uma rota que você traçou para os visitantes do site. Essa rota deve fazê-los realizar uma ação, seja na mesma página ou em outra página no site.

Nossos olhos tendem a olhar da esquerda para direita e de cima para baixo, em forma de “Z” ou “F”. Tenha isso em mente ao posicionar as seções no design do seu site. Por exemplo: faz sentido deixar o nome e a missão da sua empresa de modo visível no topo da página inicial e, mais abaixo na página, incluir informações e fotos sobre o que você oferece. 

Use o layout em combinação com tamanhos e cores para destacar os pontos mais importantes de uma página.

Confira algumas recomendações para criar um layout de página 

4. Use espaço negativo para destacar o conteúdo

Espaço negativo, também chamado de espaço vazio, é uma área vazia propositadamente deixada entre os conteúdos de um site. O espaço negativo é outra forma de criar uma hierarquia visual para as informações no site, além de deixar a navegação mais agradável e menos estafante.

Enfiar um monte de texto em uma parte da página, por exemplo, dificulta não só ler como descobrir a parte mais importante do texto. Além disso, é provável que o leitor a ignore ou leia por cima. Uma quebra visual entre os conteúdos pode destacar um importante argumento de venda ou cabeçalho. 

Você não precisa ser designer profissional para saber como usar o espaço negativo. O Editor Intuitivo do Squarespace possui uma grade que mostra o espaçamento entre as seções da página. Veja a prévia da sua página da web e pense em como um novo usuário navegaria nela. Seus instintos provavelmente dirão se há problemas na leitura ou se algo precisa de mais espaço para respirar.

Confira dicas para criar uma página de destino

5. Faça seu site funcionar em qualquer aparelho

Somente nos EUA, quase metade do tráfego da web vem de um aparelho móvel. Por isso, para ser realmente eficaz, o design da web precisa se adaptar a telas e aparelhos de diferentes tamanhos.

A maioria dos criadores de sites tem essa adaptabilidade incorporada no sistema de design. Os sites Squarespace por exemplos, vêm com design responsivo - ou seja, eles se ajustam automaticamente ao tamanho das letras e ao conteúdo para uma tela menor ou mais estreita. 

Teste a praticidade da versão móvel do seu site durante a edição e antes do lançamento. O editor do site deve ter um modo de prévia da versão móvel ou uma edição móvel separada. Antes de publicar, acesse o site no celular e no tablet para ver se o layout, as fontes e os links funcionam e estão organizados.

Confira nossas dicas sobre web design voltado para aparelhos móveis

6. Deixe claras suas metas

Ao criar o site, tenha uma meta final clara em mente para os visitantes. Você quer que alguém compre na sua loja de eCommerce? Quer que agendem um horário com você? Quer ser uma opção para um trabalho freelance?

Essa a meta final é para onde o design do seu site deve levar os visitantes. Após apresentar um histórico e as comprovações necessárias, o destino deles é uma chamada à ação (CTA). 

O CTA pode ser um botão, um formulário ou um link simples, geralmente escrito para incentivar uma ação - como “Compre agora” ou “Cadastre-se”. Diferencie o design do CTA do restante da página da web; e disponibilize-o sob as principais informações ou visuais relacionados aonde o CTA levará os visitantes. Com isso, essa opção se destaca e orienta os visitantes em direção à principal meta da sua página da web.

Saiba mais sobre como criar um CTA eficaz

7. Escolha elementos visuais que representem seu propósito

Assim como a paleta de cores, os elementos visuais que você escolhe para o site devem refletir a identidade da sua marca e apoiar o propósito do seu site. Isso inclui tudo, como fotos, ícones e destaques que dividem as seções da página. 

Com as imagens, você é mais específico no que diz ao público. Enquanto cores suaves passam um clima tranquilo, a imagem de alguém meditando pode comunicar como você dá vida a esse clima na sua marca ou empresa. 

A menos que você venda produtos ou só quer mostrar um portfólio, é possível pagar pelo uso de um acervo de imagens de qualidade e usar efeitos de imagem para transmitir seu ponto de vista.

Aprenda a escolher as fotos para seu site

8. Divulgue as informações mais importantes antes

Os designers de sites costumam falar sobre deixar as informações “acima da dobra”. O termo vem dos jornais impressos, nos quais as histórias mais importantes ficam acima de onde o papel se dobra ao meio. Em um bom design, as partes mais importantes de uma página da web aparecem sem que se precise rolar a página.

Os elementos mais comuns para deixar acima da dobra são:

• Nome e logotipo da empresa

• Menu de navegação

• Título da página ou dos artigos

• Anúncio de novos produtos ou eventos

• Um breve resumo sobre você ou sua empresa 

• O ponto mais forte do portfólio

Para testar a eficácia do seu conteúdo acima da dobra, acesse as páginas importantes do site. Em cada página, anote quais informações você pode retirar dela sem precisar rolar par abaixo. A página chama sua atenção assim que você clica? Ela faz você querer saber mais ou rolar para baixo?

Comece criando uma página inicial de destaque

9. Deixe o site fácil de navegar

Um bom site começa com uma boa navegação. Os visitantes do site devem sempre saber claramente para onde um link os levará e como chegar aonde querem ir. 

Quando o site tem uma boa navegação, você talvez nem note isso. Por outro lado, pense em como é quando você não encontra o que procura no site; essa frustração faz os usuários geralmente clicarem para sair.

Crie um design simples para a navegação. Use uma linguagem direta; e não complique demais o design. Para testar a navegação no site, peça para os amigos acessarem uma página ou produto específico; ou faça isso você mesmo.

Confira dicas para navegação básica no site

10. Crie um design que se destaque

Como com qualquer ideia criativa, após conhecer as regras, você pode adaptá-as pi quebrá-las para dar vida à sua visão. 

Uma marca ou empresa confiável tem jeito de profissional; uma marca profissional que se destaca, porém, tem um ponto de vista. Lembre-se de todos esses princípios ao planejar o design ou a reformulação do site. Por outro lado,não tenha medo de brincar com os diferentes elementos do design e desenvolver uma perspectiva distinta e um design visual para suas necessidades. 

Confira nosso guia para os principais passos do design de um site