Vamos dissecar as tendências actuais do design digital, primeiro a Gradients, um dos temas mais mencionados nos resultados da nossa pesquisa de tendências, realizada graças à colaboração dos utilizadores e do Júri Awwwards. Confira os resultados completos da nossa pesquisa em nosso livro AGORA. A Contemporary Landscape for Digital Thinkers.

Gradients têm estado na moda há algum tempo, eles inicialmente fizeram um retorno de forma convencional em fundos e imagens. Spotify tornou-os novamente populares, aplicando gradientes duotónicos sobre as fotos como elemento característico da marca nas suas campanhas e microsites. Você pode encontrar um pequeno tutorial aqui sobre como criar gradientes duotônicos em photoshop.

Este ano temos visto vários gradientes multicoloridos com paletas de cores vibrantes e formas irregulares com efeitos de borrão e distorção. Os gradientes estão sendo usados atualmente de muitas maneiras, mas a mais característica, em termos de tendências, é seu uso ser estendido a elementos secundários dentro da composição, tais como pausas, títulos, elementos 3D, ícones e mais.

>
• >
  

  >

>

>

>

>

>

O iPhone X representa o paradigma de tendências de 2018. Na sua página de destino, anúncios, e muitos dos elementos nas suas campanhas promocionais, são usados gradientes de vários tons acima dos títulos, textos ou mesmo do isótipo. No entanto, nos fundos e especialmente no design na tela inicial do iPhone X, os gradientes NÃO são uniformes como os tradicionais gradientes lineares ou radiais, mas multicoloridos com mistura irregular.

>

Gradientes em 3D? Cor do vértice e estilo de mapa de cores

Parece óbvio falar de gradientes em 3D, já que a iluminação da cena gera uma gradação de luz na superfície do objeto, mas o que é inerente a esta tendência é precisamente o uso de gradientes como textura do objeto, às vezes imitando as técnicas de cor do vértice e gradiente do mapa de cores. Ambas as técnicas servem mais do que uma função puramente decorativa, pois são usadas para representar dados ou mapear objetos 3D.

Tipos de Gradientes

Podemos misturar cores de múltiplas formas, sendo as mais comuns os gradientes lineares ou radiais com diferentes parâmetros como raio, orientação, opacidade ou pontos de cor. O que está na moda neste momento, como vimos no caso do iPhoneX, é o uso de misturas não uniformes que usam malhas de gradiente ou outras técnicas. Com as malhas de gradiente distorcemos a superfície do gradiente para gerar uma forma de forma livre. Podemos encontrar muitos tipos de gradientes como rampas monótonas, duótonas, multicor, rampas de gradientes, etc, como demonstrado no gráfico a seguir.

Utilizar ferramentas para gradientes CSS

Para recriar estes efeitos em CSS existem muitas ferramentas disponíveis que permitem que eles sejam criados através de editores visuais, simplesmente copiando e colando o código CSS, como você pode ver aqui: Webgradients, Khroma AI, Color Space, UI Gradients, Grabient, Coolhue, Easing Gradients em CSS.

• Khroma

  

• Webgradients

  

• Espaço de Cor

  

• Cool Tonalidade

  

• Easing Gradients

  

• UI Gradients

  

Download the Gradients Source File!

>

Entre em contato com os gradientes, baixe o arquivo fonte gratuitamente em formato vetorial .ai ou pdf para fazer seus próprios experimentos de design com os gradientes do pôster.

DESCARREGUE AQUI

Awwwwards Gradients Collection

Como sempre fizemos uma seleção de SOTDs e indicados para que você possa ver esses efeitos em uso, esperamos que você possa encontrar alguma inspiração em Awwwards Collections ou em nosso livro, AGORA. A Contemporary Landscape for Digital Thinkers, que discute as principais tendências de web design do ano.

• 
• 
• WebGL modelo 3D em WebGL
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• Homepage In Parallax