Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Color Theory
Webdesign

6 "Normas de Segurança" de Cores para a Web para Novatos

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called Web Design Theory.
Unity in Web Design

Portuguese (Português) translation by Eloisa Valdes (you can also view the original English article)

Ainda me lembro vividamente de uma minhas primeiras aulas de arte, quando era uma criança pequena e ávida, e fui apresentada a uma palete de tintas de cores vivas. Recordo o prazer de ver as cores primárias misturadas e transformadas em secundárias pela primeira vez, e de pensar que se duas cores podiam fazer uma nova muito bonita, então todas as cores juntas deviam fazer algo ainda melhor! Foi completamente desolador perceber que independentemente de como o tentava, se usasse todas as cores à minha disposição acabaria com uma cor horrível que apenas pode ser chamada de "BLECH".

Anos mais tarde, como uma webdesigner novata, vivi algo semelhante a esse processo de novo. Enquanto aprendia caí na armadilha inevitável de usar demasiadas cores, ou combiná-las da pior forma, apenas para ficar com algo um bocado "BLECH".

Decidi tentar aprender a criar esquemas de cor para a web, e descobri muita informação fascinante sobre teoria da cor. Li sobre tonalidades, tintas, saturação e brilho, assim como sobre esquemas de cor análogos, monocromáticos, trípticos, complementares e compostos.

A paleta base de cores RGB 

No entanto, sem um enquadramento prático onde inserir essa informação, descobri que, a princípio, isso não me ajudou a criar designs de websites bem coloridos. De facto, foi apenas depois de começar a criar esquemas de cores sólidas através do método de tentativa-e-erro puro que toda a teoria da cor que li começou a fazer algum sentido.

Durante o processo descobri algumas "normas de segurança" para esquemas de cor de websites que desejei ter conhecido desde início. Quando estás no início, a teoria da cor completa não é necessariamente do que precisas para começar. Frequentemente, do que precisas é de começar a trabalhar com algo um pouco menos teórico, e um pouco mais "pintar por números".

Neste tutorial vou partilhar contigo seis linhas orientadoras à prova de fogo que podes seguir de modo a obter um entendimento de base em relação a trabalhar com cor em webdesign. Estas não são regras, à medida que fores criando, muitos esquemas de cor na tua carreira irão seguir uma direcção completamente diferente. Em vez disso, são um ponto de partida, um guia de segurança para sobreviveres às tuas primeiras saídas no mundo do webdesign sem te encontrares com o "BLECH".

1. Esquema de Cor é a Tela, Não a Pintura

Um dos princípios fundamentais no webdesign é que não adianta quanto tempo gastaste a criar um design glorioso, o seu papel principal é ficar em segundo plano e apoiar a verdadeira estrela do espectáculo: o conteúdo. O teu esquema de cores nunca deve fazer o design do site "falar mais alto" do que o conteúdo que o mesmo apresenta. O teu design deve estar no plano de fundo, a ajudar o conteúdo do site a avançar para o primeiro plano.

Um esquema de cor subtil permite que as imagens sejam prioritárias.
Um esquema de cor berrante distrai das imagens. Não se riam, isto acontece mesmo na selva da web.

Um processo muito comum em webdesign é criar o design em si em relativo isolamento, muitas vezes num programa como o Photoshop ou Sketch. Se não tiveres colocado algum exemplo de conteúdo pode ser fácil acabar com um design que seja maravilhoso em si, e que um cliente possa muito bem adorar na sua forma de maquete, mas que na prática distrai demasiado os visitantes do site. De facto, o processo de webdesign é tão extremamente ligado ao conteúdo que muitos webdesigns de alta qualidade parecem quase vazios sem conteúdo algum no seu lugar.

É uma boa ideia começar por colocar uma amostra do tipo de conteúdo que esperas que apareça no site, quer no programa de design, quer directamente no código, e desenhar à volta disso. Este é o caso especialmente se fotos ou imagens de um estilo particular estiverem envolvidos, para que possas certificar-te que o teu design vai fluir harmoniosamente com eles. Imagina que o conteúdo do site é um indivíduo único para quem tens de fazer um fato que lhe sirva perfeitamente.

2. Começa Com uma Base de Escala de Cinza Simples

Há um número infinito de combinações de cores que podes escolher para o teu plano de fundo principal e base de texto. No entanto, a minha recomendação é a de começar pela mestria do mais fácil, que é branco e/ou cinzento-claro no plano de fundo junto com texto cinzento-escuro.

Se olhares para uma selecção qualquer de sites populares, modelos ou temas, há uma forte probabilidade da maioria deles terem esta mesma base de texto cinza-escuro em branco ou cinza-claro, e isso tem uma razão de ser. Com esta combinação garantes virtualmente uma legibilidade para os visitantes, e permites que o conteúdo baseado em texto e imagem sejam destacados.

Com alguma amostra de conteúdo no seu lugar cria uma configuração de cinzentos básica, como por exemplo:

Geralmente falando deves evitar o uso de preto puro para o texto dado que o cinza-escuro é um pouco mais fácil de ler. Uma gama confortável está algures entre #333333 e #666666.

Para as tuas cores de plano de fundo, o branco puro #FFFFFF é a aposta mais segura para os planos de fundo imediatamente atrás do corpo de texto principal. Para outros elementos de fundo podes usar qualquer tom de #FFFFFF até#CCCCCC.

De novo, isto não são regras para cores que tens de usar, apenas linhas orientadoras com as quais sabes que podes começar a trabalhar em segurança.

3. Escolhe Apenas Uma Cor para Destacar

Onde é mais fácil vermos esquemas de cores acabarem mal é quando há uma disputa de muitas cores diferentes. Quantas mais cores utilizares, mais complicado é mantê-las sob controlo. Assim, para começar, adiciona apenas uma cor extra em cima da tua base de cinzentos, que será utilizada para destacar coisas como links, títulos, menús, botões, e por aí fora. A tua cor de destaque pode ser azul, verde, vermelho ou o que mais gostares.

Escolhe a tua cor de destaque sobrepondo, em primeiro lugar, uma caixa por cima da tua base, para que possas vislumbrar como é que a tua cor fica em relação a todos os elementos. Depois abre um selector de cores e clica no centro do canto superior direito do mapa de cores.

Move a barra deslizante para cima e para baixo e escolhe uma cor que aches que vá funcionar bem com o teu design.

Neste momento estás a trabalhar com três cores básicas; o teu plano de fundo, texto e destaque. Podes, e deves, utilizar mais do que uma cor de destque no futuro, mas por agora pensa nisso como fazer malabarismo. Já estás a trabalhar com três malabares, por isso espera até estares confortável com eles, e sentires-te confiante, antes de adicionares mais na rotação.

Acabaste De Aprender:

Acabaste de aprender como escolher uma "tonalidade". Resumidamente, uma tonalidade é uma cor de base. Quando moves a barra deslizante para cima e para baixo vês o valor "H" mudar no teu selector de cor.

"H" representa tonalidade, e uma vez escolhida a cor de destaque, o número nessa caixa é a tonalidade.

4. Quando em Dúvida, Usa Azul

Se tiveres alguma dúvida sobre que cor de destaque utilizar, escolhe o azul. A sério. Azul é frequentemente a cor mais flexível com que podes trabalhar e irá condizer com o maior número de tipos de sites. Cores como o roxo e o amarelo podem ser bastante apelativas, mas também podem ficar berrantes se utilizadas da forma errada.

Por outro lado podes fazer praticamente qualquer coisa com o azul como cor de destaque sem acabares por fazer demasiados estragos. Se não tens a certeza sobre onde começar ou que cor usar num projecto, vai pelo azul. O azul que escolheres pode estar algures entre um azul marinho (tonalidade 235) até um verde-água (tonalidade 190) que estarás em território seguro. 

Para o meu exemplo de esquema escolhi uma tonalidade de 205. Quando tiveres decidido a tua cor de destaque vai em frente e adiciona-a ao teu design onde aches necessário. Se estiveres a utilizar uma cor de destaque em botões ou qualquer área com texto por cima, muda a cor desse texto também. Neste caso mudei a cor do texto por cima de áreas destacadas para branco.

5. Adiciona Variações à Tua Cor de Destaque

Uma vez escolhida a tua cor de destaque deixa a barra deslizante (de tonalidade) onde ficou a partir desse momento. Vais precisar de cores extra para o teu design, mas vão ser todas variações dessa cor de destaque que já escolheste, de modo a manter as coisas simples.

Para criar variações de cores arrasta o cursor na área do mapa do selector de cores.

Usa esses tipos de variações de cor para coisas como:

Efeitos de Rato

Limites

Texto Mais Subtil Por Cima da Cor de Destaque

Gradientes

Efeitos de Luz e Sombra

6. Mantém-te Longe do Canto Superior Direito

O canto superior direito do mapa de cores é a terra das cores de alta octanagem. As cores no canto superior direito são como carros de corrida de Fórmula 1; podem ter uma performance fantástica e são muito sedutoras, mas geralmente é necessário um elevado grau de experiência para as utilizar bem. Sem essa experiência podem causar acidentes, portanto é melhor iniciares-te com cores que são mais calmas.

É por isso que na terceira secção deste tutorial te pedi para clicares, no mapa das cores, no centro do canto superior direito antes de escolheres a tua cor de destaque, para ter a certeza de que começaste com uma cor relativamente moderada.

Para ilustrar isto, vê o que acontece se eu mudar apenas a tonalidade do nosso design até agora, sem tocar no mapa das cores.

Ainda parece bem, certo? No entanto, se eu arrastar o mapa das cores até esse canto superior direito, de repente não parece tão bem.

Ai, os meus olhos!! Se quiseres assegurar-te de que não queimas as retinas dos teus visitantes, segue a linha orientadora geral de moderar as tonalidades ao manteres-te fora do canto superior direito do mapa das cores.

Acabaste De Aprender:

Nas últimas duas secções aprendeste realmente a aplicar alguns aspectos diferentes de teoria da cor. Aprendeste como trabalhar com:

Saturação e Brilho.

Quando moves a área de mapa da área do selector de cor vês que os valores "S" e "B", que significam Saturação e Brilho respectivamente, mudam. Também vês que o número de tonalidade se mantém. Assim estás a crias variações de core ao alterar a saturação e o brilho da tua tonalidade original.

Saturação e Tons

Saturação é quão vivamente a tua cor é expressa.  Por exemplo: "A minha camisola está saturada com vinho tinto entornado". Num selector de cor típico a saturação é determinada por quanto branco é misturado na tua tonalidade de base. Quanto menos branco, mais saturado.

Quando vais para o lado direito no mapa das cores reduzes a quantidade de branco presente e aumentas a saturação, e aí o valor "S" sobe. Quando vais para o lado esquerdo, em direcção ao canto todo branco estás a diminuir a saturação, por isso o valor "S" sofre uma descida.

Saturação num mapa de selecção de cor normal.

Este misturar de branco na tua tonalidade original também é chamado de criar um "tom". O termo vem da mistura de tintas, onde uma tinta branca é misturada com uma tinta de cor.

Brilho e Sombras

Brilho é a quantidade de preto misturado na tua cor. Quanto menos preto, mais brilho há.

Quando arrastas para cima no mapa reduzes a quantidade de preto, aumentas o brilho e e o valor "B" no selector de cor sobe. Quando arrastas para baixo aumentas o preto e o valor "B" sobe.

Misturar preto com a tua tonalidade original também é chamado de "sombra". Isto também vem da mistura de tintas, onde uma tinta preta é misturada com uma de cor.

Tons

Chama-se criar um "tom" quando misturas cinzento na tua cor Quando sais do canto superior direito como fizémos acima estás a baixar tanto a tua saturação como o teu brilho, o que adiciona tanto branco como preto (cinzento) e, portanto, a criar um tom. Então basicamente de cada vez que a saturação e o brilho estejam a menos de 100% temos um tom.

De novo, este termo vem da mistura de tintas, onde um cinzento é criado e depois misturado com uma tinta de cor. Também é daqui que a frase "moderar o tom" vem. Fixe, uh?

Esquemas de Cor Monocromáticos

Um esquema de cor "monocromático" é quando pegas numa tonalidade de base e a extendes com tintas, sombras e tons. Acabaste de aprender o que todos esses termos significam num contexto prático. Então, ao escolher uma cor de destaque e criar variações da mesma, estás na realidade a criar um esquema de cor monocromático.

E Agora?

Continua a praticar os teus esquemas de cor monocromáticos numa base de cinzentos até te sentires confiante. Tenta criá-los com diferentes tonalidades como a tua cor de destaque, experimentando para ver como muda a saturação e quais as definições de brilho que podes usar.

Quando te sentires confortável, adiciona então uma cor de destaque extra. Recomendo tentares laranja com azul na tua primeira vez, uma vez que é o duo mais fácil de trabalhar. Depois tenta verde com azul que, na minha experiência, é o segundo mais fácil. Ambas as combinações tendem a ser um sucesso com clientes e fregueses.

A melhor coisa que podes fazer para acelerar o teu entendimento dos esquemas de cor para a web é pegares num sampler de cores numa extensão de browser, como o Colorzilla, e usá-lo para começar a examinar como os designers mais experientes fazem o seu trabalho. Enquanto estiveres a navegar pela internet e vires um esquema de cores que te agrada, saca do sampler de cores e descobre quais as cores utilizadas na página. Para cada tonalidade que descubras com o sampler, verifica quais os melhores níveis de saturação e brilho foram os melhores para trabalhar com ela. Presta também atenção a que cores combinam com outras.

Se em dúvida, podes sempre voltara usar as linhas orientadoras de "segurança" que te dei para que estejas livre do "BLECH" daqui em diante.

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.