15 princípios de web design para um site amigável ao cliente

Imagine entrar em uma loja de varejo para procurar roupas de trabalho novas. Você percebe manchas no chão, prateleiras desorganizadas e um odor estranho ao olhar ao redor. Você ficaria na loja e compraria do varejista?

O design da loja influencia o comportamento dos clientes – o mesmo vale para os sites.

Uma pesquisa da Clutch com 612 pessoas descobriu que 83% dos participantes percebem quando o design de um site é esteticamente agradável e atualizado. Alternativamente, 50% dos participantes deixariam um site para sempre se acreditassem que o conteúdo é irrelevante ou não atende às suas necessidades.

Então, como você cria um site que os clientes vão gostar?

É disso que trata este artigo. Mostraremos por que um bom web design é essencial e compartilharemos 15 princípios de web design que você pode aproveitar para criar um site de alta qualidade.

Por que um bom web design é importante?

O web designer médio ganha US$ 57.000 anualmente – cerca de US$ 8.000 a mais do que os desenvolvedores web juniores que ganham em média US$ 44k anualmente. Os designers são razoavelmente bem remunerados por uma boa razão: seu trabalho é vital.

Quando um novo lead visita seu site, ele define a primeira impressão que molda suas futuras interações com sua marca. É neste ponto que eles desenvolvem sua primeira opinião sobre você.

Seu site também transmite a identidade, visão e posição da sua marca no setor. Se você tiver concorrentes próximos com um produto semelhante, um site que faça as pessoas dizerem “uau” o tornará mais memorável e aumentará o reconhecimento da sua marca acima da concorrência.

Além disso, um site forte pode melhorar seus esforços de otimização de mecanismo de pesquisa (SEO).

Os mecanismos de pesquisa consideram como as pessoas respondem aos sites ao classificá-los nos resultados de pesquisa. Se sua taxa de rejeição for baixa e as pessoas visitarem com frequência várias páginas em seu site, os mecanismos de pesquisa provavelmente o classificarão mais alto do que um concorrente com uma alta taxa de rejeição.

SEO técnico também é importante aqui. Sites com títulos bem desenhados, estruturas de página e links são mais acessíveis. Assim, os motores de busca e os clientes os favorecem. Vamos dar uma olhada em alguns princípios importantes de web design.

15 Princípios de Web Design Eficaz

Quando nos referimos a “princípios de design da web”, nos referimos a regras gerais para projetar os elementos texturais e visuais de um site ou página da web. Cada marca adota os princípios de web design de forma diferente – algumas de acordo com as melhores práticas e outras não.

Para ajudá-lo a criar um excelente site, aqui estão 15 princípios de web design (além de exemplos de sites que os usam efetivamente):

1. As páginas devem ser fáceis de navegar

No estudo da Clutch sobre experiências do usuário em sites, 94% dos participantes viram a navegação no site como o “recurso mais importante do site”.

Não é nenhuma surpresa o porquê. Se um usuário de mecanismo de pesquisa chegar ao seu site procurando informações sobre “design para celular” e não conseguir encontrá-lo, o próximo passo natural é clicar em “voltar” e tentar outro site.

Como você adota uma navegação bem planejada? Inspire-se no site do The Cool Club.

Ao entrar na página inicial do Cool Club, o layout do site é extremamente claro. Você pode navegar para as principais seções de produtos (como “jogos de cartas” e “lista de baldes”) usando os botões do lado esquerdo, e você pode navegar para as páginas “sobre” e “contato” usando os botões à direita.

As páginas de produtos do Cool Club também são muito fáceis de navegar. Atualmente, a marca possui um baralho de cartas interativo que apresenta 54 variações legais e páginas correspondentes. Basta rolar para baixo e clicar no cartão que deseja ver mais.

Para criar um site igualmente eficaz, classifique o conteúdo em categorias claras para seus cabeçalhos e rodapés e dê a eles títulos descritivos. Em seguida, ordene suas páginas por tópico, para que as pessoas possam navegar facilmente entre tópicos semelhantes.

Além disso, torne seu cabeçalho e rodapé consistentes em todo o site.

2. Sempre aproveite o espaço negativo

O espaço negativo (ou “espaço em branco”) é a região ao redor dos assuntos de uma página, sejam imagens, vídeos, texto ou botões.

Muitos profissionais de marketing entusiasmados correm para preencher cada espaço livre em uma página, esperando que dar aos visitantes mais informações os deixe mais engajados. No entanto, isso geralmente resulta em páginas esmagadoras e confusas.

É aí que entra o espaço negativo. O uso do espaço negativo enfatiza os elementos mais críticos de cada página, pois a falta de cor atrai os olhos do visitante para áreas mais claras.

Claro, “usar espaço negativo” não significa “criar um site branco chato”. Em vez disso, você pode aproveitar o espaço usando as cores da sua marca, assim como a Garoa faz.

A página inicial do Garoa usa uma paleta tipo creme para criar um ambiente enquanto ainda aproveita o espaço negativo. O resultado é que seus olhos vão para o conteúdo introdutório na seção “cuidados com a pele para o outono” no centro, em vez das partes menos importantes.

Certifique-se de aproveitar o espaço em branco para mostrar a hierarquia em seu próprio site.

3. As páginas devem ser consistentes, mas envolventes

Quando você lê nomes de marcas como “Cadbury”, “Hershey's” ou “Nike”, a visão de seus logotipos, fontes e estilos de design provavelmente vem à mente imediatamente. Esse é o poder de uma marca consistente.

Ao projetar seu site, crie páginas com elementos consistentes para dar à sua marca uma identidade visual clara. Que significa:

• Usando as mesmas fontes, estilos e cores nos cabeçalhos
• Mantendo os espaços entre os elementos visuais iguais entre as páginas
• Usando paletas de cores em vez de cores aleatórias
• Definir diretrizes de layout para conteúdo de formato longo, como notícias e postagens de blog
• Usando um modelo de site para todas as páginas

Páginas consistentes não precisam parecer completamente uniformes. Em vez disso, você pode equilibrar consistência e engajamento misturando elementos.

Por exemplo, você pode usar diferentes fontes e cores para títulos H1, H2 e H3. Ou você pode alterar o layout de diferentes tipos de páginas, para misturar as coisas.

4. Adote Cores Complementares

Cores complementares são pares de cores que você pode misturar sem deixar seu design com uma aparência opressiva e feia.

A forma como as cores são exibidas em uma tela seguem o modelo de cores Vermelho, Verde e Azul (RGB) em vez do modelo Ciano, Magenta, Amarelo e Preto (CMYK) usado na impressão. Os pintores também costumam usar o modelo de cores Vermelho-Amarelo-Azul (RYB) que considera as cores complementares como vermelho-verde, azul-laranja e amarelo-roxo.

Não importa qual modelo você prefira, o uso de cores complementares atinge um objetivo semelhante ao preto e branco. Cores complementares dão ênfase e criam uma identidade visual clara para sua marca.

Você pode ver isso no site da Swab The World.

Na captura de tela abaixo, a instituição de caridade de câncer de sangue usa verde e tons de magenta. Essas cores mudam para outras combinações de cores complementares quando você visita diferentes seções do site (embora todas as cores tenham saturação semelhante, portanto, a marca permanece consistente).

Cores complementares são um princípio fácil de usar em seu design. Se você quiser manter as coisas simples, selecione duas cores complementares e adicione-as a elementos contrastantes (como um H2 e um corpo de texto). Ou use vários tons de cada cor em cada página.

5. Projete com seu público-alvo em mente

Se você olhar para os sites do The Cool Kids, Garoa e Swab The World, você pode perceber que cada site tem uma “sensação” única. Essa sensação vem da adaptação do design do site ao público.

A personalização é o objetivo final aqui. A maioria de nós gosta de comprar produtos e serviços de marcas com as quais nos sentimos alinhados e representados. De fato, pesquisas mostram que 72% dos consumidores valorizam a compra de empresas que “se alinham com suas crenças e valores”. Portanto, se alguém visitar seu site e vir seus valores, metas e prioridades refletidos nele, é mais provável que compre de você.

Para personalizar o design do seu site para o seu público, considere:

• Quais imagens ressoam com seu mercado-alvo, especificamente
• Qual tom funciona para o seu público (por exemplo, profissional, minimalista, borbulhante etc.)
• Quais tópicos seu mercado-alvo vem ao seu site para ver
• Como você pode transmitir o posicionamento da sua marca através do seu web design
• A quais calls-to-action (CTAs) seu público responde (e onde você deve colocá-los para otimizar sua taxa de cliques (CTR))

Pontos de bônus se você puder usar as automações do site para oferecer uma experiência pessoal com base no perfil do usuário e nas interações anteriores com sua marca.

Pode ser útil inspirar-se em concorrentes ou marcas que vendem coisas diferentes para seu público-alvo.

6. As fontes devem ser legíveis e acessíveis

As fontes que você usa em seu site determinam se seus visitantes podem ler o que você escreveu ou não. É seguro dizer que eles são muito importantes.

A primeira coisa a considerar ao selecionar uma fonte é a segurança na web. As fontes seguras para a Web são compatíveis com sistemas operacionais e navegadores da Web, portanto, funcionarão na maioria dos dispositivos.

Você também precisa considerar a acessibilidade. As fontes acessíveis devem ser claras e fáceis de ler em tamanhos grandes e pequenos. Por exemplo, fontes cursivas não são muito acessíveis, enquanto Times New Roman é bastante acessível.

Além disso, observe as tendências de fontes em outros sites ao selecionar uma fonte. Em 2021, o cientista de dados Michael Li analisou as fontes em mais de 1.000 sites. Ele encontrou as seguintes tendências:

• 85% das fontes não usam serifas (as pequenas linhas adicionadas às letras no tipo de jornal)
• As cinco principais fontes incluem Sans Serif, Arial, Helvetica, Helvetica Neue e Roboto
• Os cabeçalhos H1 têm 58% de probabilidade de não ter serifas (em comparação com 93% para texto de parágrafo)
• Os dois tamanhos mais comuns para fontes de parágrafo são 14 px e 16 px

Você pode optar por adotar essas informações para selecionar um estilo de fonte que atenda ao que as pessoas procuram nos sites. Ou você pode optar por fazer algo diferente.

Virgin é uma marca que escolheu a segunda opção. A Virgin usou pelo menos cinco fontes na captura de tela abaixo. Essas fontes separam as seções da página e as tornam atraentes.

7. Siga a Lei de Fitt e a Lei de Hick

O psicólogo Paul Fitts desenvolveu pela primeira vez a Lei de Fitt em 1954, mas ainda é altamente relevante em web design em 2022. A Lei de Fitt argumenta que o tamanho de um alvo influencia quanto tempo leva para alguém alcançá-lo.

Em um contexto de web design ou experiência do usuário (UX), isso significa que as pessoas levarão menos tempo para clicar em botões maiores ou mais tempo para clicar em botões menores. Portanto, para aproveitar a Lei de Fitt, você deve tornar seus botões de CTA extremamente grandes e proeminentes para que sejam mais fáceis de clicar.

“Fácil” é crucial aqui. A Lei de Hick, desenvolvida pelo psicólogo britânico William Edmund Hick e pelo psicólogo americano Ray Hyman, diz que as pessoas ficam cansadas toda vez que decidem algo.

Portanto, quanto mais decisões você pedir a um visitante do site, maiores serão as chances de que ele fique cansado demais para seguir adiante.

8. Use a invariância para destacar informações importantes

Quando algo é “invariável”, ele se destaca como uma opção única entre várias opções muito semelhantes. O exemplo mais óbvio de invariância é o destaque em planos em páginas de preços como esta da Box.

Mas essa não é a única maneira de usar a invariância. A invariância pode ajudá-lo a estabelecer uma hierarquia visual em suas páginas para destacar informações importantes e atrair pessoas para partes importantes de sua página.

Por exemplo, dê uma olhada em como o Museu Frans Hals usou a invariância para criar uma hierarquia visual em sua página inicial:

A hierarquia nesta imagem é a seguinte: o sinal de “bem-vindo”, as imagens, o sinal de “comprar ingressos”, o sinal de “todas as exposições”, depois o outro conteúdo.

Para usar a invariância para criar sua própria hierarquia, classifique os elementos da página em ordem de importância. Em seguida, ajuste o tamanho, a cor e o posicionamento de cada elemento até que os olhos dos visitantes se desloquem para cada elemento na ordem desejada.

9. Em CTAs: use uma linguagem clara que as pessoas vão querer clicar

Nós abordamos a importância de tornar seus botões grandes e fáceis de clicar, mas o tamanho não é a única coisa que você deve considerar ao criar botões.

Os botões clicáveis ​​são descritivos e persuasivos ao mesmo tempo. Eles deixam o visitante curioso sobre o link do botão e dão a ele um motivo para ir até lá.

Uma maneira de fazer isso é usar um texto de botão detalhado como “clique aqui para ler nosso blog”, “encontre nossos segredos de marketing aqui” ou “aqui está nosso relatório de 2022”. Outra é tornar seus botões visualmente emocionantes ou únicos.

O Rainforest Protector adotou as duas abordagens. O Rainforest Protector permite que você navegue pela floresta amazônica visitando diferentes locais. O botão de cada local inclui uma imagem e uma ação como “visitar a vila”.

10. Aproveite o padrão F ou o padrão Z

Ao longo de 13 anos, pesquisadores do Nielsen Norman Group (NN Group) usaram o rastreamento ocular para ver como mais de 500 pessoas se envolvem com o conteúdo. Isso os levou a desenvolver o padrão F, que diz que a primeira coisa que as pessoas fazem é escanear a página e depois ler nas linhas da esquerda para a direita. Assim:

Você pode aproveitar o padrão F em seu site estruturando seu conteúdo em torno dele ou de um modelo alternativo.

O Facebook usa um padrão em forma de Z em sua página inicial. Quando você visita a página, seus olhos vão para o logotipo do “Facebook”, depois para o botão “login”, depois para a imagem à esquerda e, finalmente, para o botão “criar uma conta”.

11. Bons sites são rápidos e compatíveis com dispositivos móveis

No quarto trimestre de 2021, 54,4% do tráfego do site globalmente veio de um dispositivo móvel. Portanto, se seu site não for compatível com dispositivos móveis, você poderá reduzir pela metade seu tráfego.

A velocidade também influencia o tráfego orgânico do site. Pesquisas do Google mostram que 53% das pessoas saem de um site se ele carregar em mais de três segundos.

A maneira mais fácil de tornar seu site compatível com dispositivos móveis ou rápido é escolher um tema de site rápido feito por designers especializados. Ou, se você quiser se envolver mais no design do seu site, pode criar um site responsivo personalizado.

Foi isso que os designers por trás do filme de 1917 fizeram. O site de 1917 oferece uma experiência imersiva para que as pessoas invistam no filme. Ele foi projetado especificamente para dispositivos móveis, pois você pode usar o dedo para se movimentar nas trincheiras da Primeira Guerra Mundial.

Se você estiver atento, notará que o site de 1917 também aproveita o padrão F.

12. Divida o texto em pedaços pequenos

Considere o seguinte: você procura por “jogos mentais” e encontra uma página da web que parece promissora. No entanto, quando você clica nele, fica sobrecarregado com grandes pedaços de texto difíceis de ler.

Como muitas pessoas, você pode clicar fora do site (não importa o quão promissor seja o conteúdo!).

A pesquisa de rastreamento ocular da Universidade de Ciência e Tecnologia do Missouri mostra que os visitantes do site gastam uma média de 5,59 segundos lendo texto. Portanto, se as pessoas não puderem consumir seu texto nesse intervalo de tempo, é improvável que você as envolva adequadamente.

Corrija esse problema dividindo seu texto em pequenos pedaços. Adicionalmente:

• Use frases curtas
• Fique longe de coloquialismos
• Forneça definições para quaisquer palavras específicas do setor que você usa
• Evite 'prosa roxa' (metáforas, advérbios e adjetivos desnecessários)

13. Use Grades

Quando dizemos “use grids”, não queremos dizer que você deve fazer seu site parecer uma tabela do Excel. Em vez disso, divida seu site em seções distintas que atendem a um propósito específico para que os visitantes possam localizar o conteúdo rapidamente.

Você não precisa usar linhas de grade para fazer isso. Em vez disso, crie distinções entre espaços de grade com cor, espaço negativo e sombreamento, como fez o Atlason. A página inicial da Atlason apresenta produtos novos e mais vendidos em grades. Como os visitantes provavelmente estão procurando por esses produtos, as grades os ajudam a encontrá-los em segundos.

Uma das maneiras mais fáceis de usar grades em seu site é selecionar um tema WordPress que as use. Exemplos incluem Gridframe, Masonry Grid e Shuttle Grid.

14. Lembre-se do Equilíbrio

No contexto do web design, “equilíbrio” refere-se à maneira como os elementos de design se relacionam e se os elementos retratam harmonia. Existem muitas maneiras de criar equilíbrio em seu site, incluindo alguns destes princípios de web design:

• Por simetria (incluindo simetria bilateral, radial ou translacional)
• Usando cores complementares ou contrastantes
• Usando elementos de formas e tamanhos semelhantes
• Usando padrões repetitivos

Você pode ver o equilíbrio em ação no site da Woven. Este site usa uma paleta de cores equilibrada, preto e branco para criar contraste dentro do texto e simetria para chamar a atenção dos visitantes para o conteúdo.

15. Preste atenção aos detalhes

A teoria da Gestalt diz que as pessoas percebem algo como um todo antes de olhar para elementos individuais. Ou, como disse Kurt Koffka: “O todo existe independentemente das partes”. Embora as pessoas geralmente façam referência à teoria da Gestalt em relação à psicologia, ela também se aplica ao web design.

Você precisa prestar atenção aos pequenos detalhes em seu site para garantir que seu design pareça polido e completo. Ao projetar algo, é fácil se concentrar em elementos importantes, como títulos, imagens e CTAs, e esquecer outras coisas como:

• Ícones de rodapé e cabeçalho
• Botões de mídia social
• Com que eficiência você converteu seu site para WordPress (se aplicável)
• Espaçamento do texto
• Erros de digitação e gramática
• Compatibilidade do navegador
• Tamanhos de imagem

Verifique esses elementos antes de clicar em “publicar” e certifique-se de que seu site transmita profissionalismo. Você pode ignorar pequenas falhas, mas os visitantes não.

Além disso, mantenha-se atualizado com as novas tendências e conceitos em princípios de web design. Adicioná-los ao seu site irá mantê-lo com uma aparência nova, fresca e envolvente.

Resumo

Uma loja de varejo bem projetada melhora a experiência do cliente, enquanto uma loja ruim pode afastar os clientes da sua marca para sempre. É o mesmo com web design.

Construir um site visualmente atraente é mais do que apenas um projeto divertido. Ele pode ajudá-lo:

• Transmitir profissionalismo
• Crie confiança com seus visitantes
• Destaque-se dos seus concorrentes
• Atraia tráfego orgânico dos mecanismos de pesquisa

Aproveite os princípios de web design deste artigo para criar um site que faça os visitantes dizerem “uau”.

Agora que cobrimos tudo o que sabemos sobre web design, adoraríamos ouvir de você. O que você percebe quando visita o site de uma marca? Além disso, você usa algum princípio que não mencionamos em seu site? Por favor, conte-nos nos comentários abaixo.