O flat design está dominando cada pixel: isso é uma coisa que nós já sabemos. Mas você já ouviu falar dos gradientes no flat design?
Soa meio estranho, não é? Pois é, mas existe, e hoje vou mostrar a você que o gradiente voltou. Não daquele jeito horrível e assustador, que causa medo aos olhos, mas sim de uma forma bonita e confortável, e o melhor de tudo, flat <3.
Nos últimos dias tenho observado alguns trabalhos de agências de design que mostram que o gradiente pode ser usado no flat design. Uma delas criou o site da Virgin America. Assim que você entrar no site, observe que existe um gradiente no topo. O site é todo flat, mas este detalhe o torna mais bonito e confortável. E não para por aí; a mesma agência fez trabalhos para outras marcas, e demonstrou que quando trata-se de flat design sabe fazer direito. (https://work.co/virgin-america/)
Já no Brasil não é diferente. Temos alguns sites que mostram que essa tendência está chegando com tudo. Um exemplo bem útil é o Megacurioso criado pelo Grupo NZN. Ao acessar o site, com uma interface completamente flat, você observa no topo um gradiente muito bonito e chamativo. Mas este menu tira o conceito “flat” do site? Não, só o deixa mais flat ainda.
Temos diversos outros exemplos de sites que aderiram a esta tendência. Mas e aí, como usar? O uso do gradiente tem que ser bastante cuidadoso, pois qualquer erro pode estragar seu trabalho. Eu listei algumas dicas para que você use o gradiente corretamente:
- É recomendado o uso cores flats nos seus gradientes: você pode usar o site flatuicolors.com, e caso não tenha as cores que você queira, existem diversas “paletas” flat na internet que podem lhe ajudar bastante.
“Existe alguma ferramenta que possa facilitar minha vida, que tenha gradientes nos padrões adequados para usar com o flat design?” Sim, existe: eu recomendo o uiGradients.com, mas, como tempo é dinheiro, você pode acelerar o processo usando um kit de gradientes que eu fiz para Photoshop +CS3, assim você evita copiar e colar tantas vezes até escolher o gradiente correto. Você pode baixá-lo clicando aqui. Caso não saiba como instalar um novo gradiente clique aqui.
Fiz uma pequena e rápida demonstração de flat com gradientes em html + css + svg que você pode baixar aqui. Abaixo confira alguns outros exemplos:
Bom pessoal, é isso. Espero que vocês tenham gostado. E lembrem-se sempre: tudo em exagero fica ruim, hehe.
