Como usar o flat design

Um guia prático para você ter certeza de que está no caminho certo


Se o mundo lá fora é redondo, como defendia Cristóvão Colombo, do lado de cá, na web, o universo é plano. Basta olhar para os ícones de aplicativos no seu smartphone e para a página inicial dos sites que você mais acessa.

Se até as gigantes já acordaram para a tendência do flat design, você não vai ficar aí dormindo no ponto, não é mesmo?

Justamente por saber que você é antenado nas novidades da websfera é que, na semana passada, desvendamos o design plano e te mostramos quando e por que escolher este modelo.

Para não ficarmos só na teoria, o texto de hoje mostra como implementar o flat design em seu site. Quer aprender? Então, acomode-se confortavelmente e aproveite a leitura.

Usando o flat design

Vamos colocar a mão massa? Preparamos um guia prático com sete tópicos para você saber se está no caminho certo:

1. A escolha dos backgrounds

Sabe aquelas imagens super realistas, pesadas e cheias de informação? Melhor esquecê-las. Se o diabinho do passado cochichar em seu ouvido para te persuadir a usar uma parede imitando tijolos no fundo da tela, mostre para ele com quantas cores sólidas e padrões sutis se faz um design plano.

O site do jogo SpellTower é um bom exemplo disso. O layout chama atenção pelo uso das cores. Cada área do site é destacada por uma cor de fundo específica.

2. Sobre os efeitos

E se a gente disser que mais de 50 milhões de brasileiros acessam a internet pelo celular diariamente, fica mais clara a necessidade de aproveitar melhor os espaços? Para o flat design, cada milímetro é precioso.

Por isso, foque na experiência do usuário e evite gradientes, texturas, efeitos em 3D, sombras e movimentos em excesso.

“Mas, Chimps, seguir essas dicas não vai deixar o meu site sem graça?” Não mesmo. Duvida? Então dá só uma olhada no site do designer Lorenzo Verzini e observe como ele utilizou o design plano na medida certa.

3. Usar ícones pode?

Pode e pode muito. O uso de ícones no design plano tem o objetivo de oferecer uma experiência do usuário mais intuitiva e simplificada. O cuidado que se deve ter aqui é o de garantir que os ícones sejam claros e fáceis de entender.

Quer uma boa prática para se espelhar? Visite o site do Geckoboard, um aplicativo para gerenciar empresas.

4. E formas?

Formas são liberadas e recomendadas. Elas dão um efeito estético super legal, contribuem para a identidade do site e dividem claramente o conteúdo, estabelecendo uma hierarquia de visualização que auxilia o usuário na navegação da página.

O que você achou dessa estratégia aplicada no site da agência Buffalo?

5. Ouse nas cores

Tons pastel? Que nada! A paleta de cores do flat design é alegre e descontraída. Verdes, azuis e amarelos saturados são muito bem-vindos. Mas, devagar com andor: cuidado para não fazer da sua página um carnaval fora de época.

Quer uma dica para não pesar a mão? Use no máximo três cores por página.

Veja só como aplicamos essa solução na área de projetos do nosso site. Percebe como as cores se destacam sem causar desconforto visual?

6. Pensando na navegação

Com esse minimalismo todo proposto pelo design plano, como lidar com botões, menus de navegação e links? Eles devem ser simples e diretos. Leve as sombras e texturas para passear e apresente ao seu layout caixas simples para botões ou, dependendo do quão despojado é o seu projeto, fique apenas com os textos.

Para um site extremamente minimalista, apenas um botão. Viu como a proposta da página fica clara e direta? Você entra no site, conhece o aplicativo por meio de textos curtos e informativos e, caso se interessar, clica no botão para baixar. Gostou ou achou sóbrio demais?

7. Um espaço especial para a tipografia

Valorizar palavras e textos é um dos pontos de partida do flat design. Então, de que forma destacar melhor seu conteúdo do que com textos concisos e tipografias bacanas?

O oak.is está aí para não nos deixar mentir.

E agora, depois desse passo a passo, você conseguiu descobrir se está no caminho certo? Conta pra gente!

Gostou do texto? Que tal recomendá-lo? Você também pode seguir a gente no Facebook e no Twitter e ficar por dentro das nossas atualizações semanais. (:
Show your support

Clapping shows how much you appreciated Aerochimps’s story.