Dado um esquema de cores, como posso me inscrever no design de sites?


22

Apenas para que haja algo concreto para discutir, digamos que eu tenha esse esquema de cores:

paleta de cores de tons de primavera

Fonte

Existem muitos artigos sobre como escolher um esquema de cores coerente com base em cores complementares, cores monocromáticas etc. No entanto, depois de definir um conjunto de cores, como decido qual cor é o cabeçalho, qual cor é o link, qual é o plano de fundo e texto. Mesmo se eu decidir que quero um esquema de luz no escuro ou no escuro, colocar as demais cores na tela ainda pode fazer o site parecer feio.

Existem regras práticas ou diretrizes gerais que ajudam a decidir quais cores vão para onde?


2
A resposta é que você as escolhe com base no que parece bom e alcança os objetivos de design. Infelizmente, não há fórmula para isso.
DA01 18/02

Bem, o @ DA01 já disse isso, além disso, você não pode aplicar um determinado esquema de cores a nenhum site. Em vez disso, você decide o esquema de cores de acordo com o site.
Ikartik90

1
Ótima pergunta! Infelizmente essa imagem é 404 agora.
Animesh

Para aqueles que se perguntam, recriei o esquema de cores a partir do link morto acima. A seleção de códigos de cores nas respostas e nos comentários fornece esta paleta: color.adobe.com/create/color-wheel/…
springloaded

Respostas:


13

Eu vejo muitas pessoas comentando coisas como "não há resposta certa", das quais eu meio que discordo ... Certamente há pelo menos uma resposta certa, talvez algumas, e tenho certeza de que também há muitas respostas erradas, um bom design consiste em alcançar a melhor solução possível com base nos recursos e no tempo disponível para você. E certamente essa solução superará várias alternativas. Você nos forneceu uma paleta de cores para fins de discussão. Então, eu vou fazer exatamente isso e responder sua pergunta com base na paleta de cores fornecida. (Como eu não vi o layout com o qual você está trabalhando, isso ainda será bastante amplo, mas haverá algum processo para você seguir.)

Portanto, as primeiras cores que gosto de escolher ao criar um esquema de cores em um projeto da Web são o plano de fundo do corpo e a cor do texto principal. Normalmente, é uma boa ideia escolher as duas cores mais contrastantes para preencher essas funções e sua paleta de exemplos não é exceção. Nesse caso, as cores são # DEE1DD e # 28363D. Agora temos que decidir qual usar para o texto e qual usar como plano de fundo e, na maioria dos casos, tento usar a cor mais clara para o plano de fundo e a mais escura para o texto. Houve uma pesquisa considerável para mostrar que lemos uma cor escura em uma cor clara com mais facilidade do que uma cor clara no escuro, então é isso que eu geralmente prefiro, a menos que haja uma razão para uma aparência mais escura (como se você estivesse criando um site para um heavy metal banda ou algo assim ... Eu vou assumir que não é o caso aqui). Tão,

Em seguida, gosto de passar para o que eu acho que é o próximo item mais importante, que é o hiperlink. Você quer uma cor que contrasta o suficiente com o plano de fundo para não ser difícil de ler, mas também com o texto para que seja perceptível. Neste exemplo, a maioria dos verdes mais claros ficará ilegível no fundo claro, portanto a resposta mais óbvia é # 2F575D.

Em seguida, você fez alusão a um cabeçalho que precisava ser colorido e, novamente, precisamos contrastar com o fundo. No interesse do minimalismo, tento reutilizar as cores que já usei no corpo e, neste caso, a cor do texto provavelmente é muito escura para preencher grandes quantidades de espaço, de modo que eu estaria inclinado a selecionar # 2F575D e por por todas as razões acima, eu usaria a cor do corpo em segundo plano # DEE1DD Para preencher qualquer texto ou link no cabeçalho.

Por fim, abordo elementos de design não essenciais, como os estados de pairar, e ainda temos alguns greens diferentes para escolher. Novamente, isso provavelmente precisa contrastar bastante com o plano de fundo, pois os links não desaparecem ao rolar sobre eles, portanto, se você preferir # 658B6F ...

E ... Voila! Agora você tem um esquema de cores 4 (básico). Espero que este processo o ajude tanto quanto me ajuda :)!


3

O site ao qual você vinculou está mostrando como usar essas cores:

#28363D for the active state 
#2F575D as the navigation background 
#DEE1DD as background 
#C4CDC1 as banner ...

Normalmente, borracho minha própria cor no design - mesmo que eu saiba que elas estão um pouco erradas - pelo menos tenho aproximadamente duas cores sólidas ou pelo menos uma. Então, quando expus minha idéia, pego minha cor principal (a que mais usei) e a adiciono a uma roda de cores. Dessa forma, substituo minhas outras cores. Ou tento encontrar algumas imagens que tenham a maioria das minhas cores originais.

Eu li artigos que dizem, tire uma imagem e projete seu trabalho com base nessas cores, não posso fazer isso. Crio meu próprio design, com pelo menos uma cor em mente e depois uso as técnicas da teoria das cores

espero que ajude


> O site ao qual você vinculou está mostrando como usar essas cores: Certo, essa é a minha pergunta, qual é o 'algoritmo' para descobrir isso sozinho?
Shahbaz 17/02

Eu não acho que exista. Por exemplo, se eu tivesse que adicionar essas cores a esse site, não as teria organizado dessa maneira. Por exemplo, a maneira como eles usaram as cores aqui lavishbootstrap.com/?image_url=http://design-seeds.com/palettes/… é horrível na minha opinião, embora a cor seja muito agradável, mas - na minha opinião - mal organizada. Então você só precisa brincar com cores. Eu não acho que exista uma maneira mecânica - se houver, eu recomendaria que você brinque com seus projetos e não a use!
1723 Aurel

3

Não existe uma fórmula sobre o que levar, que deve ser um pano de fundo e assim por diante, por isso o design é uma arte.

Normalmente, faço vários testes com o conjunto de cores que tenho, por exemplo, qual cor de fonte fica melhor em qual plano de fundo.

Embora exista uma regra prática, que é contrastar as cores usadas, a maioria das pessoas dirá que isso é senso comum, como fonte de cor clara com fundo de cor escura. Em seguida, pode surgir como você determina a cor dos subcomponentes, como caixas de alerta, navegação e assim por diante.

Na minha opinião, você deve ter sua estrutura simples para o site pronta e, depois disso, precisará determinar qual é o seu conteúdo principal, como deseja apresentá-lo. Talvez uma cor mais suave nos subcomponentes, o que não precisa de atenção imediata.

Como você sabe se é bom ou não? Calma, assim que você diz "Isso é legal", é quando é bom. Sempre ajuda a ter uma segunda opinião de outras pessoas.

Em suma, continue tentando com a combinação de cores, não se atenha apenas a uma, e você poderá se surpreender com a composição que alcançou no final.

Combinação @Color: A combinação fornecida pelo site é boa o suficiente para começar.


2

Lembro-me de uma época em que minha primeira esposa e eu recebemos um grande painel de lona e vários tubos de tinta acrílica. Colocamos a tela no chão e esgueiramos sem rumo cores aleatórias por toda parte. Deixamos secar e depois penduramos sobre a lareira. Com o tempo, vários convidados comentaram como era maravilhoso e pensaram que era uma obra de arte cara ... ou seja, até que dissemos a eles como foi pintada. Está tudo nos olhos de quem vê.

Tendo relatado essa história, devo dizer que concordo que existem combinações de cores incompatíveis, feias para a maioria dos espectadores. No entanto, não há muitos deles. Não acho que você deva se estressar demais em acertar . O conteúdo do site pode compensar muitas opções de cores ruins. O conteúdo sempre supera o design.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.