Usando o caminho humanos processam informações visuais em web design

Projetar sites e interfaces de usuário ficou mais fácil nos últimos anos. Existem tantas ferramentas disponíveis que você pode usar, o que torna inútil começar do zero ao desenvolver UIs (confira nossa nova compilação de UI). Mas eu não estou aqui para discutir sobre a morte do web design.

Em vez disso, o que vou fazer é tentar explicar os conceitos básicos, baseados na psicologia, por trás da multiplicidade de ferramentas de design visual (desde os kits CSS mais básicos até os temas premium mais avançados).. Você não vai apenas usá-los, mas também entendê-los. Estou confiante de que isso também facilitará a modificação dos já existentes, com sucesso também.

Vamos analisar como funciona a mente e o corpo humano quando se trata de processar informações visuais e como esse conhecimento é interpretado no projeto da Web..

Os Princípios da Organização Perceptual

Segundo a psicologia da Gestalt, o todo é diferente da soma de suas partes. Os seguidores desta escola de pensamento afirmam que existem alguns princípios sobre como a mente humana agrupa objetos. Estas não são simplesmente teorias, lembre-se, mas fatos práticos reais sobre a organização de grupos visuais.

Abaixo você encontrará algumas das leis e os usos mais populares e conhecidos desses princípios. Você pode até ser capaz de encontrar novas ideias para o seu próximo projeto.

Lei da Similaridade

O primeiro princípio afirma que pequenos objetos semelhantes são percebidos como um grupo, em vez de várias instâncias desse mesmo objeto pequeno. Similaridade pode ser baseada em forma, cor, sombreamento ou alguma outra qualidade. Este princípio é a base de projeto padrão assim como muitos designs de logotipos geométricos e minimalistas.

Por exemplo, esta imagem mostra um logotipo circular em vez de triângulos separados. A forma triangular na parte inferior da águia nos faz pensar que a forma também faz parte da imagem.

Você provavelmente também utilizou essa lei inconscientemente ao criar alguns, caixas de conteúdo em destaque do mesmo tamanho para o seu site. Se você deseja mostrar que certos elementos de conteúdo têm a mesma importância ou compartilham informações semelhantes, criar uma forma específica apenas para esse fim. Dessa forma, seu usuário associará imediatamente essa forma específica a uma área específica de informações.

Lei da Proximidade

De acordo com esta lei objetos que estão mais próximos uns aos outros são considerado ser do mesmo grupo. Os mesmos quadrados, quando exibidos lado a lado em proximidade próxima e regular, criam um senso de agrupamento.

Este princípio tem sido usado em grande parte na web ultimamente, especialmente quando se trabalha com loops de conteúdo, por exemplo. em blogs e lojas virtuais.

Você pode agrupar imediatamente o título, a imagem em destaque, os metadados e o trecho juntos, mesmo sem bordas ou planos de fundo. Você pode remover linhas e cores desnecessárias do seu design para torná-lo mais minimalista, mas ainda totalmente compreensível.

Para sua conveniência, vou citar também a Wikipedia que afirma:

Lei da boa forma

Também conhecida como Lei de Pragnanz ou Boa Gestalt, esta lei afirma que nós tendemos a agrupar objetos se eles formar um padrão simples, regular e ordenado. Nossa mente tenta separar formas complexas e perceptivelmente difíceis em muitos grupos de formas simplesmente compreensíveis; isso levou ao importância da concisão.

Esta é também uma das possíveis razões por trás do sucesso de projeto baseado em grade e isso fez com que estruturas web baseadas em tabelas e quadros (felizmente, coisas da idade das trevas do design) fossem tão populares.

Se você mantiver esse princípio em mente, provavelmente não acabará criando um site cheio de formas complexas de blocos de conteúdo que seriam conectados em mente por meio das outras leis acima. Ainda assim, você pode agrupe seus objetos juntos de uma maneira interessante, por exemplo. em forma de diamante ou papagaio, uma vez que estes ainda são percebidos como formas ordenadas e concisas.

Teoria, percepção e uso da cor

Visão de cores e percepção de cores é em grande parte subjetiva baseado em como os cérebros dos espectadores reagem às ondas de luz refletidas por objetos ou formas coloridas. A regra é que pessoas diferentes, mesmo sem qualquer deficiência visual, vêem o mesmo objeto em cores diferentes (você pode se lembrar do vestido).

Propriedades da cor

Ainda existem três propriedades objetivas da cor; matiz, valor e intensidade.

Matiz é o nome da cor conforme rotulado em uma roda de cores ou em um arco-íris. Existem seis (ou doze, dependendo de com quem você está falando) matizes básicos: vermelho, laranja, amarelo, verde, azul e violeta.

Amarelo, azul e vermelho são primário, laranja, verde e violeta são secundário matizes; também existem terciário matizes que são as misturas diretas de dois matizes primários e secundários (por exemplo, amarelo verde ou violeta vermelho).

Valor é a leveza ou escuridão da cor, referida como valor alto para cores claras ou baixo valor para cores escuras.

Intensidade refere-se a brilho ou obscuridade de uma cor; isso significa que uma cor com o mesmo matiz e o mesmo valor ainda pode ser escurecida ou iluminada alterando a intensidade e criando diferentes saídas de cores.

A intensidade mais alta de todas as cores é a matiz que elas mostram na roda de cores (veja abaixo), enquanto a mais baixa é a cor cinza.

Contrastes de cor

Referindo-se às leis de semelhança acima mencionadas, as mentes dos percebedores criam grupos de pequenos objetos que eles vêem com base em propriedades semelhantes e diferentes - geralmente cores.

Quando você escolhe sua paleta de cores para o seu site, especialmente se você optar por uma abordagem minimalista ou se projetar uma área de conteúdo com conteúdo de texto, por exemplo, blogs ou anúncios, você deve esteja ciente dos diferentes contrastes de cor que pode ajudá-lo a encontrar os valores de cor certos para o melhor resultado.

Existem 7 contrastes de cores de acordo com Johannes Itten, embora eu apenas mencione 3.

1. Contraste de matiz

Amarelo, vermelho e azul em plena intensidade são contrastes diretos e vívidos. Os tons secundários fazem uma distinção menos nítida, mas ainda funcionam, assim como os tons terciários, embora nenhum deles produza resultados impressionantes como com tons primários.

2. Contraste complementar

Duas cores estão em contraste complementar quando misturadas criam um cinza neutro. Estes também são chamados pares estranhos. Se eles são adjacentes, eles aumentam a vivacidade e intensidade, enquanto misturados juntos se anulam mutuamente. Cada cor tem um e apenas um complementar; na roda de cores, os pares são diagonalmente opostos um ao outro.

3. Contraste claro-escuro

Se você quiser experimentar um site de uma só cor, usando valores diferentes do mesmo matiz pode produzir resultados impressionantes. Geralmente usado em design web minimalista, você também pode produzir ótimos resultados com base em contraste claro-escuro se quiser fornecer opções de cores de tema ao usuário. Esse contraste também é usado para design de escala de cinza.

Se você quiser seguir os 4 contrastes de cores restantes, você pode encontrá-los aqui.

Criando paletas e verificando contrastes

Sabendo que a teoria é ótima, interpretar suas idéias é outra coisa. Você não deve se preocupar, a web oferece um ótimo suporte para suas necessidades de malabarismo de cores. Há uma infinidade de ferramentas que ajudam você a criar padrões de cores personalizados com base nas regras de contraste de cores, por exemplo, Paletton ou Adobe Kuler.

Para fins de web, você pode querer verificar contrastes que você escolheu para usar no webAIM, no site de Jonathan Snook ou baixar uma instância do Color Contrast Analyzer do The Paciello Group aqui.

Conclusão

Quando você começar a trabalhar com um novo tema ou começar a modificar os existentes, tente pensar nos princípios da percepção para organizar seu conteúdo e lembre-se de considerar as regras de cores ao dar ao seu design sua forma final e matiz.

Nota do editor: Este guest post foi escrito para o Hongkiat.com por Marton Fekete. Marton é um desenvolvedor de sites húngaro recentemente viciado no WordPress. Ele é um entusiasta de redesenho e escritor de conteúdo freelance que gosta de jogar RPGs em seu tempo livre.