11 erros de design que os compradores de temas WordPress costumam cometer

Você já se viu criando um site com o tema WordPress, mas o resultado final não se parecia em nada com a demonstração do tema? Listei 11 erros comuns de design que muitas vezes são ignorados pelos criadores de sites.

Você encontrou o tema WordPress perfeito. A demonstração do tema parecia impecável. Seu cliente gostou muito e concordou com você em fazer uma compra. Você comprou, instalou e começou a editar o tema de acordo com as necessidades do cliente.

Você mudou o logotipo, mudou as cores do tema, inseriu as imagens do slider e o conteúdo, mas no final, o site que você criou simplesmente não se parece com a demo. Você sabe que algo está errado, mas simplesmente não consegue detectar o quê. Soa familiar?

Nos últimos 5 anos, trabalhando como designer no negócio de temas WordPress, vi inúmeros exemplos de belos sites criados com nossos temas WordPress.

Mas de vez em quando, vejo um site com uma base sólida, mas com alguns pequenos erros de design, que arruínam a experiência geral. Estou falando de pequenas coisas que podem ser facilmente consertadas por qualquer pessoa.

Eu sei que é difícil identificar essas falhas, especialmente se você não for designer. Por esse motivo, decidi escrever um post no blog sobre como melhorar o site do seu cliente para ficar ainda melhor.

Marque esta postagem no blog e percorra a lista abaixo na próxima vez que você construir um site com o tema WordPress. Levará apenas uma ou duas horas para remover todas as imperfeições, mas o resultado ficará 100% melhor.

1. Contraste ruim do texto no controle deslizante

Eu tenho falado sobre o que fazer e o que não fazer sobre imagens deslizantes, então vou ser breve agora. Os princípios são simples:

• Se a cor do texto no controle deslizante for branca, escolha um fundo escuro. Se o texto do controle deslizante estiver escuro, escolha um plano de fundo claro.
• Certifique-se de que a área onde o texto aparece não tenha muito ruído visual no fundo. O fundo desordenado reduz a legibilidade do texto na frente e uma proposta de valor primária escrita no controle deslizante pode ser perdida.

Felizmente para você, a maioria dos nossos temas inclui uma opção de fundo sólido semitransparente atrás do texto. Nossos temas WordPress mais recentes também têm uma sombra aplicada a todo o texto no controle deslizante, para que o contraste seja ainda melhor.

2. Imagens deslizantes muito grandes

Quando olho para os sites feitos com nossos temas WordPress, muitas vezes noto que os usuários usam imagens deslizantes muito grandes. Ter uma imagem deslizante que ocupe 100% da altura da tela só é aceitável se você for um fotógrafo e as fotos forem seu produto final. Em outros casos, fique do lado seguro e siga as recomendações do tema. Ele preservará o equilíbrio visual perfeito do seu site.

3. Pobre espaço branco (negativo)

Espaço branco ou negativo em web design é um espaço em branco entre widgets, blocos de texto, imagens ou qualquer outra parte do site, que ajuda a organizar tudo e entregar um fluxo claro e lógico para o usuário final.

Não importa o quanto tentemos, como provamos todos os aspectos possíveis do tema WordPress, os usuários sempre encontram uma maneira de destruir o espaço em branco.

Felizmente para você, estamos usando um poderoso Construtor de Páginas em nossos temas, o que significa que você pode ajustar seus espaçamentos no site com facilidade. O Page Builder permite alterar os preenchimentos do widget, preenchimentos da linha e permite modificar o tamanho da medianiz entre as colunas.

Não vou falar de detalhes e prefiro dar alguns exemplos práticos.

• Na maioria dos casos, os criadores de sites usam muito pouco espaço em branco, o que não permite que o conteúdo respire, então, geralmente, quanto mais espaço em branco você aplicar, melhor será o resultado.
• Mostre a relação entre elementos com espaçamento. Os elementos que vão juntos, por exemplo, o título da postagem do blog e a data da postagem, devem estar mais próximos do que os elementos que têm uma finalidade diferente, como data da postagem do blog e cabeçalho da página.
• Seja consistente com o espaçamento. Isso significa que cada linha do seu site deve ter a mesma quantidade de espaço em branco na parte superior, inferior, esquerda e direita.

Então, se trata de widgets. Eles devem ter uma quantidade igual de preenchimentos e margens aplicados, não importa onde apareçam na página. A consistência trará equilíbrio ao seu site e atrairá o foco para o que importa – o conteúdo.

4. Má compatibilidade com dispositivos móveis

O procedimento e as regras são os mesmos da área de trabalho acima. Você ainda precisa prestar atenção ao espaço em branco, mas para dispositivos móveis, existem algumas regras adicionais:

• Um deles é um design amigável para os dedos. Como os dedos são nossas ferramentas para navegar pelo site enquanto navega no celular, precisamos adaptar a página a eles. Quando criamos um tema WordPress, garantimos que os botões e elementos clicáveis ​​não sejam menores que 50px. Se você estiver adicionando elementos de terceiros ao tema do WordPress, verifique se eles são grandes o suficiente. Além disso, certifique-se de que esses componentes acionáveis ​​não fiquem muito juntos para evitar cliques incorretos.
• Otimize imagens para velocidade. Muitas pessoas acessam sites em movimento, o que significa conexão não confiável, às vezes ruim. Tente eliminar o carregamento lento do site (no celular) e otimize suas imagens.
• Teste seu site em um dispositivo móvel real. Você pode redimensionar a janela do navegador para ver a visualização móvel, mas quando terminar todos os ajustes, dê uma olhada na aparência do site no dispositivo móvel real.

Sistemas operacionais, navegadores e a experiência geral do usuário diferenciam entre desktop e celular e isso pode gerar algumas desigualdades.

O Google desenvolveu um teste de compatibilidade com dispositivos móveis, uma ferramenta para verificar se o seu site é compatível com dispositivos móveis.

Garantimos que cada um dos nossos temas WordPress passe com facilidade.

5. Usando cores que simplesmente não andam de mãos dadas.

Escolher a combinação de cores certa é uma coisa complicada. Se você é talentoso, pode seguir sua intuição. Caso contrário, use as ferramentas feitas especialmente para isso.

Vou te mostrar um exemplo:

A maioria dos nossos temas WordPress são feitos de cores primárias e secundárias. Se o seu logotipo se parece com o da Shell, a decisão de escolher a cor primária e a secundária é simples. O vermelho será usado como a cor primária para call-to-actions. A amarela será uma cor secundária, usada para fundos e elementos de suporte.

Se o seu logotipo se parece com o logotipo da Starbucks e é feito de apenas uma cor, você precisará encontrar a secundária.

Uma opção é escolher a mesma cor verde para a cor primária e secundária, mas eu desencorajaria isso.

Se você não tem coragem de designer e escolher os combos de cores é difícil para você, eu tenho uma solução para você, chamada Coolors. É uma ferramenta simples de usar para criar belas combinações de cores.

Vá para o aplicativo deles e insira o código de cor hexadecimal (no meu caso #006241) da sua cor primária na parte inferior da coluna. Em seguida, bloqueie-o clicando no ícone de cadeado e pressione a barra de espaço.

Dica: Não sabe como obter o código hexadecimal do seu logotipo? Confira se existe uma extensão útil do Chrome para isso.

Meu resultado fica assim.

Como você pode ver, todas as cores mudaram, mas sua cor primária permanece a mesma. Se você não obteve a cor desejada, continue pressionando a barra de espaço.

Se o seu único motivo para escolher a cor secundária for usá-la no site e essa cor não aparecer em nenhum outro lugar, não escolha uma cor muito forte. No nosso caso, o laranja brilhante está fora.

Você precisa escolher uma cor mais sutil, que não destrua sua marca e suporte suavemente sua cor principal, no nosso caso, verde.

Minha escolha pessoal seria o segundo bege (#d8c99b) porque funcionaria perfeitamente com o verde e definitivamente não o ultrapassaria.

Talvez essa cor bege em particular não seja a cor perfeita, mas é uma opção boa o suficiente. Aqui está o porquê. Ao escolher uma cor, tente pensar em como o texto escuro ou branco ficará nela.

No meu exemplo, o texto escuro ficaria bem, mas adicionar um pouco mais de contraste e escolher uma cor bege um pouco mais clara o tornaria ainda melhor.

Felizmente para você, o aplicativo Coolors tem outro ótimo recurso. Você pode selecionar diferentes tons de cada cor. Passe o mouse sobre uma coluna colorida e clique no primeiro ícone, chamado “Tons alternativos”. Em seguida, selecione os tons mais claros ou mais escuros e sempre tenha o contraste em mente.

Fiz uma demonstração rápida de como essas duas cores funcionariam juntas. Para isso, peguei nosso tema Adrenaline WordPress e o converti no site da Starbucks.

Fiquei impressionado com a rapidez com que mudei o tema Adrenaline WordPress para algo completamente diferente, em literalmente 2 minutos. Tudo o que eu precisava fazer era mudar duas cores, fazer upload da imagem personalizada do herói e fazer upload de um logotipo personalizado. Tente você mesmo.

6. Não atrapalhe a navegação do seu site

Estruture a navegação do seu site de maneira legível e digestiva. Agrupe coisas menos importantes em listas suspensas ou inclua-as na barra superior ou no rodapé. Torne a hierarquia de navegação lógica e garanta que todos os mesmos níveis do menu tenham a mesma prioridade.

Por exemplo, os termos e os acordos são geralmente menos importantes do que o principal apelo à ação, portanto, eles não podem aparecer no mesmo nível. Coloque os Termos em um rodapé e o call to action principal no cabeçalho.

Mantenha sua navegação principal limpa, com no máximo 5 ou 6 opções.

7. O logotipo é muito grande

Existe uma frase famosa, que todos nós recebemos do nosso cliente em algum momento – “torne o logotipo maior”. Seu trabalho, como criador de sites, é educar seu cliente de que não há necessidade de ter um logotipo de 400 px de largura porque os visitantes do site não visitam seu site para ver o quão bonito é seu logotipo.

Carregue o logotipo em tamanho, recomendado pelo autor do tema WordPress. Eles provavelmente sabem melhor qual tamanho de logotipo funciona melhor com o tema específico.

O logotipo é apenas uma das muitas coisas no site e tem que jogar harmoniosamente com outros conteúdos.

Se você não acredita em mim, olhe para qualquer grande marca na rede mundial de computadores e verá que 98% delas têm um logotipo, grande o suficiente para suportar todo o conteúdo. O usuário precisa saber qual marca está por trás do site, mas também tem que ter foco em serviços, ofertas e call to actions principais.

8. Baixa qualidade do logotipo

Aconteceu comigo uma vez, que eu consegui o logotipo no formato Microsoft Word (.doc). O que eu quero dizer é que os clientes sempre encontrarão uma maneira de surpreendê-lo.

Em relação ao logotipo, é importante tê-lo na melhor condição possível, com pixels perfeitos. Para isso, você precisará de um formato vetorial (.pdf, .ai, .svg, .eps). Então você precisa ir ao seu aplicativo de vetor favorito (por exemplo, Adobe Illustrator) e exportar esse logotipo para o tamanho recomendado pelo criador do tema. Essa é a melhor possibilidade para você obter o logotipo mais nítido.

Se você obtiver o logotipo em formato .png, pode funcionar bem, mas pode perder alguma nitidez ao redimensionar. Se o redimensionamento estragar o logotipo, acesse fiverr.com e invista $ 5 para redesenhá-lo em um formato vetorial. Mais um pequeno investimento para um grande resultado.

9. Qualidade de imagem ruim

A situação está melhorando a cada ano, mas ainda encontro empresas que não estão colocando atenção ou recursos suficientes em fotos de qualidade.

Se você tem um site que vende um determinado produto, as imagens de qualidade provavelmente têm o maior impacto no cliente em potencial e desempenham um papel crucial, quando um cliente em potencial está decidindo se compra ou não um produto.

Se o seu cliente não lhe forneceu fotos de alta qualidade ou se ele não as possui, é seu trabalho convencê-lo a investir $ 100 e comprá-las online.

Uma excelente fonte de fotos de alta qualidade é a Shutterstock, onde você pode obter 50 imagens por US$ 99 por mês. É o suficiente para um site pequeno e terá um tremendo impacto nos usuários do seu site e na confiança geral na marca do seu cliente.

Dica: Ao escolher uma foto, tente evitar fotos genéricas, polidas e irreais. Um exemplo disso é um cara caucasiano, com dentes super brancos e pele impecável.

Pode ter um efeito contrário, mas certamente não causará nenhum impacto nos visitantes. Tente encontrar imagens com alguma genuinidade. Para simplificar, use imagens que tenham uma aparência realista.

10. Não estilizando os plugins de terceiros

No processo de criação de um novo tema WordPress, sempre fazemos uma pesquisa do nicho para o qual estamos criando um tema. Estamos sempre ansiosos para incluir todas as funcionalidades necessárias no tema, mas às vezes seu cliente quer apenas outra coisa. Esse é o momento em que os plugins do WordPress entram em ação.

Nada de errado com isso. Depois de instalar e incluir o plugin no tema WordPress, dê uma olhada em como ele fica no front-end.

Muitas vezes noto que nossos clientes esquecem de estilizar botões, formulários e cores no mesmo estilo que o resto do tema.

A aplicação de classes CSS já escritas ao seu plugin de terceiros levará apenas 10 minutos, mas terá um impacto significativo no final.

Se você não tem o conhecimento para fazer isso, nós podemos fazer isso por você.

11. Má legibilidade

Há uma afirmação famosa de que a tipografia é 95% do design da web – então faça certo.

Se você usar widgets da mesma forma que fizemos a demonstração do tema, não haverá problemas, pois nos esforçamos muito para uma boa legibilidade, mas se você estiver modificando o layout e o estilo das fontes, faça certifique-se de seguir as regras abaixo:

• Cada linha deve ter de 60 a 80 caracteres , incluindo espaços.
• Se você estiver configurando uma altura de linha personalizada, multiplique o tamanho da fonte com 1,4 a 1,6. Se você tiver um tamanho de fonte de 16px, sua altura de linha deve estar entre 22,4 e 25,6.
• Deixe espaço suficiente ao redor do texto.
• Não use cores de texto muito claras. Tudo mais brilhante que #777777 tem um impacto adverso na legibilidade.
• Não use fontes menores do que o recomendado. O mínimo que você pode atingir é 14px, mas eu recomendo que você escolha 16px ou 18px .
• Tenha cuidado ao instalar fontes personalizadas no tema. Algumas fontes são feitas apenas para títulos e não funcionam bem em tamanhos menores. Algumas fontes são feitas para impressão e não funcionam bem em telas e algumas fontes são apenas mal feitas. Pense duas vezes quando quiser substituir a fonte do tema padrão do WordPress por outra coisa. Se você ainda quiser alterá-lo, fique do lado seguro e escolha os populares.

• Use o alinhamento correto. Em 95% dos casos, o alinhamento do texto à esquerda é o caminho a seguir. Nos outros 5%, permito que você use o alinhamento centralizado, mas certifique-se de usá-lo apenas para texto de suporte curto.

Alinhamento à direita (exceto para idiomas da direita para a esquerda) e alinhamento justificado estão fora de questão. Período.

Conclusão:

Da próxima vez que você fizer um site para o seu cliente, percorra a lista acima e tente corrigir todas essas pequenas imperfeições. Levará apenas uma ou duas horas, mas no final você obterá um resultado muito melhor, o que significa um cliente mais feliz e uma referência melhor. Além disso, você nos fará um favor porque teremos um fantástico exemplo ao vivo para mostrar.

Se você tiver alguma dúvida, sinta-se à vontade para comentar abaixo.

EDIT: Este artigo foi traduzido para o holandês – deixe-me saber nos comentários abaixo se você gostaria de traduzi-lo para o seu idioma.