Tableless

Busca Menu

Flat design: a nova tendência dos gradientes

Seja o primeiro a comentar por

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/)

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

Mega Curioso

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

Flat UI Colors

  1. Evite o uso de cores “puras” (100% da cor), como já citado, é legal utilizar as cores flats.
  1. Use apenas gradientes lineares horizontais. Evite o uso gradientes de outros tipos (Os gradientes lineares podem ser usados em alguns casos)
  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. Evite o uso gradientes de outros tipos (Os gradientes lineares podem ser usados em alguns casos).
  1. 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.

ui gradients

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:

exemplo de gradiente + flat design

exemplo de gradiente + flat design

Bom pessoal, é isso. Espero que vocês tenham gostado. E lembrem-se sempre: tudo em exagero fica ruim, hehe.

Publicado no dia