13 Melhores Práticas de Design de sites para 2021

hoje em dia, você pode obter um site em funcionamento em poucos minutos. Mas há uma diferença entre um site ser ao vivo e ser otimizado.Porque é que o design importa? Demora apenas 0,05 segundos para as pessoas formarem uma opinião sobre o seu site. Sim, você leu corretamente-50 milissegundos para alguém ser levado para longe ou repelido pelo seu site. A maioria dessa opinião é formada a partir do projeto.

o design do site também afeta suas conversões, credibilidade e, em última análise, faz ou quebra o sucesso do seu site. Nenhum site é perfeito, mas você deve otimizá-lo tanto quanto possível.

aqui está algo a ter em consideração também: depois de uma má experiência, 88% dos consumidores são improváveis de retornar a um site. Além disso, um estudo recente descobriu que 77% das agências dizem que um mau design de site é a fraqueza mais significativa de seus clientes.

conclusão: Se o seu web design não for optimizado para a experiência do utilizador (UX), será prejudicial para o seu sucesso. Foi por isso que escrevi este guia.Precisa De Ajuda Com A Concepção Do Website?

Obtenha ajuda para desenhar o seu website ou blog hoje.

começar

muitos factores entram na concepção de um site. Estes são os treze elementos mais importantes a priorizar em 2021. Se você seguir estas melhores práticas, o desempenho do seu site irá melhorar drasticamente.

Use esta lista de verificação para garantir que você tenha um projeto vencedor

1. Minimizar texto
2. Mostrar, não diga
3. Usar frases curtas
4. Tente mais curtos parágrafos
5. Escolha um esquema de cores que se encaixa
6. Fazer o CTA claro
7. Reforçar ações com familiaridade
8. Simplificar a navegação
9. Otimizar o seu design para mobile
10. Priorizar SEO
11. Monitorar sua velocidade de carregamento das páginas
12. Continuamente executar testes A/B

Minimizar texto

não encher suas páginas com enormes blocos de texto.Não estou falando de posts em blogs, que às vezes precisam ir em profundidade (como este!). Estou a falar das suas páginas web (por exemplo, Página Inicial, Página de destino). Mantenha o texto no mínimo aqui.

você quer contar aos visitantes do seu site tudo sobre você, sua empresa, sua marca e seus produtos. Mas você precisa aprender a contar essa história em apenas algumas frases ou— melhor ainda-algumas palavras.

Mostre, não diga

visuais não só ajudá-lo a quebrar o conteúdo escrito, mas eles também podem fornecer uma explicação mais profunda. Mostra aos teus visitantes o que és. Eles vão entender mais num curto espaço de tempo.

Harry página do produto que incorpora tanto desses dois primeiros princípios de design:

Por exemplo, digamos que o seu site vende lâminas de barbear, lâminas, creme de barbear e outros produtos para barbear para os homens.

opera num modelo de Negócio de subscrição e entrega estes produtos aos seus clientes mensalmente. O desenho das suas lâminas é muito bonito — são feitas de madeira esculpida e são boas o suficiente para dar como presente.

ao invés de entrar em todos estes detalhes em sua homepage, você pode simplesmente ter uma foto desses produtos com texto dizendo algo como, “entregue à sua porta.”Transmite a sua mensagem em apenas quatro palavras.

claro, você pode entrar em mais detalhes quanto mais profundo o visitante entra em suas páginas, mas uma longa descrição de texto não é necessária.

Use frases curtas

as frases curtas são mais fáceis de ler.

não bombardeie visitantes com grandes pedaços de texto. Eles não saberão por onde começar a ler e não serão capazes de digerir o seu conteúdo.Misture isso. Se precisar de uma longa frase, siga-a com uma curta. A variedade ajuda.

tente parágrafos mais curtos

Use quebras de parágrafo a seu favor. Não faz mal escrever parágrafos mais longos, mas gosto de manter os parágrafos da minha página inicial em algumas frases.Também é importante não exagerar. Uma coisa boa a mais, na verdade, é uma coisa má.

Inicie cada parágrafo com novas informações, por isso, se alguém estiver a deslocar-se, pode dizer rapidamente se precisa de ler esse parágrafo.Eliminar o texto desnecessário nas suas páginas reduz a confusão e coloca mais ênfase na sua chamada para a acção.

ter o CTA sozinho em seu próprio parágrafo é mais impactante do que enterrá-lo em um monte de texto.

uma ferramenta muito útil nesta situação são balas. Em vez de adicionar parágrafos e escrita em forma longa, considere usar listas. Nessas listas, usa pontos de bala.

estudos mostram que mais pessoas vão olhar para listas com pontos de bala do que outros formatos. Isso porque eles ajudam a melhorar a scannability de uma página e permitem que você destaque os pontos mais importantes que você quer fazer.

escolha um esquema de cores que se encaixe na sua estratégia de marca

as escolhas de cores que faz no seu site são mais importantes do que pensa.

os visitantes julgam o seu site em menos de 90 segundos. A maior parte disso é resultado das cores que você escolher.

a melhor maneira de escolher o esquema de cores do seu site é com a marca. Consulte o seu logotipo. As cores do seu site se encaixam com a sua imagem de marca?Aqui está um exemplo. Pensa no Starbucks.Quando ouvir esta marca, tenho a certeza que tem uma imagem na cabeça. Talvez seja o logótipo, um sinal, ou a localização da loja.Associa alguma cor a esse nome? Agora vamos ver o site deles.

não É nenhuma surpresa que eles foram com um esquema de cores verde.

esta escolha de design corresponde ao seu logotipo e imagem de marca, o que reforça o que os consumidores já associam à marca. Mantendo as coisas consistentes, não há confusão. Seria estranho se visitasse este site e as cores fossem amarelas e vermelhas. Isso não tem nada a ver com a marca deles.Falaremos mais sobre reforço em maior profundidade enquanto continuamos.

torne o seu CTA claro e óbvio

CTAs não deve ser enterrado. Eles precisam ser grandes, ousados e poderosos e eles devem claramente se destacar como a ação que seus visitantes devem tomar a seguir.

no entanto, a maioria dos sites não tem um botão CTA que pode ser visto em menos de três segundos. Há uma boa hipótese de entrares no grupo que demora mais tempo. Não é nessa categoria que queres estar.

não pode conduzir conversões sem um botão CTA eficaz.Quase nunca vejo um CTA nas páginas interiores de uma empresa (as páginas que explicam o que a sua marca faz e o que oferece). Esta é uma grande falha de design. Você não pode esperar que os visitantes para navegar de volta para a sua página inicial para converter.Veja este CTA de Litmus.

veja como este design é simples. Há um texto mínimo na tela, então a mensagem é clara.Como resultado, o CTA “Inscreva-se livre” destaca-se. Na verdade, Litmus até colocou em mais de um local na tela.

onde deve colocar o seu CTA difere de página para página. Por exemplo, posts blog devem ter o CTA para cima para que os leitores vê-lo rapidamente e também na parte inferior depois de ter lido o post.Vai mais fundo: queres optimizar o teu CTAs? Aqui estão 11 maneiras de melhorar suas chamadas para a ação.Se a sua mensagem for a mesma, o seu CTA deve ser o mesmo em todas as páginas.

pense sobre como as pessoas navegam no seu site. Mesmo se você configurar um certo fluxo, nem todo mundo vai pousar em uma página e converter em segundos. Eles podem navegar por aí um pouco primeiro.

por exemplo, digamos que você tem um site de comércio eletrônico. Você não deve alterar o botão CTA de página em página, o que seria parecido com este:

• página inicial: Checkout now
• Category page: Buy it today
• Product page: Clique em comprar

Se um visitante vê um desses botões em sua página inicial, outras em uma página de categoria, e o terceiro em uma página de produto, não há nenhum reforço.Em vez disso, mantenha a mensagem e o estilo consistentes. Aqui está um bom exemplo da marca de jóias e acessórios MVM.

não importa se você está em sua eyewear, Relógios, ou página de jóias. Você vai ver o mesmo “SHOP NOW” CTA para seus produtos.

cada página também permanece consistente com o design geral minimalista, preto e branco de seu site.

aplicar este princípio de design ao seu site também.

vai além do botão CTA. A ideia é ter este tipo de reforço com o maior número possível de elementos.

consistência na linguagem, mensagens e design reforça a sua identidade de marca e deixa uma impressão duradoura na mente dos seus visitantes.

Simplifique a navegação

não deve ser difícil para um visitante do site Encontrar o que eles estão procurando em seu site.Ponha-se no lugar deles. Por que você está visitando o site? Como você realiza essa tarefa? Talvez você queira comprar algo, obter mais informações, ou ver o que há para oferecer. Seja qual for a razão, se os visitantes não descobrirem rapidamente, vão-se embora.Há demasiada concorrência por aí. Os usuários não têm nenhuma razão para suportar com a navegação do site pesado. Tudo o que eles precisam fazer é deixar o seu site e encontrar o que eles precisam em outro lugar.

não tente reinventar a roda com um design complexo. Segue o formato padrão.

por exemplo, a maioria dos sites coloca o menu de navegação horizontalmente no topo de cada página. Se a ementa estiver noutro lugar, pode confundir os visitantes.

quanto menos opções no menu, melhor. Caso contrário, será demasiado difícil para as pessoas encontrarem o que precisam. Este conceito é conhecido como a Lei de Hick.

quanto mais opções você dá a alguém, mais tempo vai demorar para tomar uma decisão. É por isso que desenhos e navegações complexos irão esmagar as suas taxas de conversão.

há uma experiência famosa sobre isso, referido como o estudo jam, que discute o paradoxo da escolha.

a experiência foi realizada numa mercearia local. Os consumidores foram presenteados com 24 compotas para amostra em um dia, e seis compotas no dia seguinte.:

• a maior exibição no primeiro dia atraiu 60% dos compradores, mas apenas 3% dessas pessoas fizeram uma compra.
• a exibição menor de seis compotas no segundo dia atraiu 40% dos compradores, mas 30% deles fizeram uma compra.

ao limitar as escolhas, as conversões foram dez vezes mais altas. Este mesmo conceito pode ser aplicado à navegação do seu site.

eliminar opções desnecessárias do menu. Por exemplo, em vez de ter um botão “home”, Basta usar o logotipo do site para ligar de volta para a tela inicial.

dê uma olhada na página inicial da Square.

O design é super limpo. As opções do menu são extremamente limitadas. Isso torna mais fácil para os visitantes escolher uma seleção que se adapta às suas necessidades.

você vai notar que há um texto mínimo na tela, e o CTA é claro e óbvio.

este tipo de design torna quase impossível que os visitantes do site se percam ou se confundam quando navegam.

Para aqueles de vocês que têm muitas opções em seu site, como uma loja de comércio eletrônico, você pode adicionar uma barra de pesquisa para simplificar o processo de navegação sem o uso de um complicado menu. Um monte de empresas de software colocar suas características em uma aba de recursos ao invés de ter uma aba individual para cada recurso.

Optimize o seu design para dispositivos móveis

Mobile é como a maioria do mundo acessa a Internet. Isso significa que se você não está otimizado para o celular, seu site não vai funcionar bem.Veja estes dados de Hootsuite:

os motores de busca reconhecem isso e recompensam os sites que são móveis-friendly. Aqui estão mais algumas estatísticas para chegar a casa:

• o Google sabe que 87% dos proprietários de smartphones usam seus dispositivos para executar uma pesquisa na Internet pelo menos uma vez por dia.
• 58% de todas as pesquisas do Google são feitas a partir de um dispositivo móvel
• o resultado: 70% dos resultados da primeira página no Google são otimizados para dispositivos móveis.

SEO móvel é a coisa mais importante que você pode fazer a fim de classificar bem no Google. Seriamente.

se o seu site não ficar bem em um smartphone, as pessoas não vão querer ficar por perto. Por isso, certifique-se de que os seus projetos do site são amigáveis com o celular.

vá mais fundo: quer aprender a otimizar o seu site para celular? Confira nosso guia completo para um site amigável móvel.

priorize SEO

tudo o que você faz em seu site precisa circular de volta para SEO.

e não é suficiente apenas adicionar palavras-chave aqui e ali. É um sistema para todo o site de melhorar o conteúdo e direcionar implacavelmente assuntos específicos para construir sua autoridade do site nessa área.Por exemplo, uma página de desembarque de um site de comércio electrónico irá centrar-se em certos elementos da página, tais como::

• usabilidade. Como é fácil para os seus visitantes usar e navegar.
• móvel. Como o seu site parece e funciona em um dispositivo móvel.
• Keyword optimization. As palavras e frases que você quer classificar para.
• Ligações internas. Quantas vezes você link para outras páginas em seu site.
• Manchete. Este é muitas vezes o maior texto de uma página web. Como tal, ele faz a maior parte do trabalho pesado em sua página de desembarque.

crie um sitemap XML. Isso vai tornar mais fácil para rastreadores de motor de busca para analisar o conteúdo em seu site. Um sitemap irá mostrar aos bots a localização das páginas em seu site, quando a página foi atualizada pela última vez, a frequência de atualização, e a relação com outras páginas em seu site.

um sitemap adequado mostra ao Google que você não tem conteúdo duplicado, o que pode danificar o seu ranking SEO.

quando você está projetando seu site, há uma tonelada de elementos menos óbvios que têm em conta o ranking no Google, também.Já analisamos alguns aspectos que você pode melhorar na própria página. Mas outros elementos incluem:

• domínio. A sua URL é muito importante para a sua classificação no google. Factores chave incluem ter a sua palavra-chave no domínio, a idade do domínio, e qual é a sua extensão de domínio (por exemplo, de alta qualidade, como .com,. Net,. gov,.org versus extensões não tradicionais).
• qualidade do local. Seu site deve ser útil para os visitantes. Os factores chave incluem uma página “Acerca de nós”, uma página “contactar-nos”, a frequência com que actualiza o seu website, a facilidade com que é fácil navegar no seu website, o tempo de funcionamento (com que frequência o seu website falha) e os certificados SSL.
• Backlinks. Isto refere-se à frequência a que o seu site Está ligado por outros sites. É um fator crucial para a classificação bem no Google. Os principais fatores incluem o número de páginas de ligação, a qualidade e autoridade dos sites de ligação a você, o texto âncora que eles estão usando para link para você, e se esses links vêm ou não de domínios .edu ou .gov.

monitore sua velocidade de carga de página

eu sei o que alguns de vocês estão pensando. O que a velocidade de carregamento de páginas tem a ver com o web design? Todo.

claro, os tempos de carregamento estão relacionados com o plano de hospedagem do seu site, Servidor, tráfego e coisas dessa natureza. No entanto, as escolhas de design também podem ter impacto nos seus tempos de carregamento.Cada vez que você adicionar um elemento ao seu site, especialmente imagens, vídeos e outros arquivos de mídia complexos, seus tempos de carregamento podem ser afetados. Como tal, pode abrandar os pedidos de HTTP.

tempos de carga lentos conduzem a elevadas taxas de abandono. Não podes ignorar isto. Se as tuas Páginas demorarem a carregar, vai ser um grande problema.

Além disso, 25% das pessoas abandonam sites que levam mais de quatro segundos para carregar. Sim, quatro segundos. É tudo o que tens, ou perdes 25 em cada 100 visitantes. A maioria dos visitantes espera que uma página seja carregada em dois segundos ou menos.Como pode aplicar isto ao seu web design?

• Reduzir o tamanho de ficheiro das imagens
• aproveitar o cache do navegador ferramentas
• Reduzir os pedidos de HTTP
• Melhorar a sua TTFB (tempo para o primeiro byte)
• Minify e combinar seus arquivos

Existem muitas ferramentas disponíveis on-line para ajudar você a realizar essas coisas. Por exemplo, confira o plugin WordPress Rocket como um recurso para minificar e combinar seus arquivos. E use a ferramenta de Insights de Velocidade da Página do Google para ajudá-lo a monitorar seus tempos de carregamento sempre que você fizer alterações de design em seu site.

continuamente executar testes A / B

quando se trata de design de seu site, você não pode simplesmente configurá-lo e esquecê-lo.Como eu disse anteriormente, nenhum site é perfeito. Há sempre formas de melhorar o seu design.É por isso que precisa de fazer testes A / B. Estes permitem que você faça melhorias regulares para o seu site e testar elementos para ver o que funciona melhor e, mais importante, o que não está funcionando em tudo.

quase todos os elementos do seu projeto do site podem ser testados. Por exemplo, você pode criar duas páginas de pouso diferentes que têm CTAs diferentes, mas são os mesmos. Se uma página de destino funciona melhor do que a outra, você vai saber que o seu CTA é provável obter o trabalho feito.

Aqui estão algumas sugestões rápidas para começar na direção certa:

• Teste a localização do seu CTA botão
• Testar a cor do seu CTA botão
• Teste CTA copiar
• Teste as imagens que você está usando nas páginas de destino
• Teste de redação variações de texto na tela
• Teste o tamanho da sua barra de navegação

Há tantas opções, Eu poderia passar o dia todo falando sobre isso. Para aqueles de vocês que não estão familiarizados com testes A/B ou precisam de alguma ajuda, confira meu guia sobre tudo o que você precisa saber antes de iniciar testes A/B.

Conclusion

Saying that the design of a website is important would be an understatement. As suas escolhas de design da web irão, em última análise, ter impacto se o seu site é ou não bem sucedido.

• o website de todos pode ser melhorado. Use esta lista como um guia como um recurso para ajudá-lo a fazer essas melhorias.
• não fique sobrecarregado. Não estou dizendo que você precisa implementar todas essas sugestões de design de um dia para o outro, mas você precisa começar em algum lugar.Não tirei estas ideias do ar. Tudo nesta lista é apoiado por pesquisas e estatísticas relacionadas com os princípios de design.

lembre-se: cada site é um trabalho em progresso. Se você colocar o trabalho em e sempre afinar o seu site, você vai melhorar a sua vantagem com os seus concorrentes.

não importa se o seu site é novo ou se já existe há uma década. Estas são as melhores práticas de web design que você precisa seguir em 2021.Precisa De Ajuda Com A Concepção Do Website?

Obtenha ajuda para desenhar o seu website ou blog hoje.

Começar