Flat design: a nova tendência dos gradientes
Como utilizar gradientes em meio ao flat design nas suas composições web.
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:
- Use sempre cores flat 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.
- Nunca use cores “chapadas”, como já citado, apenas cores flat.
- Use no máximo 3 cores, mais que isso fica desconfortável.
- 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. Nada de gradientes de outros tipos.
- Seja feliz.
“Mas Isaque, existe alguma ferramenta que possa facilitar minha vida, que tenha gradientes nas regras adequadas 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:
Mais exemplos:
Bom pessoal, é isso. Espero que vocês tenham gostado. E lembrem-se sempre: tudo em exagero fica ruim, hehe. Qualquer dúvida pode chamar nos comentários. Valeu.
