Psicologia do design: moldando sua imagem online

Publicados: 2023-02-15

Cobrimos a importância da cor minuciosamente nas duas partes anteriores de nossa série psicologia do design. A escolha da cor, no entanto, é apenas uma parte da luta contra o mau design.

Esteja você criando um padrão de fundo para um novo design da web ou tendo ideias sobre a embalagem de um novo produto, eventualmente terá que colocar lápis no papel e começar a esboçar. Não importa a forma que você comece a formar, isso terá um efeito poderoso em seus espectadores.

Continue lendo para saber mais sobre as associações comuns que seus clientes farão entre as formas que você escolher e o que eles dizem sobre sua marca em geral. Além disso, veja alguns exemplos do mundo real de como essas formas foram usadas em designs de todos os tipos!

  • Linhas
  • Círculos e ovais
  • triângulos
  • quadriláteros
  • Polígonos
  • formas abstratas

Linhas retas e curvas

Quando se trata de trabalho de linha, você realmente terá que seguir a linha entre angular e curvilíneo. As linhas podem ser a forma base que gera toda a arte, mas os logotipos e designs da web que dependem fortemente do trabalho de linha são tudo menos simples.

Normalmente, os humanos têm preferência por linhas curvas em vez de linhas retas. Isso pode ser atribuído à neurofisiologia do sistema visual. Mesmo os bebês cujos olhos não estão totalmente formados focalizarão sua atenção por mais tempo em formas curvas do que em linhas angulares nítidas.

Captura de tela do site da Affinity com seu logotipo triangular arredondado
As bordas arredondadas do logotipo da Affinity suavizam seu efeito geral nos usuários

No entanto, as curvas não aumentarão necessariamente a quantidade de tempo que um usuário concentrará sua atenção em seu design. Na verdade, é mais provável que ângulos agudos atraiam a atenção rápida de seus usuários. Onde as curvas conotam suavidade e complexidade, linhas e ângulos agudos conotam seriedade e simplicidade.

Estudos mostraram que objetos angulares podem desencadear uma sensação de ameaça. Foi demonstrado que a nitidez das formas aumenta a atividade na amígdala, que é a área do cérebro que processa o medo. Por esse motivo, os ângulos agudos geralmente exigem a atenção do público e chamam a atenção mais rapidamente do que as curvas.

Você pode usar esses padrões naturais de resposta humana para criar designs que façam seu público sentir algo. Para marcas divertidas e alegres, as linhas curvas podem ajudá-lo a quebrar blocos de texto em sites e criar uma sensação de extravagância. Para personas de marca mais sérias, no entanto, ângulos agudos e linhas retas ajudarão a levar para casa uma sensação de gravidade.

Captura de tela do site do The Inlay com um fundo branco e três linhas perpendiculares
O estúdio criativo The Inlay usa linhas finas e retas para quebrar seu site minimalista e manter seus olhos em movimento

Estúdio criativo O Inlay usa linhas retas e um design minimalista para chamar a atenção enquanto você percorre as páginas, mas evita o uso excessivo de ângulos agudos que podem desencadear respostas negativas.

A empresa de consultoria de tecnologia Affinity, no entanto, usa muita linguagem voltada para o relacionamento em todo o site. Seu logotipo de seta arredondada e formas curvas em todo o design parecem muito mais acessíveis do que as imagens tradicionais e mais rígidas usadas no espaço tecnológico.

Círculos e ovais

Se você está chamando alguém de quadrado, provavelmente está insinuando que essa pessoa é chata. O oposto, então, significaria que os círculos conotam diversão, juventude e uma mentalidade despreocupada. Faz sentido que, como foi demonstrado que a atenção dos bebês é mais longa para linhas curvas, eles também tendem a preferir brinquedos circulares.

Abertura e união vêm à mente quando seus espectadores olham para um círculo. Formas redondas também podem conotar sentimentos de comunidade ou proteção – como estar seguro em sua própria bolha ou até mesmo um bom abraço. Outras características dos círculos podem incluir amizade, cordialidade, feminilidade e renascimento (pense: o círculo da vida).

Captura de tela do site da Ring com quatro de seus produtos de campainha
A luz do botão em forma de anel no próprio produto é outra dica visual para os usuários do Ring

De uma perspectiva de nomeação, a campainha Ring tocou nos sentidos de seus usuários. Auditivamente, você pode imaginar a campainha “tocando”, enquanto visualmente, o “toque” imaginado está vinculado ao logotipo e à maneira como o hardware físico foi projetado.

Captura de tela da página do menu principal da Netflix para o programa The Circle. As costas de duas figuras femininas olham para uma tela de competidores
Os círculos são encontrados em fotos de perfil, formas de botões e até mesmo no projeto arquitetônico do prédio em que os competidores moram.

The Circle, um reality show da Netflix, é outro lugar em que a marca circular faz mais sentido. A premissa é que um grupo de pessoas que pode ou não estar dizendo a verdade sobre sua identidade tenta ganhar popularidade entre seus pares apenas por meio de uma plataforma de mídia social chamada The Circle. O objetivo? Permaneça dentro da comunidade - permaneça no Círculo.

triângulos

Aceleração, movimento e equilíbrio, triângulos ilustram facilmente a atividade. Eles são formas enérgicas e poderosas que podem evocar uma variedade de emoções, desde empolgação até cautela.

Os triângulos têm impacto, e a forma como eles são direcionados é crucial, porque a direção mudará seu significado na mente do seu consumidor. Por exemplo, um triângulo apontando para cima pode mostrar força, mas quando ligeiramente torto, pode mostrar instabilidade. Mas vários triângulos em todas as direções diferentes podem demonstrar diversão ou emoção - como confete!

Captura de tela da imagem de visualização do grande sucesso de Rick Astley "Never Gonna Give You Up" com um ícone triangular no meio
Esta imagem de visualização de um vídeo do YouTube usa um ícone triangular de "reproduzir"

O botão de reprodução do seu serviço de streaming de música ou vídeo favorito provavelmente é apenas um triângulo apontando para a direita. Assemelha-se a uma seta que indica movimento para a frente, em oposição às duas linhas retas que indicam uma pausa (uma “quebra” literal entre duas linhas retas).

Captura de tela da página inicial da HGTV com seu logotipo
“Home & Garden Television” mostra a casa com um triângulo simples no topo de seu logotipo

O HGTV também usa o design triangular de maneira inteligente. O triângulo isósceles fica no topo de sua marca nominativa, uma maneira clara, mas simples, de ilustrar o telhado de uma casa. O “V” na outra extremidade do logotipo faz um ótimo contrapeso, pois aponta para baixo.

quadriláteros

Quadriláteros incluem qualquer forma de quatro lados. Quadrados e retângulos são os exemplos mais comuns, mas trapézios, losangos e alguns outros também estão incluídos aqui. Quadrados e retângulos são frequentemente símbolos de estabilidade e firmeza, conformidade ou franqueza. Seus ângulos retos sugerem visualmente racionalidade, ordem e estrutura.

Quadrados e retângulos são frequentemente usados ​​por marcas que querem parecer realistas ou pragmáticas. Da National Geographic ao LinkedIn e Dominós, quadrados e retângulos são comuns – especialmente para logotipos – em uma ampla gama de setores.

Outros tipos de quadriláteros também transmitem esses sentimentos de regularidade, mas com um toque visual mais vanguardista e contemporâneo. Os diamantes podem ser usados ​​para transmitir produtos de luxo ou sofisticados devido à nossa associação inconsciente entre a forma e a pedra preciosa. Quadriláteros como pipas e losangos são ótimos para sugerir um nível de estabilidade sem recorrer a padrões usados ​​demais.

Captura de tela do padrão de paralelogramo no site de design de Mokthar Saghafi
Captura de tela do site de design de Mokthar Saghafi

O web designer australiano Mokthar Saghafi usa uma forma de paralelogramo para o padrão geométrico de seu site. As figuras de quatro lados são cuidadosamente empilhadas, insinuando a estabilidade geralmente associada a formas de quatro lados. Defini-los ligeiramente fora de forma como um losango em vez de um retângulo verdadeiro, porém, adiciona outra camada de interesse visual.

Sinalização de rua em forma de bloco estampada com o logotipo da Lego
Foto de Faiz Zaki

Embora o Lego possa não parecer realista ou conformado, eles certamente são estáveis ​​- de que outra forma você construiria com eles? Seu logotipo quadrado também é um retorno visual ao produto. Parece muito semelhante a um tijolo quadrado de Lego com quatro pinos.

Pentágonos, hexágonos e octógonos

Em matemática e design, esse coletivo de formas é conhecido como “polígonos”. Polígono é um termo abrangente usado para descrever qualquer forma geométrica 2D, mas geralmente é reservado para aqueles com 5 ou mais lados.

Na natureza, essas formas são encontradas em todos os lugares, desde favos de mel a padrões de conchas, cristais e formações rochosas. Em web design, no entanto, eles são usados ​​com menos frequência. Isso pode ser bom para seus clientes, porque ajudará a diferenciá-lo das tendências de design mais comuns!

Complexos e futuristas, os polígonos são frequentemente usados ​​para criar uma aura moderna e contemporânea que ainda é bem estruturada. Certos polígonos são comumente usados ​​em indústrias de nicho, no entanto. Por exemplo, as empresas de fabricação e reparo de automóveis e máquinas geralmente empregam hexágonos e octógonos no design, pois se assemelham à cabeça de um parafuso.

Captura de tela da página inicial do Built By Buffalo, na qual seus projetos em destaque são mostrados em um padrão de favo de mel
Usar esse padrão para mostrar seu trabalho permite que a Built By Buffalo mostre muitos projetos em muito pouco espaço na web

O layout hexagonal usado pela agência de web design do Reino Unido, Built By Buffalo, é uma ótima maneira de mostrar muitos exemplos de seu trabalho antecipadamente, sem sobrecarregar sua página inicial. Em seguida, é usado em todo o site para mostrar fotos da equipe, mostrar fotos divertidas do escritório e destacar informações importantes.

Captura de tela da página Sobre do site da Pentagon Tours. Três linhas diagonais cortam uma foto de passeio como um elemento gráfico
As linhas fortes do logotipo da Pentagon Tours são imitadas com tratamentos gráficos para imagens no site

O Pentágono é um dos edifícios mais reconhecidos do mundo, e é apropriadamente nomeado por sua estrutura de cinco lados. Um excelente exemplo do uso de polígonos para projetos arquitetônicos, o próprio edifício transmite estoicismo e estabilidade

Formas abstratas

Existem algumas outras formas geométricas e abstratas que são comumente usadas na web e em designs de produtos, promoções e esforços de branding. Vamos dar uma rápida visão geral de algumas dessas formas populares e seus significados.

bolhas

Os blobs geralmente são formas caracterizadas como divertidas ou bobas. O famoso “efeito bouba/kiki” provou que indivíduos em todas as culturas e sistemas de escrita atribuem a palavra sem sentido “bouba” a formas de bolhas, enquanto “kiki” está associado a formas abstratas pontiagudas.  

Ao optar por usar formas abstratas nítidas com bordas pontiagudas, você atrairá rapidamente a atenção do visualizador. Com formas mais arredondadas, no entanto, você os deixará mais confortáveis ​​e divertidos.

Captura de tela do menu de navegação do Buzzworthy com uma forma bulbosa que apresenta uma foto ao lado das palavras "trabalho. estúdio. equipe. contato. casa de diversão".
Uma forma animada de “bouba” aparece quando você abre o menu de navegação do Buzzworthy u

O estúdio de design personalizado do WordPress baseado no Brooklyn, Buzzworthy, usa muitas formas de blob e animações de transição bulbosas para mostrar seu estilo divertido e descolado.

cruzes

Frequentemente usadas para mostrar espiritualidade e cura, conexão ou equilíbrio, as cruzes aparecem o tempo todo no web design. É a maneira mais comum de conotar visualmente uma reunião ou conexão entre duas coisas. Outro uso comum para uma cruz no design é como um sinal de “mais”, indicando que você pode adicionar algo a um carrinho ou expandir para obter mais informações.

Nos logotipos, as cruzes são normalmente reservadas para organizações religiosas devido aos seus fortes laços religiosos, mas outros usos mais agnósticos da forma também foram bem-sucedidos.

Captura de tela do site da Cruz Vermelha Americana que apresenta seu logotipo icônico da "cruz vermelha"
Captura de tela do site da Cruz Vermelha Americana

A Cruz Vermelha Americana é uma das organizações mais notáveis ​​a fazer uso de imagens cruzadas. Seu trabalho se situa na interseção de indivíduos que precisam de ajuda e indivíduos que podem ajudar durante ou após um desastre. O logotipo da Cruz Vermelha os coloca na interseção dessas duas coisas, ao mesmo tempo em que faz uma alusão visual à cura e à saúde.

espirais

Espirais conotam movimento e progressão. Espirais e loops arredondados geralmente ilustram perfeição, beleza e evolução. Se sua espiral for mais pontiaguda, como um movimento em zigue-zague, é mais provável que transmita um pivô, uma mudança ou uma nova direção que está sendo tomada por um produto, empresa ou serviço.

A direção de sua espiral também terá muito a ver com a forma como ela é percebida - especialmente se você planeja animá-la. A última coisa que você quer é tentar transmitir desenvolvimento, crescimento ou criatividade e acabar enviando seus usuários para uma espiral descendente literal. Como na maioria das coisas, transmita um movimento positivo fazendo suas espirais se moverem para cima e para a direita sempre que possível.

Captura de tela da página inicial do Rally com uma espiral amarela em um fundo branco
Conforme você rola, a espiral se moverá mais rápido e mudará de cor. Se você fizer uma pausa para ler, a espiral se anima lentamente para cima

Rally, um estúdio de produtos digitais de Salt Lake City, UT, usa uma espiral simples em um fundo branco em todo o site. As cores em mudança e o movimento dinâmico da espiral mantêm os espectadores interessados ​​visualmente e criam uma experiência de usuário coesa.

Formas Orgânicas

As formas orgânicas incluem folhas, galhos, raízes, ondas, estrelas, nuvens e muito mais. Onde as formas geométricas podem ser usadas juntas para criar imagens (exemplo: um quadrado com um triângulo no topo torna-se uma casa simples), as formas orgânicas normalmente são independentes como uma imagem em si mesmas.

Essas formas normalmente serão irregulares ou assimétricas (mas nem sempre) e terão uma associação com o mundo natural de alguma forma. A ideia de “a nuvem” é um uso perfeito de imagens orgânicas.

Captura de tela da página inicial do SoundCloud. O logotipo deles no canto esquerdo é em forma de nuvem, a metade esquerda é composta por várias linhas verticais finas, como você veria em um arquivo de áudio
O logotipo do SoundCloud usa imagens naturais para tornar a tecnologia mais divertida e acessível visualmente

A ideia de armazenamento em “nuvem” vincula algo muito inebriante e técnico – um “local” intangível que contém informações – e o vincula ao mundo natural, tornando-o mais acessível para iniciantes em tecnologia. O SoundCloud, por exemplo, é um site de compartilhamento de música no qual os usuários podem fazer upload de arquivos de áudio e compartilhá-los com uma crescente comunidade de amantes da música em todo o mundo.

A mente por trás do design

Como sempre, essas não são regras rígidas e rápidas. Use várias formas, espessuras de linha e alinhamentos em seu design para criar interesse visual. Usar vários elementos juntos permitirá que você conte uma história que seus leitores possam ver com os olhos e sentir no estômago.

O centro de recursos do WP Engine é sua fonte de informações sobre tudo o que é design, e nossa série Psicologia do Design aborda o uso dos elementos fundamentais do design para atrair clientes com uma marca bem planejada.

Leia as partes um e dois para um mergulho profundo nos significados das cores e como usá-las em sua narrativa visual. Em seguida, fique atento à parte quatro, que abordará a importância do seu tipo de letra, posicionamento do conteúdo e escolha de palavras.

Parte 1
Parte 2