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. (http://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.
- Evite o uso de cores “puras” (100% da cor), como já citado, é legal utilizar as cores flats.
- Use apenas gradientes lineares horizontais. Evite o uso gradientes de outros tipos (Os gradientes lineares podem ser usados em alguns casos)
- Não abuse, o uso do gradiente é limitado. Caso use o gradiente em muitos elementos irá tirar o “brilho” do uso do gradiente.
- Use apenas gradientes lineares horizontais. Evite o uso gradientes de outros tipos (Os gradientes lineares podem ser usados em alguns casos).
- Use sua criatividade.
“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.