Entendendo totalmente o contraste no design
Normalmente, o assunto do contraste é reservado para iniciantes. Os livros dirão "preto e branco têm contraste, vermelho e laranja não" - mas há muito mais do que isso.
Os livros para iniciantes geralmente tocam apenas no contraste de cores, mas e quanto ao tamanho e contraste da forma? Muitas vezes, a maneira mais fácil de distinguir um designer amador de um profissional é observar o uso do contraste.
Criar uma estrutura de importância usando tamanho, forma e cor é o que dá impacto e legibilidade a uma página ao leitor.
Neste post, vamos examinar o contraste em detalhes, examinando a grande tipografia, formas divertidas, divisões claras, imagens e como elas se encaixam corretamente usando o contraste para uma boa experiência do usuário.
Uma introdução ao contraste
O contraste pode ser definiram como “a diferença nas propriedades visuais que faz um objeto (ou sua representação em uma imagem) distinguir-se de outros objetos e do plano de fundo”. Em inglês claro que poderia ser descrito em seu nível mais básico como “coisas que parecem diferentes uma da outra. "
Para designers em todas as áreas da prática, mas especialmente os web designers, o contraste está na raiz de praticamente tudo. Estamos constantemente tentando estabelecer hierarquias de importância, atrair pessoas para certas áreas de uma página e comunicar uma mensagem clara e concisa no coração do nosso trabalho. Criar relacionamentos entre diferentes elementos de um design é a coisa mais importante que você pode fazer. Você provavelmente já fez muito, conscientemente ou não.
Exemplos óbvios de contraste são preto e branco, grandes e pequenos, rápidos e lentos, grossos e finos. Os opostos são a maneira mais fácil de entender o contraste, mas quando se aplica contraste ao trabalho de design, nunca é tão preto e branco. Se você estava se perguntando, é daí que vem o ditado sobre uma situação de “preto e branco”, que também leva ao ditado de que algo é uma “área cinzenta”. No design, muitas vezes, comparamos coisas diferentes, mas não opostas, por exemplo, um H1 e um h1, ou um botão "adicionar ao carrinho" e um botão "check out". É aqui que entram níveis maiores de contraste.
Vamos dar uma olhada nos diferentes tipos de contraste e alguns exemplos de como eles são usados no web design.
Contraste de cor
O exemplo mais comum de tudo, é onde tudo começa. Se duas cores são diferentes umas das outras (por exemplo, preto e branco) elas têm alto contraste, ao passo que, se forem muito semelhantes (vermelho e laranja), terão pouco contraste.
O TekRoc usa um contraste de cores muito óbvio aqui, sobrepondo uma imagem brilhante e vibrante em cima de um fundo muito escuro. O laranja brilhante e o azul destacam-se claramente e o olho é imediatamente atraído para eles acima de todas as outras coisas na página.
Tim Van Damme faz excelente uso do contraste de cores no design do site GoWalla. Não apenas a borda multicolorida no topo da página se destaca e cria um interesse visual por ser diferente do fundo claro, mas também adicionou sombras extremamente sutis de 1px ao texto nos botões. A laranja levemente mais escura realmente ajuda a criar contraste entre o texto branco e o fundo laranja.
Envato são os mestres do contraste sutil e a tendência de usar bordas de 1px para isso provavelmente pode ser atribuída a eles mais do que a qualquer outra pessoa. Todos os sites apresentam várias bordas de pixel único para criar contraste entre as seções. Na imagem acima, as duas áreas de conteúdo poderiam ter sido divididas por apenas espaço, ou uma única linha, no entanto, usando duas linhas (uma escura, uma luz), elas criam um contraste sutil entre as duas seções, o que é extremamente eficaz.
Contraste de tamanho
A próxima forma mais comum de contraste é usar tamanho. Algo grande ao lado de algo pequeno geralmente indica que o item maior é muito mais importante. É isso mesmo, estamos dizendo que o tamanho é importante!
MadeByWater é o portfólio de design da Jordan Vitanov. Ele usa o contraste de tamanho com uma tipografia extremamente grande para transmitir instantaneamente uma citação de Bruce Lee, que define por que ele escolheu se nomear com o nome MadeByWater.
28Thiers é um atraente bar sofisticado na França. Seu site faz grande uso do contraste de tamanho para chamar sua atenção imediatamente para a grande fotografia do Martini com ingredientes variados que o rodeiam. É instantaneamente claro que este é o elemento mais importante na página e o designer quer que você olhe para essa imagem e seja vendido pelo fato de ser um estabelecimento extremamente elegante.
O SlideScreen faz vários usos do contraste de tamanho em seu site. Além de exibir o produto com uma captura de tela grande, eles também usam botões muito grandes para suas chamadas principais à ação. Eles querem que você assista o vídeo de seu produto em ação e, em seguida, eles querem que você faça o download. Esses são os elementos mais importantes da página, portanto, são substancialmente maiores do que as outras coisas que os cercam.
Contraste de Forma
Contraste de forma significa tornar as coisas notáveis por sua diferença na forma física em comparação com outras coisas na página. Em seu nível mais básico, isso pode ser usado em coisas como adicionar cantos arredondados a botões, mas levado a níveis mais extremos, pode atrair muito mais atenção.
A Anebstar usa o contraste de formas para exibir três imagens importantes no cabeçalho. Como a maioria das coisas na Web é retangular, uma das maneiras mais fáceis de obter contraste de formas é usar um círculo. É claro que este exemplo também tem um contraste de tamanho pequeno misturado, mas você pode ver claramente como os elementos circulares se destacam de todo o resto da página.
Carbonmade é um site deslumbrante com uma mistura real de ilustrações lindas e conteúdo bem apresentado. Um simples botão de inscrição aqui teria funcionado, mas o tamanho e o contraste de cores provavelmente não o teriam separado o suficiente do ambiente ocupado. Adicionando um polvo amigável por trás do botão realmente dá essa diferença de forma para chamar a atenção diretamente para ele.
O WireframePlus usa um contraste simples, mas extremamente eficaz, para destacar o preço de seus serviços. Eles querem que você leia o conteúdo deles, mas, acima de tudo, eles estão tentando vender seu ótimo preço colocando um grande círculo atrás dele.
Contraste Posicional
Criar contraste no posicionamento é uma maneira muito simples de criar uma hierarquia de elementos usando apenas alinhamentos diferentes. Nos últimos tempos, essa técnica foi popularizada por pessoas como Elliot Jay Stocks, que a usou ao extremo em seu site de portfólio mais recente.
Elliot Jay Stocks usa uma grade detalhada para definir o alinhamento de todos os elementos em seu site. A atenção é chamada para áreas específicas, sendo elas recuadas para a esquerda ou para a direita, respectivamente. Nesta captura de tela em particular, o parágrafo introdutório realmente se destaca porque está alinhado mais à esquerda, onde o olho olha primeiro para ler algo. Esse tipo de alinhamento "inspirou" muitos outros designers nos últimos doze meses a criar designs com contraste posicional no mesmo tipo de estilo.
SimpleBits é a marca na qual Dan Cederholm trabalha, você pode conhecê-lo de projetos como Dribbble . Nas primeiras impressões, o site SimpleBits não parece ter nenhum contraste posicional, no entanto, quando você inicia a rolagem, tudo se torna claro. Quando algumas pessoas usam uma imagem de fundo fixa para criar um efeito estilístico, Dan fez seu logotipo e navegação ficarem totalmente fixos na posição, de modo que, independentemente de onde você rolar, eles sempre permanecerão no mesmo lugar na tela. Este é um ótimo exemplo de contraste posicional não padrão.
SquaredEye é a loja de design administrada por Matthew Smith e as páginas de estudo de caso em seu portfólio fazem um uso fantástico do contraste posicional. Você precisa ver a página inteira para realmente entender a ideia, mas, essencialmente, Matthew criou meticulosamente um posicionamento específico para cada seção da página. Isso cria um contraste fantástico entre as seções e cria um grande interesse visual para o leitor sem distrair-se.
Conclusão de contraste
Há muito mais para contrastar do que apenas “claro e escuro” - é um dos princípios mais importantes do design e quase nunca se pode ter muito dele, desde que você o use corretamente.
Levar seus projetos para o próximo nível não é encontrar o próximo vagão de banda para usar esquinas arredondadas e sombras para tudo, é encontrar maneiras melhores e mais eficientes de comunicar a mensagem por trás do design.
Explorar o contraste em detalhes e usá-lo em todo o seu potencial é uma das melhores maneiras de fazer isso.
O que você acha? Quanta atenção você paga para contrastar com seus projetos? É algo que você pensa o tempo todo ou é algo que vem naturalmente?