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:

  1. 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.

  1. Nunca use cores “chapadas”, como já citado, apenas cores flat.
  1. Use no máximo 3 cores, mais que isso fica desconfortável.
  1. Não abuse, o uso do gradiente é limitado. Caso use o gradiente em muitos elementos irá tirar o “brilho” do uso do gradiente.
  1. Use apenas gradientes lineares horizontais. Nada de gradientes de outros tipos.
  1. 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.

Tags: design, front-end, webdesign, paletas, gradiente, cores, Flat
Via tableless.com.br

Total de comentários: 1
avatar
0
1 ShZlot • 04:21, 20/06/2015
Quem usa design flat também é o canal de TV fechada Warner.
avatar