Imagine entrar em uma loja de varejo para procurar roupas de trabalho novas. Você nota manchas no chão, prateleiras desorganizadas e um odor estranho enquanto olha em volta. Você ficaria na loja e compraria do varejista?
O design da loja influencia como os clientes se comportam – o mesmo se aplica aos sites.
Uma pesquisa com 612 pessoas por Clutch descobriu que 83% dos participantes notam 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ê projeta um site que os clientes vão gostar?
É disso que se trata neste artigo. Nós vamos mostrar a você porque um bom web design é essencial e compartilhar 15 conceitos de web design que você pode alavancar para construir 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 júnior que ganham em média US$ 44k anualmente. Designers são razoavelmente bem remunerados por uma boa razão: seu trabalho é vital.
Quando um novo líder visita seu site, ele dá a primeira impressão que molda suas futuras interações com a 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 de sua marca dentro da indústria. Se você tem concorrentes próximos com um produto similar, um site que faz as pessoas dizerem “uau” tornará você mais memorável e aumentará a consciência da sua marca acima da concorrência.
Além disso, um site forte pode melhorar seus esforços de otimização para mecanismos de pesquisa (SEO).
Os mecanismos de pesquisa consideram como as pessoas respondem aos sites quando os classificam nos resultados de pesquisa. Se a sua taxa de rejeição é baixa e as pessoas frequentemente visitam várias páginas em seu site, as ferramentas de pesquisa provavelmente o classificarão mais alto do que um concorrente com uma taxa de rejeição alta.
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, tanto os motores de pesquisa quanto os clientes os favorecem. Vamos dar uma olhada em alguns conceitos importantes de web design.
15 conceitos de web design eficaz
Quando nos referimos a “conceitos de web design”, nos referimos a regras gerais para projetar os elementos textuais e visuais de um site ou página da web. Cada marca adota conceitos de web design de maneira diferente – alguns em linha com as melhores práticas e outros não.
Para ajudá-lo a criar um excelente site, aqui estão 15 conceitos de web design (mais exemplos de sites que os usam efetivamente):
1. Páginas devem ser fáceis de navegar
No estudo de Clutch sobre experiências de usuários em sites, 94% dos participantes viram a navegação do site como a “característica mais importante do site”
Não é surpresa o porquê. Se um usuário de um mecanismo de pesquisa vem ao seu site procurando por informações sobre “design móvel” e não consegue encontrá-las, 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.
Quando você entra na página inicial do Cool Club, o layout do site é extremamente claro. Você pode navegar para as seções-chave de produtos (como “card games” e “bucket list”) usando os botões do lado esquerdo, e você pode navegar para as páginas “sobre” e “contato” usando os botões do lado direito.
As páginas de produtos do Cool Club também são muito fáceis de navegar. A marca atualmente tem um baralho de cartas interativo que apresenta 54 variações legais e páginas correspondentes. Basta rolar para baixo e clicar na carta que você quer ver mais.
Para criar um site similarmente eficaz, classifique o conteúdo em categorias claras para seus cabeçalhos e rodapés e dê a eles títulos descritivos. Então, ordene suas páginas por tópico, para que as pessoas possam navegar facilmente entre tópicos similares.
Além disso, torne seu cabeçalho e rodapé consistente em todo o seu site.
2. Sempre alavanque o espaço negativo
Espaço negativo (ou “espaço branco”) é a região em torno dos assuntos de uma página, sejam eles imagens, vídeos, textos ou botões.
Muitos marqueteiros entusiastas correm para preencher cada espaço livre em uma página, esperando que dando mais informações aos visitantes, eles se engajarão mais. No entanto, isto muitas vezes 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, já que a falta de cor atrai os olhos do visitante para áreas mais brilhantes.
Claro, “usar espaço negativo” não significa “criar um site branco chato” Ao invés disso, você pode aproveitar o espaço usando as cores da sua marca, assim como Garoa faz.
A página inicial de Garoa usa uma paleta parecida com creme para construir 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, ao invés das partes menos importantes.
Certifique-se de aproveitar o espaço em branco para mostrar a hierarquia em seu próprio site.
3. Páginas devem ser consistentes, mas envolventes
Quando você lê nomes de marcas como “Cadbury,” “Hershey’s,” ou “Nike,” a visão de suas logo, fontes e estilos de design provavelmente vêm à 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. Isso significa:
- Usando as mesmas fontes, estilos e cores em todos os cabeçalhos
- Manter os espaços entre elementos visuais o mesmo entre páginas
- Usando paletas de cores ao invés de cores aleatórias
- Estabelecer diretrizes de layout para conteúdo de longa duração, como notícias e artigos em blogs
- Usando um modelo de site para todas as páginas
Páginas consistentes não precisam ter um aspecto completamente uniforme. Ao invés disso, você pode equilibrar consistência e engajamento misturando elementos.
Por exemplo, você pode usar diferentes fontes e cores para os cabeçalhos H1, H2 e H3. Ou, você pode alterar o layout de diferentes tipos de páginas, para misturar as coisas.
4. Abrace as cores complementares
As cores complementares são pares de cores que você pode misturar sem fazer seu design parecer esmagador e feio.
A forma como as cores são exibidas em uma tela segue o modelo de cores Vermelho, Verde e Azul (RGB) em vez do modelo Cyan, Magenta, Amarelo e Preto (CMYK) usado na impressão. Os pintores também usam frequentemente o modelo de cor Vermelho-Amarelo-Azul (RYB) que considera cores complementares como vermelho-verde, azul-alaranjado e amarelo-púrpura.
Não importa qual modelo você prefira, o uso de cores complementares atinge um propósito similar ao preto e branco. As cores complementares dão ênfase e criam uma identidade visual clara para a sua marca.
Você pode ver isso no site do Swab The World.
Na captura de tela abaixo, a instituição de caridade contra o câncer de sangue usa verde e tons de magenta. Estas cores mudam para outras combinações de cores complementares quando você visita diferentes seções do site (embora todas as cores tenham saturação similar, então a marca permanece consistente).
As cores complementares são um princípio fácil de usar em seu projeto. Se você quiser manter as coisas simples, selecione duas cores complementares e adicione-as a elementos contrastantes (como um H2 e um texto corporal). Ou use várias tonalidades de cada cor em cada página.
5. Desenhe com o seu público-alvo em mente
Se você olhar para os sites The Cool Kids, Garoa, e Swab The World’s, você pode notar que cada site tem uma “sensação” única Essa sensação vem da adaptação do design do site para o 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. Na verdade, pesquisas mostram que 72% dos consumidores valorizam a compra de empresas que “se alinham com suas crenças e valores” Portanto, se alguém visita o seu site e vê seus valores, objetivos e prioridades refletidos lá, é mais provável que compre de você.
Para personalizar o design do seu site para o seu público, considere:
- Que imagens ressoam com o seu mercado alvo, especificamente
- Que tom funciona para o seu público (por exemplo, profissional, minimalista, borbulhante, etc.)
- Que tópicos seu mercado alvo vem ao seu site para ver
- Como você pode transmitir o posicionamento de sua marca através do seu web design
- A que chamados para ação (CTAs) seu público responde (e onde você deve colocá-los para otimizar sua taxa de click-through (CTR))
Pontos bônus se você puder usar as automatizações do site para proporcionar uma experiência pessoal baseada no perfil do usuário e nas interações anteriores com a sua marca.
Pode ser útil se inspirar em concorrentes ou marcas que vendem coisas diferentes para a sua demografia alvo.
6. As fontes devem ser legíveis e acessíveis
As fontes que você usa em seu site determinam se seus visitantes podem ou não ler o que você escreveu. É seguro dizer que elas são muito importantes.
A primeira coisa a ser considerada ao selecionar uma fonte é a segurança na web. As fontes seguras para a web são suportadas por sistemas operacionais e navegadores web, então elas 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, as fontes baseadas em cursivo não são muito acessíveis, enquanto Times New Roman é bastante acessível.
Além disso, observe as tendências das 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 serifs (as pequenas linhas adicionadas às letras em tipo de jornal)
- As cinco principais fontes incluem Sans Serif, Arial, Helvetica, Helvetica Neue, e Roboto
- Os cabeçalhos H1 têm uma probabilidade de 58% de não ter serifs (comparados com 93% para o texto do parágrafo)
- Os dois tamanhos mais comuns para fontes de parágrafo são 14 px e 16 px
Você pode escolher abraçar esta informação para selecionar um estilo de fonte que adere ao que as pessoas procuram nos sites. Ou, você pode optar por fazer algo diferente.
Virgin é uma marca que escolheu a segunda opção. Virgin usou pelo menos cinco fontes na captura de tela abaixo. Estas fontes separam seções da página e as fazem parecer envolventes.
7. Siga a lei de Fitt e a lei de Hick
O psicólogo Paul Fitts desenvolveu a Lei de Fitt pela primeira vez em 1954, mas ela ainda é altamente relevante no web design em 2022. Fitt’s Law argumenta que o tamanho de um alvo influencia o tempo que alguém leva para alcançá-lo.
Em um contexto de web design ou Experiência do Usuário (UX), isto significa que as pessoas levarão menos tempo para clicar em botões maiores ou mais tempo para clicar em botões menores. Então, para aproveitar a Lei de Fitt, você deve tornar seus botões CTA extremamente grandes e proeminentes para que eles 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.
Então, quanto mais decisões você pedir a um visitante do site para tomar, maiores serão as chances de eles se tornarem muito cansados para seguir adiante.
8. Use invariante para destacar informações chaves
Quando algo é “invariante”, ele se destaca como uma opção única de várias opções muito semelhantes. O exemplo mais óbvio de invariante é o destaque em planos em páginas de preços como esta do Box.
Mas essa não é a única maneira que você pode usar invariante. Invariância pode ajudá-lo a estabelecer uma hierarquia visual em suas páginas para destacar informações-chave e atrair pessoas para partes importantes de sua página.
Por exemplo, veja como o Museu Frans Hals usou a invariante para criar uma hierarquia visual em sua página inicial:
A hierarquia nesta imagem é a seguinte: o sinal de “boas-vindas”, as imagens, o sinal de “comprar ingressos”, o sinal de “todas as exposições”, depois o outro conteúdo.
Para usar invariante para criar sua própria hierarquia, classifique os elementos da página em ordem de importância. Depois, ajuste o tamanho, a cor e a colocação de cada elemento até os olhos dos visitantes irem para cada elemento na ordem que você quiser.
9. Em CTAs: Use uma linguagem clara que as pessoas vão querer clicar
Nós tocamos na 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 intrigam as pessoas que visitam o site e lhes dão um motivo para ir e ver o link do botão.
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 excitantes ou únicos.
O Rainforest Protector adotou ambas as 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 “visite a vila”
10. Alavanque o padrão F ou o padrão Z
Durante 13 anos, pesquisadores do Grupo Nielsen Norman (NN Group) usaram o rastreamento ocular para ver como mais de 500 pessoas se envolvem com o conteúdo. Isto os levou a desenvolver o padrão F, que diz que a primeira coisa que as pessoas fazem é varrer a página para baixo, depois eles leem em 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 um modelo alternativo.
O Facebook usa um padrão famoso em forma de Z em sua página inicial. Quando você visita a página, seus olhos vão para o logo “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 amigáveis ao celular
A partir do quarto trimestre de 2021, 54,4% do tráfego global do site veio de um dispositivo móvel. Então, se o seu site não é amigável ao celular, você pode reduzir o seu tráfego pela metade.
A velocidade também influencia o tráfego orgânico do site. Pesquisas do Google mostram que 53% das pessoas deixam um site se ele for carregado em mais de três segundos.
A maneira mais fácil de tornar o seu site móvel amigável ou rápido é escolher um tema de site rápido feito por designers especializados. Ou, se você quiser estar mais envolvido no design do seu site, você pode construir um site personalizado e ágil.
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 investissem no filme. Ele é projetado especificamente para dispositivos móveis, pois você pode usar seu dedo para se mover nas trincheiras da Primeira Guerra Mundial.
Se você for observador, você notará que o site de 1917 também aproveita o padrão F.
12. Quebre o texto em pedaços do tamanho de uma mordida
Considere o seguinte: você procura por “jogos mentais” e encontra uma página na internet que parece promissora. No entanto, quando você clica nela, você fica sobrecarregado com grandes pedaços de texto que são difíceis de ler.
Como muitas pessoas, você pode clicar fora do site (não importa o quão promissor seja o conteúdo!).
Uma pesquisa de rastreamento ocular da Universidade de Ciência e Tecnologia do Missouri mostra que os visitantes do site gastam em média 5,59 segundos lendo textos. Portanto, se as pessoas não puderem consumir seu texto nesse período de tempo, é improvável que você os envolva adequadamente.
Corrija o problema dividindo seu texto em pequenos pedaços. Adicionando:
- Frases curtas
- Fique longe dos coloquialismos
- Definições para qualquer palavra específica do setor que você use
- “Prosa roxa” (metáforas, advérbios e adjetivos desnecessários)
13. Use grades
Quando dizemos “use grades”, não queremos dizer que você deve fazer seu site parecer uma tabela Excel. Ao invés disso, divida seu site em seções distintas que servem a um propósito específico para que os visitantes possam localizar rapidamente o conteúdo.
Você não precisa usar linhas de grade para fazer isso. Ao invés disso, crie distinções entre espaços de grade com cor, espaço negativo e sombreamento, como Atlason fez. A página inicial da Atlason apresenta produtos novos e mais vendidos em grades. Como os visitantes provavelmente estão procurando por estes produtos, as grades os ajudam a encontrá-los em segundos.
Uma das maneiras mais fáceis de usar as grades em seu site é selecionar um tema WordPress que as utilize. Exemplos incluem Gridframe, Masonry Grid, e Shuttle Grid.
14. Lembre-se do equilíbrio
No contexto do web design, “equilíbrio” refere-se à forma como os elementos do design se relacionam entre si e se os elementos retratam a harmonia. Há muitas maneiras de criar equilíbrio em seu site, incluindo alguns destes conceitos de web design:
- Através de simetria (incluindo simetria bilateral, radial ou translacional)
- Usando cores complementares ou contrastantes
- Usando elementos de formas e tamanhos similares
- 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 Gestalt diz que as pessoas percebem algo como um todo antes de olhar para os elementos individuais. Ou, como disse Kurt Koffka: “O todo existe independentemente das partes” Embora as pessoas geralmente façam referência à teoria 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 tenha um aspecto polido e completo. Ao desenhar algo, é fácil focar em elementos importantes como cabeçalhos, imagens e CTAs e esquecer outras coisas como:
- Rodapés e ícones de cabeçalho
- Botões de redes sociais
- Com que eficiência você converteu seu site para WordPress (se aplicável)
- Espaçamento de texto
- Typos e erros gramaticais
- Compatibilidade de Navegadores
- Tamanhos de imagem
Verifique novamente esses elementos antes de clicar em “publicar” e assegure-se de que seu site transmite profissionalismo. Você pode ignorar as pequenas falhas, mas os visitantes não o farão.
Além disso, mantenha-se atualizado com as novas tendências e conceitos nos princípios de web design. Adicioná-los ao seu site vai mantê-lo com um visual novo, fresco e envolvente.
Resumo
Uma loja de varejo bem projetada melhora a experiência do cliente, enquanto que uma loja pobre poderia sempre adiar os clientes de sua marca. É o mesmo com o web design.
Construir um site visualmente atraente é mais do que apenas um projeto divertido. Ele pode ajudar você:
- Profissionalismo no transporte
- Construa confiança com seus visitantes
- Destaque-se de seus concorrentes
- Tráfego orgânico dos mecanismos de pesquisa
Aproveite os princípios do web design neste artigo para construir um site que faça os visitantes dizerem “uau”
Agora que já cobrimos tudo o que sabemos sobre web design, adoraríamos ouvir de você. O que você nota quando visita o site de uma marca? Além disso, você usa algum princípio que não tenhamos mencionado em seu site? Por favor, diga-nos nos comentários abaixo.
Deixe um comentário