No que toca ao mundo de design da web, a aparência de um website é fundamental para capturar e manter a atenção e o interesse dos seus visitantes. Isto pode ser feito de várias formas, desde a organização da informação apresentada, ao uso de animações ou de imagens e vídeo. Uma das vertentes que acaba por ter mais impacto do que inicialmente aparenta é o uso da cor. É comum visitar websites onde as cores dominantes coincidem com o seu logótipo ou o tema correspondente. Isto não é uma coincidência, pois existe uma vasta ciência por detrás das cores, analisando quais os seus significados, onde se enquadram melhor e de que forma são capazes de influenciar o comportamento humano.

É neste tópico do comportamento humano que se menciona a psicologia da cor. Esta área de estudo da psicologia comportamental veio trazer respostas sobre quais os usos mais adequados para as diversas cores e em que situações estas devem ser usadas ou evitadas:

Vermelho

O vermelho é fortemente associado a excitação, paixão, amor, energia e urgência. Esta cor é frequentemente usada de modo a chamar a atenção e apresentar uma sensação de importância.

O vermelho é habitualmente encontrado em ambientes relativos a moda, desporto, marketing, publicidade, serviços de saúde e de urgência, e gastronomia.

Azul

A cor azul é associada a qualidade, seriedade, confiança, estabilidade, segurança, inteligência, profissionalismo, frio e a sensações de calma ou tristeza, dependendo do contexto onde é usada.

Pelas características descritas, o azul tem uma forte presença em empresas nos ramos financeiros e tecnológicos.

Verde

O verde representa crescimento, natureza, harmonia, saúde, paz, tranquilidade, relaxamento, otimismo, conforto, riqueza, fertilidade e energia.

Esta cor é indicada em contextos de ciência, saúde e ambiente.

Amarelo

O amarelo simboliza felicidade, energia, juventude, otimismo, bem-estar, despreocupação, positividade, diversão, sabedoria e avisos.

É uma cor vibrante que chama a atenção e por isso deve ser usada em quantidades reguladas para não ofuscar o resto do conteúdo, bem como o facto de ser uma cor forte que pode ser pesada para os olhos.

Roxo

O roxo é uma cor ligada a luxúria, prosperidade, riqueza, realeza, criatividade, elegância e sofisticação.

Esta cor é associada em contextos de produtos de beleza, luxo, espiritualidade e marcas femininas.

Laranja

Semelhantemente ao vermelho, o laranja é uma cor que chama a atenção, mas sendo menos agressiva. É a cor do entusiasmo, do calor, da criatividade, felicidade, diversão, energia e excitação.

O laranja encontra-se em contextos de tecnologia, comida, entretenimento e comércio automóvel.

Preto

O preto é a cor da sofisticação, de mistério, de tristeza, da luxúria, de poder e de elegância. É usado como forma de contraste com outras cores que se pretendam realçar.

É uma cor predominante do setor de marcas de luxo, como por exemplo, em carros e em vestuário formal. No caso particular da web e software em geral, o preto é empregue como uma alternativa ao habitual visual branco das interfaces. Pode também ser usado em conjunto com o branco de modo a criar visuais simples e minimalistas.

Branco

O branco está intrinsecamente conectado com conceitos de limpeza e higiene, pureza, simplicidade, minimalismo, paz e tranquilidade, medicina e saúde.

O branco é considerado a cor universal para o design na web, podendo ser usado em praticamente qualquer contexto. Devido à sua versatilidade e simplicidade, é habitualmente usado como cor de fundo. Semelhantemente ao preto, pode ser usado como forma de realçar as outras cores presentes e, como mencionado anteriormente, pode ser combinado com a mesma para criar um design simples e minimalista. É uma cor frequentemente usada em medicina, pelas sensações de limpeza e esterilidade que ela provoca.

Cinzento

Esta é a cor da neutralidade, equilíbrio, maturidade, sofisticação, praticidade, profissionalismo, confiança, modernismo, industrialismo, adaptabilidade e formalismo.

É uma cor que serve de ponte onde o preto pode ser demasiado forte e o branco demasiado simples. Pode ser usado para chamar a atenção de um determinado elemento de uma forma calma e discreta. Uma cor popular em sites com intuito profissional, quer a nível pessoal como empresarial.

Temperatura e tonalidade

O grande espetro de cores pode ser categorizado em dois segmentos quanto a sua temperatura: o que contém cores “quente” e o das cores “frias”. O que quer isto dizer? De uma forma simples, as cores quentes são aquelas que se aproximam do vermelho, por evocarem sensações de calor, energia ou paixão. As cores contidas neste segmento são os vários tons de vermelho, laranja e amarelo. Na outra vertente, as cores frias são o oposto. Centralizadas no azul, estas evocam sensações se calma, serenidade, tranquilidade, relaxamento e profissionalismo. As cores frias são constituídas pelos tons de azul, roxo e verde.

Existe também o conceito de tonalidade de cor. Este deriva do facto de existirem múltiplas cores que partilham uma base igual. Dando um exemplo, existem diversos tons de vermelho diferentes, uns mais claros, uns mais escuros, outros com tons a tender para o roxo e outros para o laranja.

O resultado desta diversidade de cor é o de um enorme leque de escolhas para o design de um website, onde cada cor pode ser minuciosamente selecionada de modo a invocar as específicas emoções dos utilizadores. Desde um forte vermelho para anunciar uma promoção para uma nova gama de telemóveis até um cinza suave para dar um toque de cor ao fundo de uma notícia de um museu, o uso apropriado da cor tem o poder de influenciar o comportamento humano de uma forma desejada.

Esquemas de cor

Outro dos princípios de uso de cor no design de websites é o uso de esquemas de cores. Estes são conjuntos de relações entre diferentes cores e os seus variados tons de modo a obter combinações que tenham um aspeto apelativo, que reforçam algum sentimento em particular, a identidade de uma marca ou uma mensagem. Alguns destes esquemas são:

Monocromático: este esquema foca-se na exploração de uma única cor e de variações do seu tom, levando a um aspeto minimalista e sofisticado.

Análogo: esquemas análogos utilizam cores que são adjacentes entre si na roda da cor, como amarelo, amarelo torrado e laranja, criando um visual coeso, harmonioso e equilibrado.

Complementar: neste esquema utiliza-se cores que são opostas entre si, traduzindo-se num grande contraste entre elas com intenção de captar a atenção.

Neutro: um esquema neutro é essencialmente composto por pretos, brancos, cinzentos, beges e castanhos.

Regra dos 60-30-10

Após a análise da importância do uso de determinadas cores e os seus tons no design de um website, existe uma regra que ajuda a averiguar o modo como as cores escolhidas devem ser empregues para criar um visual equilibrado e apelativo: a regra dos 60-30-10.

Esta regra ajuda na distribuição de quantidade de cor a ser usada, dividindo em segmentos de 60%, 30% e 10%.

Os 60% correspondem ao uso da cor primária e dominante, sendo esta tipicamente usada como cor de fundo que estabelece o ambiente pretendido para um website. Tons de branco e cinzento são muito comuns para esta função.

Os 30% correspondem à cor secundária. O propósito desta é de ser uma cor que complemente a cor principal, em contextos como títulos, subtítulos e menus. Tipicamente uma cor que contraste com a principal, como um tom mais escuro da mesma ou uma que lhe seja complementar.

Para finalizar, os restantes 10%. Estes devem ser reservados a uma cor mais intensa, para aspetos como links, ícones e botões. Devido à sua função de chamar a atenção de utilizadores para elementos mais importantes, esta deve ser usada somente onde seja necessário.

Esta regra não deve ser vista como sendo uma diretriz obrigatória para ser seguida à letra, mas apenas como uma ferramenta útil que auxilia na criação de um design conciso e harmonioso.

No mundo de design da web, a cor tem um papel fundamental em moldar a perceção que um utilizador tem de um determinado website. Perceber as relações entre as diferentes cores e os seus principais propósitos é fundamental para que possa criar um ambiente digital apelativo e convidativo de acordo com o contexto em que se insere. Esta é uma das muitas ferramentas que a Filipengine utiliza a fim de desenvolver os seus projetos da forma mais completa possível.