quinta-feira, 31 de outubro de 2013

Curso Web Design | O que é Flat Design e por que ele é o assunto do momento?

Curso Web Design | O que é Flat Design e por que ele é o assunto do momento?

Link to Blog do Curso Web Design - Microcamp SP

O que é Flat Design e por que ele é o assunto do momento?

Posted: 31 Oct 2013 05:14 AM PDT

CAPA_

Flat design (ou "Design Plano" em tradução literal) é uma tendência recente de estética do web design, que defende a simplicidade das formas visando a objetividade e a legibilidade do layout e abandonando o uso de recursos gráficos complexos como texturas, sombras e gradientes. No Flat Design, cada elemento deve ser visualmente nítido e preciso para facilitar a compreensão e interação dos usuários. Nele, tudo é basicamente composto de formas simples, como, círculos, quadrados ou retângulos, por exemplo.  Mas, apesar disso, esses conceitos podem ser tão complexos quanto qualquer outro tipo de design como veremos a seguir.

Outra vantagem no uso desta estética é que tudo pode ser feito apenas com códigos, facilitando sua adaptação para os mais diferentes tipos de mídia além do desktop (e podemos citar aqui a internet móvel e as recentíssimas smart tvs por exemplo) melhorando a interação entre todas elas.

Exemplo de aplicação mobile com flat design minimalista

Exemplo de aplicação mobile com flat design minimalista

Skeumorfismo

Para compreender melhor o Flat Design, é necessário conhecer também o seu oposto: o Skeumorfismo, que é a utilização de artifícios visuais para fazer uma coisa parecer como outra. O skeumorfismo no design de interface de usuário geralmente se refere a um elemento digital projetado para parecer como algo do mundo físico, como por exemplo, um banner com fundo de imitação de madeira ou um botão com aparência de vidro.

Exemplo de aplicativo com fundo e ícones em Skeumorfismo

Exemplo de aplicativo com fundo e ícones em Skeumorfismo

Prós do Skeumorfismo:

  • Reconhecimento imediato e facilitado por parte do usuário, pois faz referência a algo conhecido;
  • Maior apelo visual;
  • Chama a atenção graças a quantidade de detalhes e o realismo.

Contras:

  • Excesso de detalhes pode fazer com que o usuário se distraia;
  • Não é responsivo;
  • Não tem relação com a objetividade e a facilidade de uso.

Prós do flat Design:

  • Objetividade;
  • É responsivo;
  • Não possui  elementos que compliquem a informação.

Contras:

  • Pode ocasionar problemas de falta de identidade;
  • O excesso de simplicidade pode diluir os diferenciais da marca;
  • Por não ter o apelo visual, se um componente da página falha você não tem a beleza para mascarar o problema.

Tipografia, uma aliada

tipologia flat_design

Com a simplicidade das formas, é de se imaginar que a tipografia torne-se extremamente importante dentro do Flat Design. Se pensou isso, acertou: é através delas que podemos criar opções sutis no visual do design para demonstrar as mudanças de estado dos objetos (como nos botões de um site, por exemplo). Também é importante reparar que o critério para a escolha das fontes deve sempre corresponder ao layout do projeto. Uma fonte muito complexa irá parecer deslocada em um projeto tipicamente simples, certo?

A Cor, um desafio

cores flat

No Flat Design costuma-se utilizar paletas de cores muito mais brilhantes e coloridas do que utilizamos convencionalmente em outras estéticas. Há uma liberdade maior com o uso de cores primárias e secundárias. Além disso, certos tipos de cores também são usadas com mais frequência por possuírem mais saturação e por chamarem a atenção por sua vivacidade.

É claro que o Flat não se limita apenas às cores mais brilhantes. No fim, o importante é aliar seu conhecimento com o seu bom senso para alcançar um resultado que satisfaça suas exigências.

Uma  boa dica para escolher cores é o site "Flat UI Colors". Com muitas opções , basta clicar sobre a cor para copiar seu código hexadecimal.

Os mínimos detalhes

O Flat Design tem o minimalismo como pedra fundamental. Mas, ao contrário do que muitos imaginam, o design minimalista não se faz apenas excluindo elementos ou itens do layout. Minimalismo significa garantir que tudo no layout funcione a ponto de nada mais ser necessário para que a ideia seja transmitida. Não é uma tarefa muito fácil, pois design minimalista envolve cor, forma, espaço, lugar e a condição em que será utilizado.

O minimalismo sempre foi uma das vertentes mais importantes do design, mas ultimamente ganhou força principalmente nas novas interfaces gráficas conhecidas, como o Windows 8 da Microsoft, que optou por uma limpeza radical em seu visual. A Apple, seguiu a tendência e também reformulou sua interface para o novo iOS 7 que trouxe um visual muito mais simples, com todos os elementos redesenhados e uma nova paleta de cores totalmente revisitada. É essa fase que vive o design atualmente: em alta devido a sua utilização pelas grandes companhias mundiais que adotaram sua estética.

Flat design é a solução mágica para seu projeto?

cartola

Não. Há muitos problemas com ele, principalmente em relação a usabilidade. Podemos citar a ausência de profundidade como exemplo, pois seu design "plano" torna a compreensão do usuário mais vagarosa ao tentar perceber o que pode e o que não pode ser clicado em uma página.

Então por que todo mundo hoje só fala sobre o Flat? Bom, os últimos anos foram dominados pelo Skeumorfismo, e sinal dos tempos, uma tendência tem seu apogeu e também o seu declínio, e é natural que surjam outras. O Flat design foi constituído inteiramente para ir contra o modelo  Skeumórfico, muito provavelmente para "fugir" do lugar comum da estética vigente atual e oferecer algo "novo".

Na verdade, não importa qual estilo é melhor que o outro.  A discussão e o debate serão válidos se fugirmos desta falsa divisão e questionarmos ambos os estilos, com seus prós e contras e participando da procura por uma identidade digital própria, que seja apropriada para o tipo de trabalho desenvolvido por você.

Deixe seus comentários no espaço abaixo, curta e compartilhe esse post com seus amigos e ajude-nos a divulgar o blog do Web design. Semana que vem estaremos de volta com outro artigo ou tutorial para você, amigo leitor! Um grande abraço e até o próximo post!

Nenhum comentário:

Postar um comentário

Os comentários são muito bem vindos e importantes, pois enriquecem o conteúdo dos artigos.

Afilia-se na NetAffiliation

Ganhe dinheiro com os Programas de Afiliados