Análise e aplicação do princípio do “contraste” em web design

O web design é composto de muitos elementos diferentes, e esses elementos têm importâncias diferentes. Alguns elementos precisam ser particularmente proeminentes, alguns elementos estão relacionados entre si e outros elementos não têm nenhuma correlação. O que é mais difícil é como transmitir visualmente a relação entre os elementos de forma eficaz. É aqui que entra em jogo o princípio do contraste.

Contraste é a diferença entre dois ou mais elementos. Através do contraste, os designers podem criar interesse visual enquanto direcionam a atenção dos usuários. Imagine se todos os elementos da página parecessem iguais, então o conteúdo pareceria desorganizado, não haveria "fluxo (de visão)", não haveria uma estrutura clara e seria difícil de entender e aceitar. Portanto, o contraste é uma parte importante do web design.

Neste artigo, veremos como projetar páginas da web melhores por meio dos princípios de contraste de cor, tamanho e alinhamento.

contraste de cor

Quando a maioria das pessoas ouve a palavra “contraste”, a primeira coisa que pensam é na cor. Embora o princípio do contraste seja mais do que apenas cor, a cor pode ajudar muito os usuários a identificar diferentes elementos em uma página.

Geralmente, as páginas incluem cabeçalho, área de conteúdo e rodapé. Então precisamos distinguir claramente essas três partes diferentes visualmente. Uma boa maneira de fazer isso é usar cores de fundo diferentes.

O site Churchmedia é um bom exemplo. Use uma cor de fundo mais escura para o cabeçalho e rodapé e branca para a área de conteúdo. Através desta diferença, o conteúdo pode ser claramente destacado e a sua importância demonstrada. Se olharmos um pouco mais fundo, há também um contraste de cor de fundo diferente na área de conteúdo: um azul claro é usado para a seção “caso”. Como o contraste entre ele e outras partes do conteúdo é muito pequeno, significa que as duas partes estão relacionadas.

Portfólio de Phil Renaud Este site utiliza um layout único e um esquema de cores extremamente bonito. O site é todo desenhado em marrom, e ele usa um amarelo dourado para aumentar o contraste entre a área de navegação vertical e outras áreas.

A cor também pode ser usada para criar contraste entre o texto. Em Billy Tamplin, cores diferentes são usadas no título, subtítulo e parágrafos do artigo para distinguir razoavelmente cada parte e estabelecer uma estrutura visual, o que acaba alcançando bons resultados. Como interface de blog, é importante estabelecer contraste entre o título do artigo e o conteúdo principal. Dessa forma, quando os usuários rolam a página, eles podem ver claramente onde o artigo começa e termina.

comparação de tamanho

Outra forma de contrastar no design da página é usar tamanhos diferentes para elementos diferentes. Em outras palavras, torne alguns conteúdos maiores que outros.

Quando não se pode confiar na cor, torna-se importante criar contraste através do tamanho. Táxi vem em poucas cores e traz muitas novidades em suas páginas. Portanto, para estabelecer a estrutura do layout de três colunas, os projetistas usaram uma largura muito maior na coluna do meio – mais que o dobro do tamanho das colunas esquerda e direita. Permita que os usuários vejam rapidamente que a coluna do meio é a parte mais importante da página.

Assim como os títulos podem usar cores para criar contraste, o tamanho também pode. Os títulos são uma ótima maneira de estabelecer estrutura visual no conteúdo do site. O site da Imaginaria Creative usa títulos grandes para chamar a atenção dos usuários e retê-los para que leiam mais dos parágrafos menores abaixo.

Comparação de alinhamento

Um bom alinhamento desempenha um papel importante no web design de alta qualidade. As coisas geralmente parecem melhores quando estão alinhadas. Portanto, sinto que usar alinhamentos diferentes para criar contraste é mais difícil e deve ser usado com mais moderação. Mas pode ser muito eficaz se for bem feito.

LegiStyles usa um grande espaço em branco à esquerda do bloco de conteúdo abaixo do título. Juntamente com o grande tamanho do título, cria um belo efeito de contraste. Se você quiser usar alinhamentos diferentes, certifique-se de aumentar essa escala diferente, caso contrário, acabará parecendo um erro de design grave.

Grandes blocos de texto centralizados são uma proibição tipográfica. Porque isso tornará o texto difícil de ler. No entanto, tente misturar parágrafos de texto alinhados à esquerda com títulos alinhados ao centro. Esta é outra ótima maneira de criar contraste usando diferentes alinhamentos. Combinado com uma bela fonte serifada, você também pode obter um belo efeito.

Simon Collison usa títulos alinhados ao centro e texto alinhado à esquerda em cada bloco de conteúdo. Embora o texto do título não seja muito maior que o texto do parágrafo, a diferença já pode ser percebida.

A List Apart é outro ótimo exemplo de título centralizado com parágrafos alinhados à esquerda.

Faça isso

Aprender a criar o contraste apropriado em seus designs é como aprender outros princípios de design – é preciso prática. Passe algum tempo estudando o trabalho de grandes designers e veja como eles usam o contraste. Lembre-se, o contraste é “diferente”. Se dois elementos forem de natureza muito diferente, certifique-se de que sejam visualmente distintos.

Texto original em inglês: O Princípio do Contraste em Web Design