8 erros comuns de design da Web a serem evitados a todo custo (e como a Divi pode ajudar)

Usando o WordPress e um tema adequado, é fácil colocar um site em funcionamento em questão de horas. No entanto, criar um design que pareça profissional dá trabalho - especialmente se você não tiver a mão de um pincel virtual.

Felizmente, você não precisa ser um designer experiente para montar um site atraente. Contanto que você faça um esforço para evitar algumas das armadilhas mais comuns, seus projetos devem ter a aparência de um profissional.

Neste artigo, exploraremos o que contribui para um bom web design e oito dos erros mais comuns que as pessoas cometem durante o processo.

Vamos começar!

O que constitui um bom web design

Não existe um padrão universal para o que constitui 'bom' web design, mas existem algumas das melhores práticas que são universalmente aceites por muitos web designers. Por exemplo:

• Um bom web design se concentra em atingir seu objetivo.
• Um bom web design deve levar em consideração a usabilidade.
• Deve destacar os elementos-chave do seu site, bem como sua mensagem.
• Um site bem projetado deve ser fácil de navegar.
• Deve permanecer consistente em todo o site.
• Ele deve ser exibido bem em dispositivos móveis.

Tocamos em alguns desses tópicos no passado e discutiremos alguns deles também ao longo deste artigo. Agora, vamos discutir o que não constitui um bom web design.

8 erros comuns de design da Web a serem evitados a todo custo

Enquanto há uma abundância de erros que você pode fazer ao projetar seu website, decidimos ficar com os oito mais comum e facilmente evitados. Se você fizer um esforço para contornar esses obstáculos, seus projetos devem estar bem à frente do pacote.

1. Fraca legibilidade

Independentemente do tipo de site em que você está trabalhando, o conteúdo escrito provavelmente será dominante. Se isso se aplica a você, é importante tornar cada uma de suas postagens o mais fácil de ler possível, para não frustrar seus visitantes.

Um exemplo de design com pouca legibilidade.

As pessoas podem estar dispostas a tolerar longos parágrafos ininterruptos quando se trata de livros, mas o mesmo não pode ser dito para sites. O conteúdo fácil de digitalizar permite que os visitantes entendam rapidamente o que você está escrevendo e encontrem o que procuram.

Existem várias maneiras de tornar seu conteúdo mais legível, mas estas são as mais simples de levar em consideração:

• Separe suas postagens e páginas em seções lógicas, usando subtítulos, se possível.
• Faça seus subtítulos tão descritivos quanto possível. Isso permitirá que os leitores examinem o conteúdo com mais facilidade.
• Considere implementar um esquema de cores que seja agradável aos olhos. Afinal, você deseja que os visitantes fiquem por perto e leiam seu conteúdo.
• Sempre que possível, use fontes sem serifa para a maior parte de suas postagens. Eles provaram ser mais legíveis do que suas contrapartes com serifa.

Isso deve garantir que seu conteúdo não seja uma tarefa difícil de ler do ponto de vista do design.

Como a Divi pode ajudar

Divi permite que você resolva problemas de legibilidade com facilidade graças aos personalizadores de tema e módulo . Você pode acessar esses dois recursos na guia Divi em seu painel e, em seguida, brincar com as configurações de fonte, o estilo de seus cabeçalhos e até mesmo o tamanho de suas seções se algumas delas forem muito pequenas para serem lidas corretamente.

Se você quiser fazer mais ajustes, pode sempre verificar as configurações de design avançado de cada módulo usando o Divi Builder. Essas seções contêm quase tudo que você precisa para melhorar sua legibilidade (incluindo as que mencionamos anteriormente), e você também pode visualizar quaisquer alterações em seu site sem sair do construtor.

2. Navegação ruim

Um site não deve ser difícil de navegar e qualquer usuário deve ser capaz de encontrar o conteúdo que procura sem ter que procurar por ele. Se o seu site não atende a esses dois critérios, você tem muito trabalho a fazer.

Existem poucas coisas tão frustrantes quanto navegar em um site com uma navegação absurda. Isso pode acontecer se sua barra de navegação for colocada em uma posição ímpar, incluir links quebrados ou for organizada ao acaso. Além disso, essa frustração pode levar a uma taxa de rejeição mais alta, conversões mais baixas (já que as pessoas não conseguirão encontrar o que desejam) e menos visitas de retorno em geral.

Um exemplo de site sem menu de navegação.

Felizmente, a maioria dos sites hoje em dia é bem treinada nos benefícios da navegação simples. No entanto, sempre vale a pena considerar as seguintes dicas para manter o seu fácil de usar:

• Certifique-se de que seu menu de navegação seja fácil de acessar. Recomendamos descartar os chamados menus 'ocultos' ou 'pop-out', a menos que estejamos falando sobre implementações móveis.
• Os usuários devem ser capazes de decifrar para onde cada link os levará e as informações que encontrarão lá.
• Se o seu site inclui várias categorias, pode ser necessário implementar menus de vários níveis. Nesse caso, certifique-se de que seu projeto implique uma hierarquia clara entre os componentes.

Muitas pessoas tendem a montar seus menus de navegação descuidadamente. No entanto, esses elementos podem ser essenciais para o sucesso do seu site e precisam ser tratados de acordo. Não cometa o mesmo erro!

Como a Divi pode ajudar

Divi permite que você ajuste suas configurações de navegação em tempo real usando seu cabeçalho e personalizadores de módulo , que funcionam da mesma maneira que as ferramentas que discutimos na seção anterior. Se você preferir mudar completamente os estilos de navegação, pode fazer isso modificando as configurações do tema:

Finalmente, você também pode ajustar suas configurações de navegação de postagem, usando o Customizador ou o módulo Navegação de postagem . Este recurso permite ajustar quais postagens devem aparecer quando os usuários clicam nas opções Anterior ou Próximo , bem como ocultá-los globalmente ou para dispositivos específicos.

3. Espaço negativo desequilibrado

Se usado corretamente, o espaço negativo pode aprimorar o conteúdo que envolve. Isso permite que você para orientar os olhos de seus visitantes para onde você quer ir.

Como usar o espaço negativo corretamente.

Por outro lado, não deixar espaço negativo suficiente em torno das principais seções pode fazer com que seu site pareça desordenado.

Um exemplo de design desordenado.

Neste exemplo, os usuários podem se sentir sobrecarregados, fazendo com que eles se afastem de seu site e se voltem para um concorrente.

O espaço negativo também pode ser usado para melhorar a legibilidade do seu site. Você pode conseguir isso deixando algum espaço extra entre cada subtítulo e usando imagens e listas para quebrar parágrafos longos. O objetivo aqui é que seu conteúdo pareça organizado e evite que os leitores se cansem. Você também pode aplicar alguns desses fundamentos ao design geral do seu site para manter as coisas com uma aparência limpa (como fizemos em nosso blog).

Conseguir o espaço negativo certo pode ser complicado, mas é uma das maneiras mais simples de conseguir uma aparência moderna e limpa para seus designs.

Como a Divi pode ajudar

As opções de Design avançado e CSS personalizado da Divi permitem que você ajuste praticamente qualquer elemento de seu design, incluindo margens, preenchimento e calhas para qualquer seção que você escolher, o que é mais do que suficiente para ser criativo usando o espaço negativo:

Modificar cada uma dessas opções não poderia ser mais fácil. Na maioria dos casos, tudo o que você precisa fazer é definir seus valores em pixels, usar o recurso Visualizar para verificar se eles estão na marca e continuar ajustando, se necessário, até chegar lá.

4. Uma frase de chamariz não otimizada (CTA)

CTAs vêm em muitas formas, como botões, cabeçalhos e até mesmo texto simples. No entanto, seu propósito é sempre o mesmo - um aviso para o leitor agir. Confira um exemplo de como os usamos em nosso blog:

Se você sabe uma coisa ou duas sobre marketing na Internet, sabe como são importantes os bons CTAs. Usar a mensagem certa pode desencadear aumentos significativos em suas conversões e a maneira como você as apresenta é igualmente importante. Por outro lado, não implementar CTAs ou usar palavras vagas pode fazer com que suas conversões sejam prejudicadas.

Quando se trata de CTAs, você precisa manter duas coisas em mente - posicionamento e destaque. Veja como fazer:

• Idealmente, você deve tentar incluir CTAs perto do início e do final de suas páginas. Isso permitirá que você capture visitantes que estão prontos para converter imediatamente e aqueles que ficam intrigados depois de ler seu conteúdo.
• Seus CTAs devem se destacar do resto da sua página. Você pode fazer isso aproveitando as vantagens de cores contrastantes, designs de botões exclusivos ou mesmo apenas usando texto em negrito.
• Certifique-se de que seus CTAs sejam fáceis de clicar, principalmente para usuários de celular. Normalmente, isso significa não torná-los excessivamente pequenos.

Prestar um pouco de atenção aos seus CTAs pode render uma grande recompensa quando se trata de conversões. Não importa se você está buscando assinaturas de e-mail ou vendas, os CTAs são vitais para seus esforços.

Como a Divi pode ajudar

O módulo Call to Action da Divi vem com quase todas as opções de personalização de que você precisa para garantir que seus CTAs se destaquem, incluindo configurações que lidam com estilo e otimização móvel:

Além disso, você sempre pode otimizar seus CTAs usando o recurso de teste de divisão integrado da Divi, Divi Leads. Isso traz uma poderosa funcionalidade de teste de divisão para Divi e é gerenciado diretamente de seu painel do WordPress.

5. Falta de otimização para celular

Garantir que seu site seja compatível com dispositivos móveis nunca foi tão importante. O tráfego móvel ultrapassou o dos desktops pela primeira vez durante 2016, e a tendência não deve voltar tão cedo.

Um exemplo de site para celular mal otimizado.

Para simplificar, se você não está otimizando seus designs da web para usuários móveis, agora é um excelente momento para começar. Caso contrário, você corre o risco de assustar um segmento significativo de seu tráfego.

Felizmente, já cobrimos vários dos elementos que você precisa ter em mente quando se trata de otimização para celular, como:

• Legibilidade: certificar-se de que seu conteúdo está bem formatado é fundamental, pois você estará lidando com pequenas janelas de visualização.
• Navegação: Seu menu de navegação deve ser fácil de localizar e usar, considerando que os usuários móveis não terão acesso a um mouse.
• Otimização de CTA: muito parecido com seus menus, eles precisam ser fáceis de identificar e interagir.

Há muito mais a ser dito sobre esse assunto, e já cobrimos em profundidade no passado. Para obter mais informações sobre o assunto, confira esta lista de dez dicas para otimização de web design para celular.

Como a Divi pode ajudar

Quando se trata de otimização para dispositivos móveis, a Divi está à sua volta! O tema é otimizado para capacidade de resposta logo que sai da caixa, e você sempre pode verificar a aparência do seu site em dispositivos móveis usando o recurso Personalizador de temas.

No entanto, se você preferir uma abordagem mais prática, pode ajustar como cada um de seus módulos será exibido por meio de seus menus dedicados de Design avançado . Isso permite que você ajuste os controles de design para desktops, tablets e janelas de exibição móveis.

6. Design Inconsistente e Desfocado

Idealmente, todo o seu site deve apresentar um design uniforme com um foco claro. Usar vários estilos em um único site pode ter um efeito desagradável e pode até mesmo confundir seus usuários.

Além do mais, a criação de uma identidade única para o seu site - como uma paleta de cores e um estilo uniforme - aprimorará sua marca. Veja o Facebook, por exemplo. Eles têm o mesmo estilo há anos - limpo e com uma paleta azul reconhecível. Pode não ser o design mais estiloso da web, mas dá conta do recado e, agora, já está associado à marca.

O estilo que você usa em seu site é principalmente uma decisão pessoal - tudo bem, desde que você o mantenha uniforme. Se você está lutando com os detalhes, sempre pode buscar inspiração em linguagens de design visual, como o design de materiais.

Como a Divi pode ajudar

Todos os módulos do Divi são uniformemente estilizados para ficarem ótimos logo que saem da caixa. No entanto, você também pode personalizá-los individualmente usando as configurações de design avançadas e recursos de CSS personalizado , e também salvar seus ajustes na biblioteca Divi para uso futuro:

O Theme Customizer também permite ajustar a estética de todo o seu tema na hora, e inclui opções para alterar o esquema de cores e estilos móveis, entre outros recursos.

7. Uso incorreto de imagens e animações

Muitas pessoas pensam que incluir imagens e animações sempre que possível em um site é uma coisa boa. Se acontecer de você se lembrar da moda dos sites baseados em Flash no início dos anos 2000, você deve saber do que estamos falando.

Depender demais de qualquer um desses tipos de mídia não só pode fazer com que seu site pareça desordenado, mas também pode afetar suas velocidades de carregamento (e há poucas coisas piores do que um site lento). Além do mais, ele também pode ter um impacto na otimização do mecanismo de pesquisa (SEO) se você errar.

Um exemplo de animação desnecessária em uma página da web.

Claro, quase todo site precisa de alguns gráficos aqui e ali para aprimorar seu design, e a palavra-chave aqui é “aprimorar”. Quaisquer imagens ou animações que você decidir incluir não devem desviar a atenção do seu conteúdo e devem ser usadas apenas se forem relevantes. Por exemplo, neste artigo, incluímos apenas imagens para fornecer contexto, não como o foco principal.

Finalmente, como discutimos em nosso artigo recente sobre tendências de web design, você também deve considerar a substituição de animações completas por microinterações sempre que possível. Eles são muito menos intrusivos e ainda permitem que você destaque ações específicas para o usuário.

Como a Divi pode ajudar

Muitos módulos do Divi vêm com animações de bom gosto integradas que não distrairão os visitantes de seu conteúdo. Você pode até adicionar o seu próprio usando CSS, se não quiser arregaçar as mangas.

Além disso, alguns dos módulos Divi - como Fullwidth Header - permitem que você implemente o recurso popular de paralaxe. Você pode até adicioná-lo manualmente a alguns módulos que não o suportam por padrão, como é o caso do Divi's Slider .

8. Informações de contato 'ocultas'

Por último, mas não menos importante, vamos falar sobre os detalhes de contato. Dependendo do tipo de site que você está criando, é provável que pelo menos alguns de seus visitantes queiram entrar em contato com você ou com quem está no comando. Garantir que suas informações de contato sejam exibidas em destaque é a melhor maneira de habilitar isso.

Nem é preciso dizer, mas alguns sites serão mais afetados do que outros se não facilitarem a localização de suas informações de contato. Por exemplo, detalhes de contato ausentes ou ocultos em um site de serviço podem custar caro em oportunidades de negócios perdidas.

Para a maioria dos sites, recomendamos configurar um formulário de contato simples, que deve estar disponível em sua página inicial, em sua própria seção ou em ambos:

Adicionar seu e-mail ou telefone ao rodapé - ou a um menu secundário - também pode ser uma ótima abordagem, dependendo do design do seu site. Independentemente do que você incluir, a principal lição é que ele deve ser proeminente!

Como a Divi pode ajudar

Assim como a maioria dos recursos principais, a Divi fornece o módulo Formulário de contato que vem predefinido com um formato otimizado. Há algum tempo, também lançamos um pacote gratuito de layouts de páginas de contato, que são uma grande ajuda se você está procurando um design simples e moderno:

Se você preferir ajustar seu design manualmente, o módulo Formulário de Contato do Divi permite adicionar quantos campos você quiser e estilizá-los individualmente. Você pode até configurar mensagens de sucesso para seus usuários lerem depois de fazer um envio, tudo sem sair das configurações do módulo.

Conclusão

Os usuários do WordPress têm mais facilidade do que a maioria para montar um site atraente, graças à sua funcionalidade fácil de entender. No entanto, por causa disso, é fácil que escolhas ruins de design se infiltrem em seu projeto, o que pode facilmente diminuir a qualidade visual geral.

Neste artigo, mostramos as oito armadilhas mais comuns do design da web que você precisa evitar durante seu próximo projeto. Vamos recapitular:

1. Legibilidade deficiente.
2. Navegação ruim.
3. Espaço negativo desequilibrado.
4. Um CTA não otimizado.
5. Falta de otimização para celular.
6. Design inconsistente e desfocado.
7. Uso incorreto de imagens e animações.
8. Informações de contato 'ocultas'.

Qual você acha que é o erro número um de design da web que todo usuário deve evitar? Inscreva-se e compartilhe suas idéias conosco na seção de comentários abaixo!

Imagem em miniatura do artigo por Meilun / shutterstock.com