Melhores práticas, dicas e diretrizes em web design 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 realmente como padrão de design e melhores práticas em web design?

O que entendemos realmente por "melhores práticas"?

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

As melhores práticas: Webdesign é 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 que devem ser seguidas para satisfazer as expectativas gerais dos utilizadores. São também directrizes para uma maior clareza e uma melhor experiência do utilizador.

Neste artigo vou apresentar-lhe as melhores práticas para um bom web design. Para cada área, dou-lhe dicas sobre como pode adquirir mais conhecimentos e apresentar ferramentas e exemplos para o ajudar no seu próximo projecto.

Também vou abordar brevemente o tema das melhores práticas na área de WordPress Desenvolvimento. Como você certamente sabe, o planejamento e a gestão de projetos são uma parte importante do web design. Neste artigo vou deixar os dois tópicos de fora por enquanto, pois isso iria além do escopo deste artigo.

As melhores práticas: Desenho Visual

Começamos agora com os padrões estabelecidos para o design visual: Quais são as melhores práticas no campo do design visual? E que factores estão envolvidos?

Reconhecimento de características e marca

O site tem de se adaptar ao resto da aparência da empresa e deve seguir o guia de estilo. 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á na vanguarda de um branding consistente. Não consigo pensar em nenhuma outra marca que tenha tantos produtos diferentes e ainda assim consiga dar a cada produto o sentimento da empresa. Mesmo quando olho para um produto Google que nunca tinha visto antes, posso associá-lo directamente à marca.

Como é que o Google faz isto?

Entre outras coisas, através do uso consistente das cores do Google, tipografia, espaço em branco distinto, Chamada a Ações consistente e navegação. Os logotipos também mostram uma certa consistência que funciona entre empresas e categorias - embora esta última não signifique necessariamente que o design também irá gerar favores.

Com coerência no branding, você primeiro analisa apenas se o website 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 o tema da usabilidade:

Por que você deveria estar particularmente interessado na usabilidade e na experiência do usuário como web designer? Você 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 generalizados no web design através de Padrões de design da IU. Andy Crestodina explica muito claramente como as normas são definidas no seu artigo sobre Padrões 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

Sobre o assunto webdesign harmonioso Eu já relatei antes. Desta vez, gostaria de entrar em mais detalhes sobre a regra dos terços.

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

Design de Interação
Fonte: design interactivo

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

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

No Photoshop, você pode rápida e facilmente rever e ajustar seus layouts usando a ferramenta Crop Tool e a configuração Rule of Thirds. Para ilustrar a Regra dos Terços, criei o site de Marqeta um pouco mais perto:

Melhores Práticas

O produto e sua mensagem estão bem distribuídos entre os nós. Aqui o design poderia ser um pouco mais eficiente mudando 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 ainda podemos repensar a colocação do CTA.

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

Outra forma de verificar o seu design é o chamado teste do Borrão. Aqui você tira a nitidez do seu layout (por exemplo, usando Photoshop e o "Borrão Gaussiano" - 12%). 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?

Melhores Práticas em Web Design

Para isso, tenho novamente o site de Marqeta é usado. O CTA do lado direito e o produto são particularmente proeminentes, seguidos pela mensagem e finalmente pelo logotipo e o segundo CTA:

Melhores Práticas em Web Design

A versão móvel eu desarmei ainda mais para testar o que sobrou. Aqui o produto chama a atenção primeiro, seguido do CTA e do logotipo. Você pode fazer este teste com o site inteiro - o melhor 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 inclui naturalmente conteúdo escrito. Para isso, há redactores profissionais que - de olho em SEO, usabilidade e guia de estilo - escrevem conteúdos significativos para o seu website. Mas também há 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 extensos e demasiado aninhados. 

Mesmo que o grupo-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 profissionais. Em vez disso, estamos à procura de informações específicas quando navegamos em websites. É mais provável que digitalizemos o conteúdo do que que realmente demoremos a lê-lo correctamente.

Também do Google há pontos negativos se as frases na sua página forem muito longas e pontos positivos se forem substituídas pelo chamado "palavras de transição"estão interligados.

Contribuições interessantes para o tópico de SEO também são:

Acessibilidade

A acessibilidade da Web ainda é, infelizmente, um tópico marginal - e é muitas vezes ignorado. Há também abordagens simples que poderíamos ter em conta desde o primeiro desenho. Por exemplo, você usa principalmente cores para destacar informações? 

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

Melhores Práticas em Web Design

Para isso, analisei novamente o mesmo site. Mesmo sem cores, a mensagem é clara. O CTA superior direito pode tornar-se problemático em relação ao contraste.

Para verificar isso com certeza, há 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:

Melhores Práticas em Web Design
Melhores Práticas em Web Design

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

http://colorsafe.co/ é outra ferramenta para determinar as cores e o seu contraste. Aqui você pode experimentar diretamente diferentes combinações de cores. A relação é-lhe dada directamente e tem a possibilidade de seleccionar as fontes e também de acordo com as quais Norma WCAG você quer fazer a sua selecção.

Podem surgir problemas com o uso de cores para a representação visual de manipulações de erros. Vamos tomar forma de elementos, por exemplo. Os erros são frequentemente representados aqui, destacando a caixa de entrada em cores. Isto pode fazer com que alguém com uma fraqueza de cor não seja capaz de reconhecer erros e, portanto, não ser capaz de resolvê-los. 

Deve-se levar isso em consideração ao planejar e, portanto, sempre se certificar de que haja outra representação do erro. Aqui você pode encontrar mais fatos e recursos interessantes sobre acessibilidade, assim como dicas valiosas para criar uma página WP acessível.

Outros recursos

Resolução e desenho de dispositivos cruzados

Provavelmente não há nenhuma regra no web design que seja abordada mais frequentemente - e mais frequentemente desconsiderada - do que "mobile first".

Nesta abordagem, o conteúdo é criado para os dispositivos móveis e depois adaptado para os maiores. O oposto é projetar para desktops e similares e depois adaptá-lo para dispositivos menores. 

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

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

A primeira pode ser a abordagem certa - dependendo do projeto - mas não é muito difundida, pois é muito cara e demorada. Infelizmente, esta última ainda é vista com demasiada frequência na web e, portanto, precisa urgentemente de ser acrescentada à lista de "melhores práticas". Mais dicas para otimização móvel podem ser encontradas 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 quais dispositivos são usados principalmente para acessar seu site. 

A idéia por trás disso não é apenas que o conteúdo seja preparado de forma visualmente apropriada, mas também que as condições externas alteradas sejam levadas em conta. Você pode encontrar mais detalhes no artigo Mobile-First UX Design não é mais uma tendência .

A tabela a seguir mostra claramente quais telas são usadas para acessar a Internet com mais freqüência. Isto pode ajudá-lo a decidir para que telas você quer otimizar seus sites. Mas note que tal generalização só pode ser uma diretriz. Uma análise dos seus grupos alvo não pode substituir estas estatísticas.

Melhores Práticas em 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 para este fim, 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 foram oferecidas e descobrir se Plugin, ou Theme, serão desenvolvidos no futuro. WordPress As ferramentas que são desenvolvidas regularmente têm geralmente 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 irá reduzir a sua vulnerabilidade ao acesso indesejado. Os erros serão resolvidos e os seus sites serão adaptados ao ambiente técnico em constante mudança. Segurança Plugins e WordFence também ajudam a manter o seu site e a sua segurança num piscar de olhos e a reagir a problemas em tempo útil. 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? Por favor, use a função de comentários. Você quer mais dicas sobre web design e desenvolvimento? Então siga-nos em TwitterFacebook 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 * .