O Flat Design esta aí mas muitas pessoas ainda não sabem o que é e quais as características principais! Este artigo nasceu com o objetivo de trazer as informações mais completas possíveis para te auxiliar a entender de uma vez por todas o que é flat design.
Aqui você vai aprender 03 coisas:
- O que é Flat Design;
- A Tendência das Cores para o Design Plano;
- A Tendência para a Tipografia neste “estilo” de Design;
O que é Flat Design?
Definir Design já não é algo simples, mas é o primeiro passo para entender o Flat Design. Gosto de Definir Design como funcionalidade, a junção de visual com utilidade.
O Flat Design vem para reforçar esta teoria, deixando um pouco de lado traços, sombras e efeitos, para que a funcionalidade esteja no palco principal, em outras palavras, dar mais importância para a experiência do usuário que ao layout!
Traduzindo: O Significado em Português é Design Plano.
Apesar de parecer simples, trabalhar e criar materiais utilizando o FD pode ser mais difícil que imagina, pois estamos acostumados a sempre querer fazer mais. Digo que um dos segredos para criar belos materiais utilizando este conceito é colocar em prática o “menos é mais”. Pensar que o Visual está ali para transmitir sua mensagem e ponto final.
Talvez os melhores exemplos para ilustrar o Flat Design sejam as alterações feitas no visual dos sistemas operacionais dos computadores e smartphones.
Abaixo um exemplo da tela com Windows 8, totalmente voltado ao conteúdo.
Na segunda imagem, podemos ver a apresentação dos novos ícones do iOs. Nada de sombras, pouco gradiente, cores bem definidas e traços leves.
As Cores no Flat Design
Outra característica que define o Flat Design é a paleta de cores. São cores fortes com saturação e brilho pertos dos 70%. Para criar uma combinação perfeita entre elas é necessário observação e se você não conhecer a Roda de Cores, vá por testes!
Abaixo há um exemplo da tendência para a paleta de cores do Design Plano. Você pode inclusive saber como utilizar estas cores no site Flat UI Colors.
Mas ficamos apenas nestes 20 cores Willian? Bom, aí já uma polêmica só…rsrs 😉 Em minha opinião a paleta de cores acima é apenas uma tendência, ou seja, a maioria dos trabalhos tendem a utilizar paleta, mas não leve como regra. Experimente outras cores com saturação e brilho perto dos 70%, tenho certeza que vai aumentar suas cores.
Inclusive outro debate polêmico é sobre a utilização de Gradientes! A maioria dos artigos que li sobre o tema, sequer mencionam o gradiente, talvez pela maioria acreditarem que Flat Design não inclui este estilo de cor.
Eu já discordo, pois há diversos conteúdos na prática que estão utilizando o Flat Design e acrescentam gradientes no preenchimento de cores. Observe novamente abaixo, tanto os ícones do iOs como o novo Windows utilizam gradientes.
Abaixo, segue um exemplo de flat design com gradiente que criei especificamente para este artigo. Usei o Símbolo do Canal com a cor laranja que já faz parte da paleta de cores, apenas tirei cerca de 20% do brilho da cor direita.
As Fontes no Flat Design
Assim como as cores fazem parte da característica, a tipografia também tem seu espaço. De nada adiantaria, alterar todo o conceito e as fontes continuarem “no século passado” (é brincadeira, rs).
As características de uma fonte para o Flat Design são Finas e Maiores. Na momento de montar um layout, usa-se tipografia proporcionalmente maiores que o “design convencional”.
Provavelmente, uma das coisas que mais recebo perguntas é onde encontrar fontes interessantes para o Flat Design. Como não sei criar fontes, abaixo quero relacionar algumas que gosto bastante e comprei para fazer alguns trabalhos. Todas elas são de tipógrafos que gosto e oferecem suas fontes no site Creative Market.
Para conhecer um pouco mais sobre estas fontes, apenas clique na imagem, você será redirecionado(a) para a página específica.
Fico por aqui e espero que tenha lhe auxiliado e respondido suas dúvidas sobre o assunto!
Forte Abraço e até a próxima! 😉