9 princípios para um bom design de sites

Adivinhe quantos sites existem no mundo neste momento. Seja qual for a sua resposta, podemos garantir que o número atingiu bem mais de 2 bilhões! Isso é um dois seguido por nove zeros!

No entanto, você pode ficar chocado ao descobrir que 9 entre 10 sites estão inativos! O que significa que eles não são atualizados de forma consistente, têm pouco ou nenhum tráfego de usuários e, claro, não convertem as pessoas para seus negócios.

Esteja avisado; é extremamente fácil acabar com esses 90%, é por isso que criamos este artigo fantástico para você! Abaixo estaremos falando sobre nove grandes valores de design (ou princípios) que todo site precisa para se classificar entre os 10% melhores e mais importante ... converta!

1. Alinhe o apelo visual com sua meta de negócios

Ao navegar na web, é provável que você tenha encontrado uma boa parcela de sites mal projetados. O tipo de site que o deixa confuso, frustrado, infeliz ou simplesmente entediado!

Por exemplo, veja os seguintes exemplos:

O primeiro site possui muitas cores brilhantes e dominantes. O roxo, o vermelho e o azul se chocam e prejudicam o conteúdo real do site. No geral, este design é desconfortável para os olhos e prova falta de profissionalismo.

Isso mostra falta de conhecimento sobre seus usuários e faria com que os visitantes insatisfeitos não quisessem voltar!

Ao comparar o design anterior com o próximo site, os visuais são completamente diferentes! O site não tem cor ou tamanho, não fornecendo hierarquia visual para o visualizador.

Não há nenhuma indicação de qual conteúdo deve ser o foco. Este design dá a impressão de que o site está em reforma e pode deixar o usuário entediado e confuso.

Então, como seu site pode ser projetado para evitar isso?

Essas etapas são a estrutura que facilita o design visual do seu site. Eles não são absolutos, mas são orientações úteis a serem seguidas ao construir seu site. Sinta-se sempre à vontade para experimentar cores e estilos diferentes, desde que estejam de acordo com sua meta de negócios.

Quando se trata de design, layout, seu conteúdo pode ser bastante complicado. Para ajudar, estabelecemos algumas leis essenciais sobre a percepção humana que o ajudarão a criar seu site.

A. Hierarquia visual

Essa lei estabelece que quanto maior o tamanho de um objeto em um site (ou banner, festão, pôster, folha), mais importante é percebido e, portanto, mais atenção atrai. E vice versa.

O mesmo vale para cores brilhantes. Quanto mais brilhante um objeto aparece em um site, mais foco ele exerce. O mesmo pode ser conseguido usando cores escuras contra um fundo claro e simples.

O Instagram implementou essa lei perfeitamente em seu site.

A primeira coisa que chamaria sua atenção é a marca “Instagram” em fonte preta e estilosa contra um fundo branco liso. Isso também mostra que essa marca tem tudo a ver com criatividade.

O próximo elemento a chamar sua atenção é a imagem grande no iPhone à esquerda. Devido ao seu tamanho e cor verde, não só atrai a sua atenção como também tranquiliza a sua mente.

O próximo elemento a chamar sua atenção é o botão azul com “Entrar com o Facebook” escrito nele. Eles poderiam facilmente ter colocado o botão “Inscreva-se” lá, mas não o fizeram.

Isso porque, se você sabe que não precisa preencher um formulário e fazer login diretamente usando suas credenciais do Facebook, isso também seria um alívio para sua mente ocupada e inquieta.

Como o Instagram, você pode usar essa lei para dimensionar o conteúdo do seu site de acordo com sua importância. Dessa forma, os visitantes se concentrariam em um CTA ou informação específica que você deseja. E melhore sua conversão dessa forma!

B. Proporção áurea

A proporção áurea é uma técnica de design fundada nos tempos antigos e ainda é usada por designers modernos até hoje! Este princípio é testado pelo tempo e é uma regra confiável a ser seguida.

Usando matemática complicada, na qual não entraremos em detalhes, chegamos à seguinte imagem da proporção áurea:

Você provavelmente já viu essa imagem antes e está se perguntando por que ela é relevante para o design e a organização do seu site? Abaixo, nós sobrepomos a proporção áurea em alguns sites bem projetados.

Como você deve ter notado, esses sites são todos organizados de acordo com a proporção áurea (ou espiral). Ansioso para saber por quê? Bem, acontece que esse padrão pode ocorrer naturalmente em samambaias, flores, conchas do mar e até mesmo em furacões!

Psicólogos e arquitetos acreditam que qualquer coisa projetada seguindo esse padrão agrada ao nosso cérebro.

Assim, ao trabalhar no desenvolvimento do esboço do seu site, você pode seguir este método para obter o mesmo efeito visual.

C. Regra dos terços

Quando se trata de adicionar imagens ao seu site, este é um princípio mostrado mais fácil de usar. O exemplo a seguir mostra que, quando se trata de escolher as fotos para o seu site, a imagem deve caber ao longo das linhas que se cruzam, pois é para onde o olho tem maior probabilidade de olhar.

Para garantir que sua imagem siga a Regra dos Terceiros, coloque duas linhas paralelas horizontais e verticais no painel, formando uma grade de nove quadrados sobre sua imagem.

Usando esta grade como diretriz, edite sua imagem de forma que as partes mais envolventes da fotografia sejam alinhadas com as linhas que se cruzam (marcadas pelos círculos vermelhos na imagem abaixo).

Você também pode colocar seus números de contato ou palavras-chave nas interseções. Ao adicionar imagens ao seu site, lembre-se sempre de que menos é mais.

Certifique-se de que haja imagens suficientes para atrair seus usuários e mostrar seus serviços, mas não sobrecarregue a página. Como disse Bill Bass: “Simplicidade é a alma da elegância moderna.”

D. Lei de similaridade

Mesmo que você nunca tenha ouvido falar do termo, é um princípio do qual sua mente subconsciente está bem ciente, já que nossos cérebros são programados para agrupar objetos semelhantes. Veja como o desenvolvedor de software Slack implementou a lei:

Destacadas pelas linhas horizontais vermelhas, estão três marcas da Slacks. Como você pode ver, todos eles foram colocados juntos na caixa do mesmo tamanho e estão alinhados e espaçados uniformemente.

Ao agrupar esses itens, o Slack tornou mais fácil para os usuários entenderem que esse conteúdo é um bloco de portfólio e garantir que não haja confusão entre os outros elementos de seu site.

2. Faça seu site carregar mais rápido

Como o título sugere, seu conteúdo deve carregar rápido para manter os visitantes em seu site. Um site de carregamento rápido deve ser o padrão para qualquer dispositivo, seja desktop, telefone ou tablet.

Para ser mais específico, seu conteúdo “acima da dobra” (antes de rolar) deve carregar em 3 segundos (no máximo) ao ser clicado ou digitado no navegador.

A HostingTr Court, uma empresa especializada em avaliação de hospedagem de rede, também ponderou, relatando que, para uma loja online que gera US $ 100.000 em receita diária, um atraso de 1 segundo pode potencialmente levar a uma perda de receita de US $ 2,5 milhões anualmente.

Vale a pena ser rápido! Então, se você está se perguntando “como posso tornar meu site mais rápido?”; para ser honesto, esse é um tópico que requer um artigo totalmente diferente para si mesmo.

À medida que a conexão com a Internet e as telecomunicações continuam a melhorar, a capacidade de atenção e a paciência dos visitantes do seu site diminuem. Como mencionado acima, se o seu site não conseguir acompanhar o ritmo, seu lucro vai despencar!

3. Facilite a localização do seu site

Embora não esteja tão diretamente envolvido com o conteúdo do seu site como você já deve ter adivinhado, o seu site precisa ser localizável usando o Google (ou qualquer outro mecanismo de pesquisa).

Então, digamos que você tenha um site que vende ou promove motocicletas, quando uma pessoa busca "motocicleta" no Google ou qualquer coisa relacionada à consulta, sua página precisa ser classificada entre os 5 primeiros no SERP (Search Engine Result Pages).

Isso permite que as pessoas encontrem facilmente o seu site e desenvolvam uma impressão favorável, desde que ele seja projetado com nossas dicas em mente e seja fácil de usar. Deixar uma boa impressão nos visitantes pode levar a uma crítica positiva nas redes sociais ou a uma recomendação a um familiar ou amigo.

A boa divulgação levará a um pico no tráfego orgânico, mais lucro e mais tempo gasto em seu site.

Um paralelo perfeito, neste caso, seria uma loja física. Se você estiver procurando por reparos, é improvável que vá além da primeira página de resultados do mecanismo de pesquisa.

Quando se trata do tipo de conteúdo que aumenta a visibilidade do seu site, é fundamental encontrar facilmente os links para as redes sociais.

As redes sociais podem incluir páginas do Facebook, Twitter, LinkedIn e Instagram, já que os atuais usuários de mídia social atingiram até 3,5 bilhões em 2019.

Isso significa que sua empresa ou conteúdo precisa ter contas de mídia social ativas, pois muitos de seus clientes / clientes potenciais irão encontrá-lo lá. Portanto, se o seu site tiver links para suas redes sociais e vice-versa, isso só resultará em mais visitantes (e mais leads).

Se você quiser aprender sobre técnicas para classificar seu site entre os melhores do google, leia este artigo e, se isso não satisfizer seu desejo, tente este artigo da HootSuite.

4. Conformidade com as diretrizes formais, regulamentos de privacidade e segurança cibernética

Para defender seus dados de negócios e clientes de tais ataques, governos em todo o mundo implementaram diretrizes e regulamentações formais. Entre eles, está o GDPR (Regulamento Geral de Proteção de Dados) e trata da proteção de dados e privacidade de todos os indivíduos.

Embora não possamos explicar todo o regulamento neste artigo, a conclusão aqui é que se o seu site exige que os clientes compartilhem dados pessoais, como detalhes de contato, nomes ou detalhes do cartão de crédito, então ele deve ser seguro.

Se você está se perguntando se o seu site atual é compatível com o GDPR, pode facilmente fazer uma verificação. Afinal, é melhor ter cuidado do que se arrepender!

Uma maneira popular e acessível de proteger seu é investir em um certificado SSL. SSL significa Secure Sockets Layer e é um guarda-costas equivalente para qualquer conexão de rede entre navegadores e o servidor que hospeda seu site.

Eles querem o que você tem. Não dê a eles ou deixe que eles tomem!

5. Adicione provas sociais, como depoimentos

O que começou como uma inovação de conteúdo da web, agora se tornou um padrão da indústria. Para se diferenciar da concorrência e provar que seu site é confiável, certifique-se de incluir depoimentos confiáveis ​​em seu site.

A melhor maneira de mostrar seus depoimentos de clientes valiosos é envolvente e fácil de navegar. Embora isso possa significar chamar alguém para criar um bloco de testemunho para você, é uma ótima maneira de estabelecer confiança e garantir aos visitantes a autenticidade e a qualidade do seu site e serviço.

Quero dizer, mesmo antes de ser uma nova capa de telefone, é provável que você dê uma rápida rolagem pelos comentários!

6. Garanta a acessibilidade

Ao desenvolver seu site, você pode ficar tentado a ter botões piscando ou piscando ou até mesmo empregar um esquema de cores de alto contraste para direcionar a atenção das pessoas para o elemento desejado.

No entanto, tenha cuidado, pois esse recurso provavelmente causará uma verdadeira dor de cabeça nas visualizações e não será possível para qualquer pessoa que sofra de convulsões ou fotofobia.

Cerca de 1 em 7 pessoas em todo o mundo sofrem de enxaquecas.

-Migraine Trust

Isso equivale a cerca de 1,03 bilhão de pessoas (aproximadamente) e, é relatado pela Academia Americana de Oftalmologia que: Cerca de 80% das pessoas que sofrem de enxaqueca são fotofóbicas!

Isso representa 80% das pessoas que poderiam se assustar com o seu site à primeira vista. Portanto, embora essas características brilhantes possam chamar a atenção de pessoas que não sofrem dessa condição, pode ser muito doloroso para aqueles que sofrem!

Portanto, seja inteligente e use os recursos de uso intensivo de cores com moderação ao desenvolver seu site.

7. Foco na usabilidade

O termo acima se refere ao quão amigável é um site da Web e diz respeito a elementos como: a facilidade com que os visitantes do site podem navegar em seu site, a visibilidade dos botões de consulta ou call to action (CTA) e a rapidez com que os usuários podem encontrar as informações ou consultas necessárias .

A usabilidade de um site varia entre o conteúdo que você fornece e seu objetivo geral de negócios. Por exemplo, um blog pode variar em usabilidade, para dizer uma loja online.

Embora todos esses pontos da lista sejam essenciais, a capacidade de resposta é o pilar entre os listados acima. Com mais de 5 bilhões de usuários navegando na Internet por meio de smartphones, esse aspecto de um site nunca pode ser enfatizado o suficiente.

8. Certifique-se de que seu site seja escalonável

Imagine uma loja online onde você vende camisetas personalizadas. Com a nova temporada de Game of Thrones atualmente no ar, seu site recebeu uma massa de tráfego com usuários todos querendo solicitar os designs e citações mais recentes dos episódios lançados recentemente.

Agora, digamos que este site de exemplo não consiga acompanhar esse fluxo e quebre. No meio de centenas (senão milhares) de compras, seus usuários recebem uma mensagem de erro em suas telas.

Sua base de clientes ficaria louca (e isso é um eufemismo)! Muitos deles podem denunciar sua vitrine como uma fraude e passar para seus concorrentes. Sem falar nas críticas negativas que agora são deixadas em todo o seu site e nas páginas das redes sociais!

Para sempre garantir que seus visitantes e clientes em potencial tenham uma experiência tranquila, otimize seu para lidar com o tráfego pesado.

Se você não otimizou seu site para não receber muito tráfego, então você está se vendendo pouco.

9. Garanta facilidade de manutenção

É altamente improvável que você continue com o mesmo design que criou há mais de uma década. Se estiver, talvez seja hora de fazer um upgrade.

Agora, não estamos sugerindo que você execute uma grande revisão aqui. Em vez disso, você pode querer ajustar um elemento aqui ou ali, para evitar que os clientes fiquem entediados. Essa mudança pode ser tão pequena quanto deslocar seu logotipo um pouco para a esquerda, atualizar imagens ou alterar o formato de seus botões.

Se você estiver usando um sistema de gerenciamento de conteúdo (CMS), como WordPress ou Joomla, essa mudança não é problema. Tudo que você precisa fazer é fazer login em seu CMS e editar seu site como achar adequado.

Quando você está trabalhando em um site com design personalizado, aqui estão as três coisas principais que você deseja comunicar ao seu desenvolvedor:

Para sua conveniência, aqui está uma lista de verificação dos princípios do site que descrevemos neste artigo:

Como já mencionado, esta lista funciona apenas como uma diretriz. Os princípios são algumas dicas simples, mas essenciais, para fornecer uma visão geral básica de como criar um site.

Com o tempo, conforme as preferências e demandas das pessoas mudam, novos princípios de design serão colocados em prática, mas, por enquanto, divirta-se e abrace o processo que está projetando seu novo site!