O gradiente refere-se à transição de uma cor para outra, podendo passar, ou não, por várias cores no meio. No início, quando o flat design surgiu, os designers aboliram os gradientes das suas criações. No entanto, desde que o Instagram mudou o logotipo da câmera Polaroid clássica para um ícone plano de cores vivas, o gradiente iniciou o seu regresso.

Se não reconhece o termo flat design, é quase certo que esteja familiarizado com ele, à exceção do nome. Ele representa o design simplista e clássico que se tornou quase omnipresente no design recente de interfaces para o utilizador – uma estética limpa que favorecia um estilo minimalista ao nivelar ícones e arte, impregnando-os de cores sólidas e ousadas.

Por volta do final de 2010, os gradientes foram postos de lado quando foi abraçada a era do flat design.

O flat design destinava-se a eliminar a desordem e a distração, obrigando os utilizadores a perceberem e compreenderem os ícones mais rapidamente. O Windows 8 foi um dos primeiros exemplos do flat design, e o estilo foi rapidamente popularizado pela Apple e pela Google.

Recentemente, os designers começaram a perceber os problemas de usabilidade do flat design. Como resultado, uma interpretação mais madura e equilibrada do flat design começou a surgir. Designers estão a descobrir que podem ser “autenticamente digitais” e explorar as oportunidades únicas do meio sem comprometer a usabilidade.

Esta nova interpretação é por vezes referida como “semi flat”, “almost flat” ou “flat 2.0”. Este estilo de design é basicamente flat, mas faz uso de sombras, realces e camadas subtis para criar alguma profundidade na interface do utilizador. E é aqui que entra um dos elementos do novo flat design: os gradientes.

Tipos de gradientes

Podemos misturar cores de várias maneiras, sendo as mais comuns os gradientes lineares ou radiais com diferentes parâmetros como o raio, a orientação, a opacidade ou pontos de cor. O que está na moda agora, como no caso do iPhoneX, é o uso de misturas não uniformes que usam malhas de gradiente ou outras técnicas. Podemos encontrar muitos tipos de gradientes como monocolor, duotônico, multicolor, rampas de gradientes, blurred etc, como demonstrado no gráfico a seguir elaborado pelo site awwwards.

Vamos ver alguns exemplos de cores de gradiente usadas em aplicações e sites.

Ferramentas úteis para criação de gradientes

Para recriar estes efeitos em código para aplicação em sites e app’s móveis, existem algumas ferramentas disponíveis que permitem que sejam criados gradientes através de editores visuais, simplesmente copiando e colando o código CSS na sua página ou app, como pode ver aqui:
Webgradients
Color Space
Coolhue
Easing Gradients

20 gradientes duotone para usar no seu site ou aplicação móvel

Para jovens designers, designers seniores, marketeers, responsáveis nas empresas pelo digital, ou analógico para todos os efeitos, para gestores de empresa responsáveis pelo desenvolvimento de sites ou aplicações móveis, deixamos aqui a sugestão de 20 gradientes duotone para usarem. Por baixo da cor, os valores hexadecimais das 2 cores que compõem o gradiente.

#ABDCFF   →   #0396FF

#CE9FFC   →   #7367F0

#FFF6B7   →   #F6416C

#F97794   →   #623AA2

#43CBFF   →   #9708CC

#52E5E7   →   #130CB7

#2AFADF   →   #4C83FF

#97ABFF   →   #123597

#EE9AE5   →   #5961F9

#FD6585   →   #0D25B9

#FEB692   →   #EA5455

#90F7EC   →   #32CCBC

#E2B0FF   →   #9F44D3

#F761A1   →   #8C1BAB

#FAD7A1   →   #E96D71

#F05F57   →   #360940

#FFF886   →   #F072B6

#FF6FD8   →   #3813C2

#FFD3A5   →   #FD6585

#FFE985   →   #FA742B