Flat Design – Quais as Melhores Cores, Fontes e como Fazer a Sombra no Photoshop

Flat Design – Quais as Melhores Cores, Fontes e como Fazer a Sombra no Photoshop

Nesse post você vai aprender como criar o efeito de Sombra do Flat Design no Photoshop, esse que você acabou de ver ai em cima. Mas antes, é bom entender melhor o que é Flat Design e o porque ele caiu no gosto da maioria dos designers. Será que ele veio pra ficar?

De maneira rápida vamos conversar um pouco pra saber no que essa técnica consiste e quais são suas principais características.

Para melhorar sua navegação interna no post, resolvi criar um menu com os principais temas abordados:

O que é Flat Desgin

O Flat Design é um estilo gráfico que preza pela simplicidadeclareza, trazendo sempre uma mensagem direta e de fácil entendimento.
Exemplo de Flat Design

Com forte influência do minimalismo, não existem bordas, degrades, reflexos e outros mil detalhes realistas, muito pelo contrário… O estilo acredita que quanto mais simples e diretafor a imagem, melhor será transmitida a mensagem.

Observe ao lado essa diferença entre os dois ícones:

A tradução do termo por si só já explica bem o conceito:

Flat Design (em português: Projeto Plano, Design Plano)

Com isso o Flat se baseia em uso de formas vetoriais, responsivas e minimalistas, trazendo uma identidade visual leve e com foco na transmissão real da mensagem.

Grandes empresas que aderiram o Flat Design

Grandes marcas também se renderam ao estilo e alteraram suas identidades visuais. Confira a lista com algumas gigantes que entraram na onda Flat:

Pepsi

Logo Pepsi Flat Design

Google Chrome

Logo Google Chrome Flat Design

Suite de Programas da Adobe

Logo Programas Adobe Flat Design
Photoshop seu lindo! kkkkk

YouTube

Logo Youtube Flat Design

American Airlines

Logo American Airlines Flat Design

eBay

Logo Ebay Flat Design

Lista apurada por Falkon Digital.

Além de outras gigantes de diferentes ramos, como por exemplo a maior emissora de televisão do Brasil (Rede Globo) e a Microsoft com seu sistema operacional Windows.

Logo Rede Globo Flat DesignLogos que mudaram para o Flat Design


O estilo é focado em 2 pilares:

  1. Cor e;
  2. Tipografia.

1. Cor

As cores mais utilizadas no Flat Design são fortes e vibrantes, utilizando bastante os tons e a saturação das cores.

Tem um site bem bacana que pode te auxiliar na hora de escolher a cor perfeita para seu projeto Flat. Estou falando do Flat UI Colors.

Para selecionar a cor basta clicar sobre a cor desejada, ela será copiada e agora resta apenas você colocar o código em sua biblioteca de cores.

Cores UI Flat Design

Outro exemplo bacana são essas paletas de cores que a Printi postou em seu blog, confere aí:

Paleta de Cores Flat Design

Cores Flat Design

Para facilitar sua vida, vou postar os códigos de cada cor. Da esquerda pra direita, da tonalidade cima, para baixo.

  • #4ec8af
  • #239f85
  • #39ca74
  • #30ad63
  • #60ade0
  • #559ac5
  • #ae7cc2
  • #8d48ab
  • #35495d
  • #566471
  • #aab7b7
  • #98a3a3
  • #eff3f3
  • #bdc3c7
  • #e54d42
  • #bf3930
  • #e99755
  • #d15419
  • #f0c330
  • #f19b2c

Cores Retrô Flat Design

Se você tiver afim de dar um ar retrô para sua image, utilize os seguintes tons:

  • #a4c6c2
  • #147b81
  • #1482ca
  • #75606f
  • #e9866e
  • #155290

Por conter uma menor saturação que as cores principais, uma boa dica é misturar com o branco as cores retrô para dar uma suavizada em seu projeto.

2. Tipografia

Tipografia para o Flat DesignA tipografia é peça fundamental no Flat, ela deve ser clara e direta, assim como as ilustrações.

Tudo deve girar em um consenso, encontrar o ponto certo para se atingir a harmonia do projeto é de suma importância.

A fonte não deve ser extravagante nem muito detalhada, deste modo ela estaria destoando da principal característica do estilo, se lembra qual é? A simplicidade.

A fonte Futura pode ser um bom exemplo de fonte moderna, simples e que se encaixa dentro dos padrões Flat.

E para facilitar sua vida novamente, segue uma seleção com 26 fontes grátis pra download:

26 Fontes para Flat Design

1 – Manteka

Manteka

2 – Sintony – Free Google Web Font

Sintony

3 – Bellota

Bellota - Fontes para Flat Design

4 – Corbert Regular

Corbert Regular - Fontes para Flat Design

5 – Frontage Typeface

Frontage Typeface - Fontes para Flat Design

6 – Aleo | Free Font Family

ALEO Free Font Family - Fontes para Flat Design

7 – Graystroke Free Font

GRAYSTROKE FREE FONT

8 – Hemigraphy Free Font

HEMIGRAPHY FREE FONT

9 – Laika Free

Laika FREE - Fontes para Flat Design

10 – Seagle Free Font

SEAGLE FREE FONT

11 – Alex Brush

ALEX BRUSH

12 – Aller

ALLER

13 – Amble

AMBLE

14 – Code

CODE - Fontes para Flat Design

15 – Exo

EXO

16 – Museo Slab

MUSEO SLAB - Fontes para Flat Design

17 – Quicksand

QUICKSAND

18 – Sina Nova

SINA NOVA - Fontes para Flat Design

19 – Sofia Pro

SOFIA PRO - Fontes para Flat Design

20 – Source Sans Pro

SOURCE SANS PRO

21 – Free Langdon Font

Langdon - Fontes para Flat Design

22 – Linux Libertine

Linux Libertine - Fontes para Flat Design

23 – Museo Sans 500

Museo Sans 500 - Fontes para Flat Design

24 – Nexa Free Font

Nexa font - Fontes para Flat Design

25 – Nougatine

Nougatine - Fontes para Flat Design

26 – Chunkfive

Chunkfive - Fontes para Flat Design

Seleção de fontes feita por Smashing Hub. Se quiser encontrar mais fontes para download, acesse o site: Fontes para Photoshop.

Trabalhos em Flat Design

Antes de partir para a vídeo aula onde vamos aprender como criar a Sombra Flat Design no Photoshop, vou listar alguns belos trabalhos e ilustrações que utilizaram o estilo como carro chefe.

Vídeo Aula: Como fazer a Sombra Flat Design no Photoshop

Enfim, chegou a hora de abrir seu Photoshop para aprender a maneira mais simples de criar a tradicional sombra Flat Design.

Em menos de 2 minutos você vai conseguir aplicar esse efeito:

Sombra Flat Design no Photoshop

Preparado?Aperte o Play e bom aprendizado!

Anúncios