Duotone Color: dicas e exemplos para esta tendência vibrante
A próxima grande tendência de imagem para web design está aqui, e é vibrante, colorida e bonita!
Graças ao Spotify, o duotônico está crescendo em popularidade quase diariamente. O efeito, que usa um par de cores sobre uma foto, é impressionante, divertido e vibrante. Também está na moda, com novos sites mudando para um formato duotônico quase diariamente. Aqui estão algumas maneiras de aproveitar ao máximo essa técnica de design a quente.
O que é Duotone?
Primeiro, um pouco de cartilha: Duotone é o uso de duas cores.
O nome e a técnica vêm das impressoras. As impressões Duotone são feitas em dois tons da mesma cor ou em preto e um tom. O processo utiliza duas chapas coloridas feitas com a tela configurada em ângulos diferentes.
O conceito de duas cores é grande. Pantone nomeou um par como Cor do ano, o minimalismo fez os designers pensarem em paletas e duotons limitados, visualmente interessantes e bastante fáceis de criar. Você pode criar o efeito usando o Adobe Photoshop e um gradiente de duas cores ou uma ferramenta como o Colofilter.css para aplicá-lo no código.
Mas o que provavelmente ajudou a tirar duotone do chão é o uso pelo Spotify. Os esquemas de cores Duotone são usados no aplicativo de reprodução de música e em vários micro-sites promocionais. Duotone adiciona um elemento de design exclusivo às imagens de artistas conhecidos e amplamente utilizados.
A técnica que antes era um grampo de impressão encontrou uma nova vida online e é uma tendência que provavelmente veremos muito mais nos próximos meses.
Como uma imagem dominante
Use o tom duplo para criar uma imagem dominante.
O visual principal do New Deal Design é impressionante graças a uma escolha de cores ousadas e peculiares, graças às imagens e cores divertidas. Não tenha medo de sair do seu conforto quando se trata de trabalhar com imagens duotônicas; tudo bem emparelhar tons que podem não corresponder. O objetivo é criar um visual que exija atenção e inclua bastante contraste para a imagem aparecer.
Aqui estão algumas dicas para obter o máximo impacto:
- Escolha duas cores contrastantes ou emparelhe as cores da marca.
- Selecione uma foto com uma área de imagem focada. Uma paisagem pode ser difícil de usar.
- Comece com uma imagem de alta qualidade. Imagens borradas ou ruins e o tom duplo não se misturam.
- Toque em contraste.
- Considere espaços para botões ou tipografia.
- Escolha cores que refletem o clima da foto.
- Desative uma imagem em tom duplo com uma borda colorida ou misture e combine as opções de cores com um controle deslizante de rolagem ou efeitos de paralaxe.
Como uma paleta de cores simples
Duotone não precisa ser complicado. Às vezes, os projetos de duas cores mais impressionantes são de natureza simples.
O Seguro de Vida Assurance usa um par de vermelhos e tipografia limpa. O pergaminho também inclui um estilo mais meio-tom. As cores são brilhantes e envolventes. Vermelho é o tipo de cor que quase faz os usuários olharem para ele.
O truque aqui é que é simples o suficiente para ser eficaz. O usuário não está sobrecarregado com elementos. O vermelho atrai você para que as palavras na tela se tornem o foco. Esse tipo de efeito duotônico é quase criado para sites com aparência e aparência mais formais, pois permite o uso de uma tendência sem se sentir forçado ou opressivo.
Como uma maneira de aumentar a legibilidade
Use o tom duplo para atuar como um estabilizador de cores que oferece muito espaço e contraste ao texto. Uma sobreposição de cores em tom duplo pode ajudar a "achatar" as variações de cores em uma imagem, para que o texto possa ser colocado usando uma única cor em praticamente qualquer lugar da imagem e ainda assim possa ser lido.
As opções de cores Duotone não serão tão brilhantes para esse uso e provavelmente parecerão mais suaves, mas podem servir a um ótimo propósito. Holm Marcher & Co. faz isso com um tom azul e coral interessante e cria um cenário altamente legível para as letras. Como um bônus adicional, os elementos de navegação usam tons de azul da paleta de cores para incentivar a movimentação pelo site.
Como um sotaque
Enquanto os efeitos duotônicos se prestam a imagens grandes, eles também podem trabalhar em locais menores. Considere um sotaque de tom duplo na navegação, para imagens secundárias ou para tipos específicos de conteúdo.
O que é legal em áreas menores do duotônico é que você tem um pouco mais de liberdade para tocar se se sentir intimidado pela técnica ou se não tiver certeza de como fazê-la funcionar para você. Quando usado em espaços menores, pode ser visualmente interessante brincar com vários pares de cores para diferentes elementos no design.
Considere elementos duotônicos para elementos de estilo de cartão, como uma sobreposição para links para vídeo ou para enfatizar frases de ação. Os acentos Duotone também podem ser ferramentas eficazes para uso em um esquema de cores mínimo ou preto e branco, devido ao contraste de cores que eles criam.
Como pano de fundo
Não há nada como um efeito sutil de tom duplo para criar uma imagem ou padrão de fundo interessante. Este é um uso ideal para cores de marca ou como uma maneira de incorporar uma tonalidade ou técnica da moda em seu design sem uma revisão em grande escala.
O fundo duotônico da Join Radio é a perfeição. A mudança de cor é quase imperceptível e combina perfeitamente com outros elementos da interface do usuário no design. Há uma animação simples movendo-se através das cores, que é reconfortante e com um movimento semelhante à água. A mudança do claro para o escuro segue os padrões naturais de olho e leitura que se movem da parte superior esquerda da página inicial para a parte inferior direita, onde o usuário é incentivado a rolar e clicar.
Conclusão
É difícil encontrar uma técnica de design mais divertida do que a cor. Duotones são igualmente atraentes para designers. O efeito pode apimentar uma imagem usada em excesso, adicionar um elemento divertido quando falta uma e apenas ajudar a envolver visualmente os usuários.
Além disso, você, o designer, começa a experimentar ao usar efeitos duotônicos. Você pode emparelhar cores que talvez não tenha imaginado para um grande impacto ou combinar cores com variações sutis para um pequeno elemento de surpresa. De qualquer forma, a criação desse efeito de cor quase sempre parece personalizada e pode ser divertida de se trabalhar.
