8 princípios de web design que ainda funcionam em 2020
Publicados: 2021-07-22O design do seu site é mais importante para as conversões do que você pensa. Você pode implementar todas as táticas de aumento de conversão do mundo, mas se o seu design da web parecer uma porcaria, não vai adiantar muito.
O design não é apenas algo que os designers fazem. Design é marketing. O design é o seu produto e como ele funciona. Quanto mais aprendo sobre os princípios do web design, melhores resultados obtive.
Curso de UX e usabilidade grátis
Vá dos princípios à prática. Assista a cursos gratuitos de UX e Usabilidade.
Aqui estão 8 princípios de web design eficazes que você deve conhecer e seguir.
1. Hierarquia visual
Rodas que rangem recebem a graxa e visuais proeminentes chamam a atenção. A hierarquia visual é um dos princípios mais importantes por trás de um bom web design. É a ordem em que o olho humano percebe o que vê.
Exercício. Classifique os círculos por ordem de importância:
Sem saber nada sobre esses círculos, você foi capaz de classificá-los
facilmente. Essa é uma hierarquia visual.
Certas partes do seu site são mais importantes do que outras (formulários, frases de chamariz, proposição de valor etc.) e você deseja que elas recebam mais atenção do que as partes menos importantes.
Se o menu do seu site tem 10 itens, todos eles são igualmente importantes? Onde você deseja que o usuário clique? Torne os links importantes mais proeminentes.
A hierarquia não vem apenas do tamanho. A Amazon torna os botões de frase de chamariz “Adicionar ao carrinho” e “Compre agora” mais proeminentes usando cores:
Comece com o objetivo do negócio
Você deve classificar os elementos do seu site com base no objetivo do seu negócio. Se você não tiver uma meta específica, não saberá o que priorizar.
Aqui está um exemplo. É uma captura de tela que tirei do site Williams-Sonoma. Eles querem vender utensílios de cozinha ao ar livre.
O que mais chama a atenção é o enorme pedaço de carne (me faça querer), seguido pelo título (diga o que é) e uma chamada à ação (pegue). O quarto lugar vai para um parágrafo de texto sob o título; o quinto é o banner de frete grátis e a navegação superior é a última.
Esta é a hierarquia visual - um princípio atemporal de web design - muito bem.
Exercício. Navegue na web e classifique conscientemente os elementos na hierarquia visual. Então vá dar uma olhada em seu site. Algo importante (ou seja, informações importantes que os visitantes procuram) está muito abaixo na hierarquia? Torne-o mais proeminente.
2. Proporções Divinas
A Proporção Áurea é o número mágico 1,618 (φ). Os designs que usam proporções definidas pela proporção áurea são, acredita-se, esteticamente agradáveis.
Então, há a sequência de Fibonacci. Cada termo é a soma dos dois termos anteriores: 0, 1, 1, 2, 3, 5, 8, 13, 21 e assim por diante. O interessante é que os dois tópicos aparentemente não relacionados produzem o mesmo número exato.
Esta é a aparência da Proporção Áurea:
Muitos artistas e arquitetos usam proporções para aproximar a Razão Áurea. Um exemplo famoso é o Partenon, construído na Grécia Antiga:
O Golden Ratio pode funcionar para web design? Pode apostar. Aqui está o Twitter:
Aqui está um comentário, de anos atrás, do diretor criativo do Twitter, Doug Bowman. A escolha do design não foi acidental:
Portanto, se a largura do seu layout for 960 px, divida-o por 1,618 (= 593 px). Você sabe que a largura da área de conteúdo deve ser 593 px e a barra lateral 367 px. Se a altura do site for 760 px, você poderá dividi-lo em blocos de 470 px e 290 px (760 / 1,618 = ~ 470).
Se você quiser saber mais, leia este artigo sobre como aplicar a Razão Áurea à tipografia.
3. Lei de Hick
A Lei de Hick diz que com cada escolha adicional aumenta o tempo necessário para tomar uma decisão.
Você já experimentou isso inúmeras vezes em restaurantes. Menus com opções variadas dificultam a escolha do jantar. Se houvesse duas opções, a tomada de decisão levaria muito menos tempo. Isso é semelhante ao Paradoxo da Escolha - quanto mais opções você dá, mais fácil é não escolher nada. Ambos os princípios entram em jogo com o design da web.
Quanto mais opções um usuário tiver em seu site, mais difícil será de usar (se é que é usado). Precisamos eliminar escolhas. Para fazer um design web melhor, concentre-se em eliminar as opções que distraem durante o processo de design.
Em uma era de escolha infinita, as pessoas precisam de filtros melhores! Se você vende um grande número de produtos, adicione filtros melhores para facilitar a tomada de decisões. A Wine Library vende uma grande quantidade de vinho.
Eles fazem um bom trabalho com os filtros:
4. Lei de Fitt
A lei de Fitt estipula que o tempo necessário para mover para uma área alvo (por exemplo, clicar em um botão) é uma função da distância ao alvo e do tamanho do alvo. Em outras palavras, quanto maior e mais próximo um objeto, mais fácil de usar.
O Spotify torna mais fácil apertar “Play” do que outros botões:
No aplicativo para celular, eles também colocam o botão de reprodução em um local fácil de tocar.
Maior nem sempre é melhor. Um botão que ocupa metade da tela não é uma boa ideia e não precisamos de um estudo matemático para nos informar. Mesmo assim, a Lei de Fitt é um logaritmo binário. Isso significa que os resultados previstos da usabilidade de um objeto seguem uma curva, não uma linha reta.
Um botão pequeno é muito mais fácil de clicar quando recebe um aumento de 20% no tamanho, enquanto um objeto muito grande, com o mesmo aumento de 20% no tamanho, não oferece os mesmos benefícios em usabilidade.
Isso é semelhante à regra do tamanho do alvo. O tamanho de um botão deve ser proporcional à frequência de uso esperada. Você pode usar o rastreamento do mouse para ver quais botões as pessoas mais usam e, em seguida, tornar os botões populares maiores (mais fáceis de acertar).
Vamos imaginar que há um formulário que você deseja que as pessoas preencham. No final do formulário, existem dois botões: “Enviar” e “Reiniciar” (limpar campos).
99,9999% deseja clicar em “Enviar”. Portanto, o botão deve ser muito maior do que 'redefinir'.
5. Regra dos terços
É uma boa ideia usar imagens em seu design. Um visual comunica suas ideias muito mais rápido do que um texto.
As melhores imagens seguem a regra dos terços: uma imagem deve ser dividida em nove partes iguais por duas linhas horizontais igualmente espaçadas e duas linhas verticais igualmente espaçadas. Elementos composicionais importantes devem ser colocados ao longo dessas linhas ou em suas interseções.
Abaixo, vê como a imagem da direita é mais interessante? Essa é a regra dos terços em ação.
Usar imagens grandes e bonitas contribui para um bom design da web. Se suas imagens forem mais interessantes, seu site será mais atraente.
6. Leis de Design Gestalt
A psicologia da Gestalt é uma teoria da mente e do cérebro. Seu princípio é que o olho humano vê os objetos em sua totalidade antes de perceber suas partes individuais.
Aqui está o que quero dizer:
Observe como você poderia ver o cão sem focar em cada mancha preta em que o cão consiste? Um fundador do gestaltismo, Kurt Koffka, explicou desta forma: “o todo existe independentemente das partes”.
No que se refere ao design da web, as pessoas veem todo o seu site primeiro - antes de distinguir o cabeçalho, o menu, o rodapé e assim por diante.
Existem oito chamadas leis de design da gestalt que nos permitem prever como as pessoas perceberão algo. Veja como cada um se relaciona com o design da web:
1. Lei da Proximidade
As pessoas agrupam coisas que estão próximas no espaço. Eles se tornam um único objeto percebido.
Para um web design eficaz, certifique-se de que coisas que não combinam não sejam percebidas como uma só. Da mesma forma, você agrupa elementos de design relacionados (menu de navegação, rodapé, etc.) para comunicar que eles formam um todo.
Craigslist usa esta lei para tornar mais fácil entender quais subcategorias se enquadram em "para venda":
2. Lei da Similaridade
Nós agrupamos coisas semelhantes. Essa semelhança pode ocorrer na forma, cor, sombreamento ou outras qualidades.
Aqui, agrupamos os pontos pretos em um grupo e os brancos em outro, porque, bem, os pontos da mesma cor são parecidos.
Como é isso quando aplicado ao web design? O Mixpanel usa um design semelhante para links para estudos de caso, portanto, os vemos como um único grupo, cada um reforçando o outro:
3. Lei de Fechamento
Buscamos integridade. Quando formas que não estão fechadas ou partes de uma imagem estão faltando, nossa percepção preenche a lacuna visual. Vemos um círculo e um quadrado, embora nenhuma das formas realmente exista no gráfico abaixo.
Sem a lei do fechamento, veríamos apenas linhas diferentes com comprimentos diferentes. Mas a lei do fechamento combina as linhas para formar formas inteiras.
Usar a lei do fechamento pode tornar os logotipos ou elementos de design mais interessantes. Um bom exemplo é o logotipo do World Wide Fund For Nature, que foi desenhado por Sir Peter Scott em 1961:
4. Lei da Simetria
A mente percebe os objetos como simétricos, formando-se em torno de um ponto central. É perceptivelmente agradável dividir objetos em um número par de partes simétricas.
Quando vemos dois elementos simétricos que estão desconectados, a mente os conecta perceptivamente para formar uma forma coerente.
Quando olhamos para a imagem acima, tendemos a observar três pares de colchetes simétricos em vez de seis colchetes individuais.
As pessoas preferem aparências simétricas às assimétricas. Colunas alternadas de imagens e texto, controles deslizantes centralizados e uma lista de três colunas aumentam o prazer visual do design da página inicial do Trello:
5. Lei do Destino Comum
Temos a tendência de perceber os objetos como linhas que se movem ao longo de um caminho. Agrupamos objetos que têm a mesma tendência de movimento e estão, portanto, no mesmo caminho.
Mentalmente, as pessoas agrupam gravetos ou mãos levantadas apontando para algum lugar porque todos apontam na mesma direção. No design do seu site, você pode usar isso para direcionar a atenção do usuário para algo (por exemplo, um formulário de inscrição, proposta de valor etc.).
Por exemplo, se houver uma matriz de pontos, e metade dos pontos se mover para cima enquanto a outra metade se mover para baixo, percebemos os pontos que se movem para cima e os pontos que se movem para baixo como duas unidades distintas.
6. Lei da Continuidade
As pessoas têm a tendência de perceber que uma linha continua em sua direção estabelecida. Quando há uma interseção entre objetos (por exemplo, linhas), tendemos a perceber as duas linhas como duas entidades únicas e ininterruptas. Os estímulos permanecem distintos mesmo com sobreposição.
Fixel usa isso para conectar faces a bios:
Existem também outras leis da gestalt, como Figura e Fundo ou Lei da Boa Gestalt. (Os objetos tendem a ser agrupados perceptivelmente se formarem um padrão regular, simples e ordenado - como os anéis olímpicos.) No entanto, os cobertos acima são os melhores princípios orientadores para web design.
7. Espaço em branco e design limpo
O espaço em branco (também chamado de "espaço negativo") é a parte de uma página da web que permanece "vazia". É o espaço entre gráficos, margens, calhas, espaço entre colunas, espaço entre linhas de texto ou visuais.
Não é apenas um espaço “em branco” - é um elemento importante do web design. Ele permite que os objetos existam. O espaço em branco se refere ao uso de hierarquia para informações, tipografia, cor ou imagens.
Uma página sem espaço em branco, abarrotada de texto ou gráficos, corre o risco de parecer ocupada ou desordenada. Normalmente, é difícil de ler. (As pessoas nem se importam.) É por isso que sites simples são cientificamente melhores.
A quantidade certa de espaço em branco faz um site parecer “limpo”. Embora um design limpo seja crucial para comunicar uma mensagem clara, isso não significa apenas menos conteúdo.
Um design limpo faz o melhor uso do espaço em que está. Para criar um design limpo de site, você precisa saber como se comunicar claramente usando o espaço em branco com sabedoria. Made.com usa bem os espaços em branco:
O bom uso do espaço em branco facilita o foco na mensagem principal e nos recursos visuais, e o texto do corpo é fácil de ler. Em geral, o espaço em branco promove elegância e sofisticação, melhora a legibilidade e direciona o foco.
Leia mais sobre espaço em branco e simplicidade.
8. Navalha de Occam
Quando dadas várias hipóteses concorrentes, a navalha de Occam o incentiva a escolher aquela que faz menos suposições e, portanto, oferece a explicação mais simples. Para colocá-lo no contexto do web design, a Navalha de Occam argumenta que a solução mais simples geralmente é a melhor.
Em uma postagem sobre sua experiência no Angelpad, a equipe do Pipedrive escreve:
A equipe e os mentores do Angelpad nos desafiaram de várias maneiras. “Você tem muitas coisas na sua página inicial” foi algo com que não concordamos no início, mas estamos felizes em testar. E descobrimos que estávamos realmente errados. Removemos 80% do conteúdo e deixamos um botão de inscrição e um link Saiba mais na página inicial. A conversão para inscrição aumentou em 300%.
Não se trata apenas da aparência, mas também de como funciona. Algumas empresas - como a 37Signals - transformaram o "simples" em um modelo de negócios. Aqui está uma citação do livro Rework, escrito pelos fundadores Jason Fried:
Muitas pessoas nos odeiam porque nossos produtos fazem menos do que a concorrência. Eles ficam insultados quando nos recusamos a incluir seu recurso de estimação. Mas temos tanto orgulho do que nossos produtos não fazem quanto temos do que eles fazem. Nós os projetamos para serem simples porque acreditamos que a maioria dos softwares é muito complexa: muitos recursos, muitos botões, muita confusão.
O design simples e minimalista não garante que o design funcione. Mas, na minha experiência, simples é sempre melhor do que o oposto - e, portanto, devemos nos esforçar para simplificar nossos designs web.
Conclusão
Web design e arte eficazes não são a mesma coisa. Mas muitos princípios psicológicos e de design se aplicam aos sites. Você pode criar um ótimo site aplicando os aspectos relevantes dessas leis ao seu layout, tipografia e imagens.
Projete para o usuário e seus objetivos de negócios. Um bom web design pode fornecer resultados esteticamente agradáveis e financeiramente compensadores.