Então você quer ser designer web? (Parte 1 – Cores)

Um dia em você acha que já sabe “mexer” bastante no Photoshop (ou Fireworks) e decide que se lançar no mercado como designer web. Fez alguns pequenos trabalhos, e não vê a hora de criar um site bacana e colocar seus serviços à venda na prateleira de um domínio com seu nome.

Por mais que você seja talentoso, e mereça um lugar ao Sol, o que mais faz falta nesse momento é bagagem. Ter um bom repositório de referências é a melhor forma de começar a trabalhar em qualquer projeto web antes mesmo de clicar “Ctrl + N” no Photoshop.

Pensando nisso, resolvi falar de inúmeras áreas de apoio especificamente voltadas para a criação de layouts, interfaces e projetos web. Falarei sobre ícones, bancos de imagens, fontes, texturas e tantos outros assuntos que não vão caber num post só. Por isso criei uma nota no meu Evernote que está recheada de links para que eu possa sempre visitá-la antes de começar a escrever por aqui. Sintam-se à vontade de sugerir qualquer coisa, inclusive as áreas. A ideia é que essa lista seja infinita.

Então para começar eu resolvi falar de cores

Responsável por boa parte da emoção transmitida ao usuário, uma boa paleta de cores pode ser o sucesso do seu site. Dependendo da combinação escolhida, a paleta pode transmitir felicidade, calma, acolhimento, excitação, estímulo, enfim, há sempre uma ou mais cores indicadas para o sentimento que você deseja transmitir para a sua interface. É a chamada Psicologia das Cores. Um excelente infográfico que explica muito bem esse conceito é o do site Viver de Blog no artigo A Psicologia das cores no marketing. Vale a leitura.

Vamos às ferramentas:

Color Palette Generator

Uma excelente ferramenta online que tem uma função bastante útil quando o conceito central do seu projeto é uma fotografia. Imagine que você precisa criar a paleta de cores baseada nessa imagem. Normalmente você abriria a imagem no Photoshop e usaria o conta-gotas, selecionando algumas partes onde a cor fosse mais relevante, e criaria uma nova paleta com as cores desejadas. Isso seria mega trabalhoso, além do fato de confiar seu olho para decidir quais cores seriam as mais relevantes na imagem.

Com Color Palette Generator basta subir a imagem que ele faz esse trabalho para você, escolhendo 6 cores, e exibindo o código hexadecimal nos formatos “dull” (cores mais opacas) e “vibrant” (cores mais vibrantes). Veja um exemplo do resultado de cores com a imagem Rainbow Queen.

Material Palette

Seguindo a onda “Flat Design“, a Material Palete é uma ferramenta que certamente vem a calhar. Basta escolher duas cores, e ela simula interfaces ‘mobile flat‘, além de sugerir combinações. Você pode alterar a combinação baseado em uma das cores e recomeçar o ciclo, que, uma vez definido, fica disponível para download nos formatos CSS, SASS, LESS, SVG, XML e PNG.

Adobe Color CC

Para quem tem um perfil na Adobe a dica é usar o Adobe Color CC, ideal para fazer estudos de combinação de cores e salvar na nuvem. Você pode começar a paleta baseada em uma cor específica ou em uma imagem, fazendo inclusive ajustes online. A ferramenta indica a paleta de 5 cores que pode ser refinada conforme o gosto do freguês.

Além disso, há uma galeria de paletas com os temas públicos de outros usuários, onde é possível copiá-las para sua galeria e editá-las posteriormente, permitindo ainda o download, salvá-las como favoritas ou fazer comentários. Utilize também a busca, pois os resultados levam em consideração o nome que os usuários deram para as suas paletas, assim como o nome das cores e tags. Enfim, uma mar de possibilidades.

Paletton

Paletton é uma ferramenta online no formato Color Schemer, onde selecionamos uma cor inicial, podendo ajustar infinitas combinações, sempre com as opções de variação monocromática, cor adjacente, tríade (três cores), tétrada (quatro cores), e sempre de forma editável. Uma vez decidida a paleta, basta fazer download nos formatos HTML, CSS, LESS, XML, entre outros.

COLOURlovers

Uma mistura de rede social e ferramenta, COLOURlovers é antes de mais nada um ótimo laboratório na hora de criar paletas de cores. A ferramenta também auxilia na criação de cores únicas, patterns, entre outros.

Comece a criar a paleta baseada numa cor única, que pode ser ajustada a qualquer momento, já que a ferramenta sugere composições de cores automaticamente. Você pode também fazer o upload de uma imagem e terá como resultado uma das mais completas sugestões de cores via ferramentas online.

Coolors

Conheci esta a ferramenta recentemente e me apaixonei. Coolors é simples e fácil de usar. É ideal para usuários mais exigentes que precisam ajustar não só a cor, mas também outros tipos de saída (tem até CMYK para impressos) e canais de cor. Você define uma cor e vai ajustando conforme a sua necessidade. Caso esteja de acordo com uma cor, basta fechar o cadeado e ajustar as outras até completar a paleta.

O processo é manual, mas oferece um enorme controle para quem não deseja que um algorítimo decida sua composição. Para quem busca inspiração antes de meter a mão na massa, o site também oferece uma vasta galeria de paletas, com a possibilidade de exportação nos formatos PDF, PNG, SCSS e SVG. E se você for usuário dos serviços na nuvem da Adobe, há ainda a possibilidade de inserir diretamente no Illustrator e  Photoshop um Add-on por U$ 5,00. Uma pechincha.

E aí, ficou com uma vontade incontrolável de sair colorindo tudo?

Não esqueça de comentar quais ferramentas você usa e sugerir áreas para serem abordadas nos próximos posts.

Até o próximo artigo!