Cores silenciosas: Definição e Como Utilizá-los em Websites e Apps

Advertisement

O conceito de utilização de cores emudecidas no seu design certamente não é novo. Quando você está comparando-o com a tendência de cores vivas que temos em quase todos os lugares, certamente parece algo novo.

Um designer UX moderno sabe que a tendência minimalista e plana vem ganhando força nos últimos anos.

Existem empresas como a Microsoft, Apple e Twitter, e todas elas estão aproveitando esse estilo emergente quando estão desenhando seus produtos digitais.

O design plano anda de mãos dadas com a abordagem minimalista.

O design plano eliminará a profundidade ao não usar sombras e gradientes, e favorecerá a geometria unidimensional.

FireShot-Capture-1789-BO Muted Colors: Definition and How to Use Them In Websites and Apps

The minimalist design will eschew unnecessary features and content, replacing it with a clean, sleek monochromatic approach. Together, the two approaches will give you legibility and clarity, and reject ornamentation and excess.

FireShot-Capture-1790-Fut Muted Colors: Definition and How to Use Them In Websites and Apps

However, even though these two practices make the UI interface very simple, their intersection has created some usability issues for certain users.

Fazer as coisas muito simples teve na verdade o efeito oposto ao que era necessário, e os usuários acham mais difícil descobrir onde eles podem clicar, e por quê.

Felizmente, há uma terceira tendência para ajudar nisso. Cores mudas também captaram algum vapor.

exploração-pastel-color-2- Cores mudas: Definição e Como Utilizá-los em Websites e Apps

exploração-pastel-color-2- Cores Mortas: Definição e Como Utilizá-los Em Websites e Apps

Muted color schemes are everywhere in print advertising. Entretanto, em uma campanha impressa, você não precisa de um design minimalista ou um efeito plano, porque o usuário não está interagindo com um pedaço de papel, mas, em vez disso, ele só precisa olhar.

No entanto, a paleta de cores silenciosa assumiu na verdade um novo papel além do seu papel principal nas práticas funcionais UX.

FireShot-Capture-1776-Air Muted Colors: Definição e Como Utilizá-los em Websites e Apps

Se você tentar encontrar uma definição de cores mudas, você verá que a melhor resposta à pergunta “O que são cores mudas” está no fato de que essas cores representam o moderno, a eficiência e a progressividade.

Dizem ao telespectador que qualquer que seja a substância que estejam olhando, ela é relevante, e não desatualizada. Por exemplo, você pode ver cores silenciosas no vídeo “Hotline Bling” do Drake.

Captura de Fogo - 1778-Cores Silenciosas: Definição e Como Utilizá-los em Websites e Apps

Estas cores e pastéis mudos foram muito intencionais, e eles falam com a cultura moderna e as massas. Eles também significam algo do momento. Sendo muito mais fáceis de se ver do que cores duras e nítidas, elas também estão muito conceitualmente na moda.

FireShot-Capture-1780-Vic Muted Colors: Definição e Como Utilizá-los em Websites e Apps

Advertisement

Agora, os designers UX devem saber que as suas escolhas de cor são realmente as suas escolhas de design, e a cor pode indicar muito, assim como o fluxo, conteúdo, usabilidade e função.

A escolha entre um verde vibrante ou tons de verde silencioso pode fazer a diferença entre o usuário ficar no site, e sair instantaneamente. Da mesma forma que uma IU desajeitada pode parecer um pouco analógica, essas cores brilhantes e vibrantes podem parecer uma explosão do passado.

Muted colors appear like they do because of:

FireShot-Capture-1781-VR- Muted Colors: Definição e Como Utilizá-los em Websites e Apps

    1. Menor valor
    2. Menor saturação
    3. Mistura com cores adjacentes
    4. Combinação de qualquer uma das anteriores

    Existem variações da paleta de cores planas que você já viu milhares de vezes, e muitas vezes elas simplesmente não se encaixam com a estética de design que você está visando. Mesmo quando tudo o resto lhe agrada.

    É aqui que uma opção de cor muda pode fazer maravilhas, pois quando a utiliza com uma estética plana, é um visual clássico, polido, que é suficientemente diferente para se destacar de todos os outros projectos planos.

    animal-800-x-600-large-1 Muted Colors: Definição e Como Utilizá-los em Websites e Apps

    animal-800-x-600-large-1 Muted Colors: Definição e Como Utilizá-los Em Websites e Apps

    mas, o que é uma paleta de cores emudecidas?

    Para os fins desta conversa, é qualquer tonalidade que esteja altamente saturada e adicionando um tom, tonalidade ou sombra para torná-la mais suave e menos brilhante. Você frequentemente obtém uma cor mais suave, mais calma como resultado que é mais fácil de trabalhar, assim como corresponde ao design geral.

    FireShot-Capture-1784-AMA Muted Colors: Definição e Como Utilizá-los em Websites e Apps

    “Color” é na verdade um termo muito impreciso que usamos diariamente. É composto por três componentes principais, nomeadamente a tonalidade, a saturação e o valor.

    Se você tiver um balão onde o equador é a tonalidade em 360 graus, o eixo vertical é o valor, e o horizontal é a saturação, as cores podem ser visualizadas no volume interno.

    FireShot-Capture-1785-Des Muted Colors: Definição e Como Utilizá-los em Websites e Apps

    Existem alguns outros conceitos que podem ajudar nesta questão, tais como “sombreamento” e “tinting”. Por exemplo, misturar qualquer cor com o preto é conhecido como “sombreamento”, e resulta em um pouco mais de cor silenciosa.

    No entanto, adicionar branco a uma cor é conhecido como “tinting”, e resulta em uma cor mais brilhante. No entanto, nem todas as cores podem ficar brilhantes ou escuras, como o amarelo, por exemplo. Torná-la mais escura irá torná-la castanha.

    Tintas em cores suaves

    Adicionar branco a uma cor, ou coloração, dá-lhe uma cor que é significativamente mais clara do que a original, e normalmente conhecida como pastel. Eles podem variar de quase branco, até um pouco mais claro do que a cor totalmente saturada.

    FireShot-Capture-1786-Kve Muted Colors: Definição e Como Utilizá-los em Websites e Apps

    A sua sensação é mais leve, mais suave, e dá-lhe uma estética mais suave em comparação com as opções mais arrojadas e brilhantes.

    São muito populares nas ilustrações e também fazem maravilhas nas fotos. Elas se afastam da estética principal, e são mais comumente usadas quando você tem outro ponto focal ao contrário da estética principal.

    Shades em cores suaves

    FireShot-Capture-1787-Céd Muted Colors: Definição e Como Utilizá-los em Websites e Apps

    Shades, por outro lado, fazer a cor parecer mais pesada aos olhos, e variar de uma cor quase preta, a um toque mais escuro do que a original. Eles funcionam bem em uma variedade de ambientes, especialmente quando usados com menos preto.

    story-app-exploration-large Muted Colors: Definição e Como Utilizá-los em Websites e Apps

    Existem projetos que são realmente escuros e têm muito preto que vêm com problemas de legibilidade, a menos que você os execute excepcionalmente bem. As pessoas frequentemente assumem incorretamente que os tons devem parecer pretos, mas quando você está desenvolvendo um dos esquemas tradicionais de design plano, este não é o caso.

    Tons em cores mudas

    FireShot-Capture-1782-Wha Muted Colors: Definição e Como Utilizá-los em Websites e Apps

    Combinando preto e branco com uma cor para fazê-lo parecer mais suave dá-lhe tons. A maioria das cores são realmente feitas usando tons, já que são cores complexas com um apelo quase universal.

    Isto se deve ao fato de que eles puxam de algumas partes diferentes do espectro de cores, e é por isso que os tons são a primeira escolha de artistas e designers para a maioria de seus projetos.

    unsplash-app-exploration-la Muted Colors: Definição e Como Utilizá-los em Websites e Apps

    unsplash-app-exploration-la Muted Colors: Definição e Como Utilizá-los Em Websites e Apps

    Ending thoughts on muted colors

    Independentemente de você estar se ramificando de algumas cores tradicionais de design plano, escolher uma das técnicas de cor acima não é sua única escolha. Você pode combinar sombras, tonalidades e tons para criar algo diferente e absolutamente envolvente.

    A lição com estes estudos simples é que você não pode ser pego tendo que usar uma tendência “by the book”. Use um tipo diferente de técnica para criar a sua própria tendência. A paleta de cores e sua mudança pode ser maravilhosa, e você ainda pode obter um design plano.

    Se você gostou deste artigo sobre cores emudecidas, você deve conferir estas também:

  • Photography Website: Design, Ideias, Como criar um
  • Sports Websites Design: Dicas, Inspiração e Melhores Práticas
  • Concepção de Websites Restauradores: Dicas, Inspiração e Melhores Práticas

Downloads Ilimitados: 1,000,000+ Fonts, InDesign Templates, Photoshop Actions, Mockups & Design Assets via logo

Deixe uma resposta

O seu endereço de email não será publicado.