Melhores práticas de web design, dicas e diretrizes que você deve conhecer

8 min.
Melhores Práticas de Web Design

Quais são as melhores práticas em web design? Como implementá-los com sucesso em seu próximo projeto de web design? E o que definimos como padrões de design e melhores práticas em web design?

O que queremos realmente dizer com "melhores práticas"?

No desenvolvimento web, existem regras fixas que têm principalmente a ver com a legibilidade e limpeza do código, bem como com a segurança de um website. No web design, por outro lado, a terminologia é um pouco mais difusa e as regras são mais abertas a interpretações próprias.

Melhores Práticas: Web design é mais do que estética

As melhores práticas em web design são uma mistura de design visual, design de experiência do usuário, acessibilidade e escrita de conteúdo - com foco em SEO.

As melhores práticas em web design são um conjunto de regras a seguir para satisfazer as expectativas gerais dos utilizadores. Além disso, são diretrizes para uma maior clareza e uma melhor experiência do usuário.

Neste artigo, vou apresentar-lhe as melhores práticas para um bom web design. Para cada área, darei dicas sobre como ganhar mais conhecimento e apresentarei ferramentas e exemplos que o ajudarão no seu próximo projeto.

Eu também cubro brevemente o tema das melhores práticas no desenvolvimento de WordPress . Como você provavelmente sabe, o planejamento e gestão de projetos são uma parte importante do web design. Neste post eu deixo os dois tópicos de fora por enquanto, porque isso iria além do escopo aqui.

Melhores Práticas: Desenho Visual

Começamos agora com os padrões estabelecidos para o design visual: Quais são as melhores práticas em design visual? E quais são os factores que contam?

Reconhecimento e marca

O site deve se encaixar com o resto da imagem da empresa e deve seguir o guia de estilo. Portanto, consulte o site para as seguintes perguntas:

  • Você pode dizer à primeira vista para qual empresa o site foi criado?
  • O guia de estilo foi integrado?
  • Os operadores do site são reconhecíveis a partir dos elementos visuais?
  • Os elementos visuais são utilizados de forma consistente?
  • A linguagem utilizada no site reflete a marca?

O Google está bem na frente quando se trata de uma marca consistente. Não consigo pensar em nenhuma outra marca que tenha tantos produtos diferentes e que ainda consiga dar a cada produto a sensação da empresa. Mesmo quando olho para um produto Google anteriormente desconhecido, posso associá-lo directamente à marca.

Como é que o Google o faz?

Isso inclui o uso consistente das cores do Google, tipografia, espaço em branco proeminente, chamada consistente para ações e navegação. Os logótipos também têm uma certa consistência que funciona entre empresas e categorias - embora esta última não signifique necessariamente que o design vá suscitar gostos.

Com coerência no branding, primeiro você só analisa se o site reflete a empresa e sua marca da melhor maneira possível.

Padrão de web design e usabilidade

Outra "melhor prática" é definida pela integração de normas. Isso inclui, por exemplo, a colocação do logotipo no canto superior esquerdo, o aparecimento de botões, links, etc. Estes ajudam os visitantes do seu site a encontrar o seu caminho de forma rápida e fácil. Portanto, estes padrões são indispensáveis para a implementação de uma usabilidade bem sucedida.

Mais recursos sobre a usabilidade:

Por que você deveria estar interessado na usabilidade e na experiência do usuário como web designer? Você pode encontrar abordagens mais abrangentes para o tema da usabilidade neste artigo e em https://www.usability.gov/.

O que define um padrão de web design?

Nós definimos padrões de design amplamente utilizados em web design por padrões de design da IU. Como são definidas as normas, Andy Crestodina explica muito bem no seu artigo sobre as normas de web design.

De acordo com isto, uma abordagem de design deve ser usada em pelo menos 80 por cento dos sites para contar como padrão. Qualquer outra coisa ou é um hábito (50-79 por cento) ou até mesmo traz inconsistência e confusão (0-49 por cento) para o seu site.

Desenho harmonioso: a regra dos terços

Eu já relatei sobre o tema do web design harmonioso. Desta vez, gostaria de entrar em mais detalhes sobre a regra dos terços.

Isto tem sido usado há várias centenas de anos - principalmente nas artes visuais e mais tarde na fotografia. Aqui, como mostrado no desenho, o desenho é dividido em 9 caixas de igual tamanho:

Design de Interação
Fonte: interaction-design

Ao criar websites, a regra dos terços também o ajuda a colocar as informações mais importantes de tal forma que o visitante possa percebê-las diretamente. 

Em termos simples, um elemento visual não deve ocupar mais de três caixas e estar localizado em um terço do layout. Os nós também são particularmente adequados para colocar mensagens importantes e chamar para ações.

No Photoshop, você pode usar a "Crop Tool" e a configuração "Rule of Thirds" para verificar e ajustar os seus layouts de forma rápida e fácil. Para ilustrar a Regra dos Terços, dei uma olhada mais de perto no site da Marqeta:

Melhores Práticas

O produto, bem como a sua mensagem, estão bem distribuídos pelos nós. Aqui, o design poderia tornar-se um pouco mais eficiente movendo um pouco o CTA. No entanto, a harmonia do desenho sofreria um pouco:

Melhores Práticas

A versão móvel mostra claramente que a mensagem preenche o terço inferior do layout, enquanto que o produto é apresentado bastante centrado. Aqui podemos repensar a colocação do CTA.

Os chamados "heatmaps" também o ajudam a descobrir onde os visitantes do seu site procuram principalmente e clicam. A ferramenta Crazy Egg, por exemplo, oferece um serviço (pago) aqui.

Outra forma de verificar o seu design é o chamado teste de borrão. Aqui você tira a nitidez do seu layout (por exemplo, com a ajuda do Photoshop e do "Borrão Gaussiano" - 12 por cento). Se os usuários não conseguem mais ler o conteúdo, rapidamente fica claro onde o foco está quando visualizam o site. Este teste também é bem adequado para a análise da AIC. Ainda é reconhecível como tal?

Best-Practices-in-Web-Design

Para isso usei novamente o site da Marqeta. Especialmente destacado é o CTA e o produto certo, seguido pela mensagem e, finalmente, o logotipo e a segunda CTA:

Best-Practices-in-Web-Design

A versão móvel que eu desarmei ainda mais para testar o que resta depois. Aqui, o produto chama a atenção primeiro, seguido do CTA e do logotipo. Você pode fazer este teste com a página inteira - melhor ainda na fase de design. Aqui você pode analisar rápida e facilmente quais elementos do seu design são proeminentes e decidir se é isso que você quer.

Texto e SEO

A criação de websites também inclui, naturalmente, conteúdo escrito. Há copywriters profissionais que - com um olho em SEO, usabilidade e guia de estilo - escrevem conteúdos significativos para o seu website. No entanto, há também algumas diretrizes que você mesmo pode seguir. 

Deve prestar especial atenção à extensão e legibilidade dos textos - muitas vezes os textos são demasiado longos e complicados. 

Mesmo que o público alvo esteja habituado a um certo jargão, deve estar sempre ciente de que a nossa capacidade de atenção num website é muito menor do que, por exemplo, quando lê artigos técnicos. Em vez disso, quando navegamos em sites, estamos à procura de informações específicas. Nós escaneamos o conteúdo, por assim dizer, em vez de realmente tomarmos o tempo de lê-lo corretamente.

O Google também lhe dá menos pontos se as frases na sua página forem muito longas e mais pontos se estiverem ligadas pelas chamadas"palavras de transição".

Posts interessantes sobre SEO também incluem:

Acessibilidade

Infelizmente, a acessibilidade da Web ainda é um tópico marginal - e muitas vezes ignorado. Aqui, também, há abordagens simples que poderíamos considerar desde o primeiro desenho. Por exemplo, você usa predominantemente cores para destacar informações? 

Você pode testar isso facilmente olhando para o seu site em preto e branco:

Best-Practices-in-Web-Design

Para isso, analisei novamente o mesmo site. Mesmo sem as cores, a mensagem se transmite claramente. A AIC superior direita pode ser problemática em termos de contraste.

Para verificar isto com certeza, existe o "Verificador de Contraste". A relação de contraste padrão é de pelo menos 4,5:1 para texto normal e 3:1 para texto grande como manchetes:

Best-Practices-in-Web-Design
Best-Practices-in-Web-Design

Se eu especificar os tons de cinza, a CTA não é suficientemente contrastante, mas na variante de cor é suficiente.

http://colorsafe.co/ é outra ferramenta para determinar as cores e sua força de contraste. Aqui você pode experimentar diretamente diferentes combinações de cores. Você recebe diretamente a relação e tem a opção de selecionar as fontes com e também de acordo com qual padrão WCAG você quer alinhar a sua seleção.

O uso de cores para representar visualmente o manuseio de erros pode causar problemas. Tome elementos de forma, por exemplo. Os erros são muitas vezes representados destacando a caixa de entrada em cores. Para alguém com uma deficiência de cor, isto pode levar a que os erros não sejam reconhecidos e assim não sejam resolvidos. 

Ao planejar, o usuário deve levar isso em consideração e, portanto, sempre se certificar de que outra representação do erro esteja disponível. Aqui pode encontrar mais factos e recursos interessantes sobre acessibilidade, assim como dicas valiosas para criar um site WP acessível.

Outros recursos

Resolução e desenho de dispositivos cruzados

Não há, provavelmente, nenhuma regra no web design que seja mais frequentemente abordada - e mais frequentemente desconsiderada - do que "mobile first”.

Com esta abordagem, o conteúdo é criado para os dispositivos móveis e depois adaptado em conformidade para os maiores. O oposto disto é alinhar o design à área de trabalho e à empresa e depois adaptá-lo em conformidade para dispositivos menores. 

Duas outras abordagens vêm-me à cabeça:

  • Crie um website separado para cada dispositivo móvel e desktop e depois acesse-o de acordo.
  • Exibir o site como uma versão desktop no telefone celular

A primeira pode ser a abordagem certa - dependendo do projeto - mas não é muito difundida, pois é muito intensiva em custos e tempo. Infelizmente esta última ainda é vista com demasiada frequência na web e por isso precisa urgentemente de ser acrescentada à lista de "melhores práticas". Você pode encontrar mais dicas de otimização móvel aqui.

Mobile first não tem necessariamente de ser sempre o caminho certo: Pesquisas sobre o grupo alvo e seu comportamento na internet podem mostrar rapidamente de quais dispositivos o seu site é acessado principalmente. 

A idéia por trás disso não é apenas que o conteúdo seja preparado visualmente, mas também que as condições externas alteradas sejam levadas em conta. Você pode ler mais no artigo Mobile-First UX Design Is No Longer a Trend.

A tabela a seguir ilustra claramente quais telas são acessadas com mais freqüência na Internet. Isto pode ajudá-lo a decidir para que telas você quer otimizar o seu site. Mas note que tal generalização só pode ser usada como uma diretriz. Estas estatísticas não podem substituir uma investigação dos seus grupos alvo.

Best-Practices-in-Web-Design
Fonte : https://www.hobo-web.co.uk/best-screen-size/

Melhores Práticas para WordPress

WordPress Codex

WordPress oferece-lhe um número incrível de possibilidades para apresentar os seus desenhos na web. Mas mesmo aqui há padrões e melhores práticas que você deve seguir.

O códice WordPress

WordPress fornece um código geral, que pode ajudá-lo a lidar com o tema com mais detalhes.

WordPress Plugins e Themes

Ao escolher o direito Plugins e Themes , não é só a sua funcionalidade actual que é importante. É também uma boa idéia ler resenhas e se familiarizar com a freqüência com que as atualizações são oferecidas e investigar se o Plugin, ou Theme, continuará a ser desenvolvido no futuro. WordPress As ferramentas que são desenvolvidas regularmente tendem a ter um suporte mais ativo. Também é mais provável que se mantenham compatíveis com futuras versões do seu site.

WordPress Atualizações e Segurança

Actualizar o seu Themes e Plugins regularmente reduz a vulnerabilidade ao acesso indesejado. Os bugs são resolvidos e os seus sites são adaptados ao ambiente técnico em constante mudança. Segurança Plugins como WordFence também ajudam a manter o controle do seu site e sua segurança e a reagir a problemas a tempo. Um certificado SSL deve ser integrado em todos os sites. 

Melhores práticas em web design: Suas perguntas

Que perguntas você tem para Sonja? Que melhores práticas você mesmo pode recomendar? Esteja à vontade para usar a função de comentários. Quer mais dicas sobre web design e desenvolvimento? Depois siga-nos no Twitter, Facebook ou através da nossa newsletter.

Depois de estudar design de jogos e escrita criativa na verde Auckland, na Nova Zelândia, a Sonja especializou-se em design de web e aplicações e seu desenvolvimento. O seu foco é a gamificação e a exploração da motivação e experiência do utilizador, aliado à paixão e curiosidade pelas tendências tecnológicas.

Artigos relacionados

Comentários sobre este artigo

Escreve um comentário

O teu endereço de e-mail não será publicado. Os campos obrigatórios estão marcados com *.