SOBRE O FLAT DESIGN

Há pouco tempo o mercado tecnológico aderiu ao tal “Flat Design”, empresas de tecnologia e design o classificaram como a representação da modernidade. Com foco no conteúdo e com um estilo minimalista de formas planas e chapadas, mas nem todos sabem sua origem, apesar de aplicar em vários níveis e trabalhar com layouts Flat. Se você quiser entender e quiser algumas dicas, fique à vontade para ler, comentar e acrescentar dicas para ajudar que ainda tem dúvidas sobre o estilo!

ESTILO SWISS

Flat Design foi baseado no estilo suíço de organizar o layout, valorizando o minimalismo, limpeza e organização do conteúdo, também chamado de estilo internacional tipográfico. Alguns fundamentos básicos do estilo suíço é o uso de um sistema de grade para alinhar e distribuir o conteúdo, fontes em destaque, sem serifa. Foi neste período que a Helvetica foi criada (1957) – Helvetica, significa Suíça em Latim. Muito usado nas comunicações de rua, metrôs e aeroportos, que tem uma grande necessidade de ser limpos e intuitivos pelo alto fluxo de pessoas de várias culturas e nacionalidades.

A EVOLUÇÃO DO FLAT

O Flat Design ganhou muita atenção nos últimos anos, com sua adaptação digital para os sistemas operacionais, onde cada um imprime junto ao estilo suíço a sua identidade visual e branding. Quem trouxe à tona este estilo para a interface foi o ZUNE, pioneiro em fazer uma  interface baseada na tipografia, apesar do fracasso do software de música do windows, a interface foi melhorada e aplicada ao Windows Phone e Windows 8 – que acrescentou os famosos “live tiles” para as mãos de seus usuários. O android simplificou sua iconografia e logo em seguida o iOS que sempre teve tradição em design Skeumórficos* aderiu ao minimalismo  e bi-dimensionalidade do Flat.

*Skeumorfismo é uma representação virtual próxima da representação física real: em texturas e formas.

zune

 

DE ONDE VIEMOS E PARA ONDE ESTAMOS INDO?

• Sobrecarga de informações

Vivemos na era da informação com a necessidade de estarmos conectados o tempo todo, sabendo o que está acontecendo no mundo e com nossos perfis nas redes sociais, lidamos com um fluxo de informações muito grande ao longo do nosso dia, é cansativo avaliar, filtrar e reter a informação que realmente é importante e relevante para nós, além de que, consumimos informações em dispositivos cada vez menores, portanto uma interface limpa nos ajuda a filtrar a informação, focar no que é importante e reduzir a desordem visual.

• Educação tecnológica

Com o maior número de devices no mercado, os usuários não precisam mais das obviedades de controles, muito mais importante é padronizar a iconografia e nomenclatura das funcionalidades do que inventar a roda criando novos ícones super elaborados.

Dica: Não perca espaço e esforço dando destaque para ações que o usuário está acostumado, apenas use o padrão do device e o usuário vão encontrar a interação sem esforços.

• Plataforma influenciando o design

A maioria dos softwares e aplicativos são desenvolvidos para um determinado sistema operacional, e deve-se levar em consideração as características do device em que será aplicado: tamanho, densidade, como o nível de brilho do display afeta a visualização das cores, as fontes embarcadas, sua velocidade de processamento e memória e principalmente a usabilidade. Portanto, se o cliente solicitar um aplicativo embarcado que rode em todos os devices e todos os sistemas operacionais, você terá um grande desafio pela frente.

• Design Repsonsivo

Depois de entender que cada device tem tamanhos, capacidade e resoluções diferentes fazer uma Interface fluida e adaptável ao tamanho da tela é um investimento que vale o retorno! Por isso usar UIs planas, cores sólidas e iconografia simples são vantagens que o design flat pode oferecer para facilitar a vida dos designers de interface, interação e front ends, pois minimiza a refação para cada sistema operacional e principalmente reduz o peso dos elementos, diminuindo o tempo de espera para carregar a interface na tela do usuário, lembrando também que a velocidade de conexão com a internet é um problema em muitos lugares.

BOAS PRÁTICAS

Criar um design minimalista é muito mais difícil do que parece e muito desafiador, como não se usa truques (sombras, chanfros e texturas) as formas são muito importante para dar as características aos elementos.

• Menos é mais

Como um design minimalista e bi-dimensional, atente-se para não pecar pelo exagero, sempre que conseguir tirar um elemento sem perder a forma principal, faça-o! Várias vezes quis colocar elementos decorativos em ícones, e ao fazê-lo perdia a forma principal e o usuário não tem ideia do que aquilo significa, um bom exercício é começar fazendo ícones em preto e branco, se conseguir, você está pronto para fazer layouts inteiros;

• Trabalhando com Grid

A “grade” ajuda a definir conteúdo em grupos e a estabelecer uma ordem visual, evitando assim aqueles agrupamentos com caixas dentro de caixas. Use os espaços em branco a favor da ordem de leitura, organização e limpeza da página.  As Grids são as responsáveis por manter a ordem no design responsivo, não importando o tamanho da tela.

• Cores

A cor é um elemento chave neste tipo de projeto visual, é importante manter o contraste sem perder a elegância que o Flat Design precisa passar, as cores darão credibilidade ao projeto ou o arruinará, por mais bem estruturado que esteja. Dica: Sempre que tiver dúvida, tom sobre tom salva e mantem o contraste!

• Tipografia

É o elemento mais importante do Layout Flat. Procure uma família de tipos com uma grande variedade de pesos e estilos, você certamente não usará todos, mas precisará dar pesos diferentes para chamar atenção para o foco da sua informação. Não tenha medo e ouse no contraste, mas certifique-se que a fonte não mudará quando acessado de qualquer mídia.

• Interação

Em um Flat Design como sinalizar que um elemento pode ser clicado ou acessado?

– Contraste: cores, formas e tamanhos podem indicar e sinalizar que algo ali pode ser acessado.

– Cor: Use uma cor específica para links, assim, quando o usuário descobrir que todos os elementos de um texto marcado com determinada cor é um link, sempre que o ver, ele conseguirá fazer a conexão.

– Tingimento: Ao passar o mouse ele deve sinalizar que ali tem uma interação. Porém para tablets e devices touch usa-se trocar a cor ao tocar no elemento clicável, o usuário precisa de um retorno sempre que fizer uma ação.

– Intuição: Leve em consideração a experiência anterior do usuário, não mude elementos tradicionais de lugares, como o voltar do canto superior esquerdo, por exemplo.

– Help: Tenha sempre uma segunda opção à mão, colocando no help um apoio caso o usuário precise.

MINHAS CONSIDERAÇÕES FINAIS

Não existe uma fórmula mágica ou regras rígidas para Design, saber explorar todo o potencial dos elementos é que faz com que a interface seja funcional, estar bonita ou não é uma questão de gosto pessoal e posicionamento. Pra mim o grande desafio do Flat Design é conseguir equilibrar uma imagem plana e minimalista dando a ela uma sugestão de dimensão, apresentar um conteúdo de forma inteligente e ter uma interação totalmente intuitiva.

Mas confesso: depois de passar pelo inicio da web e seus usos psicodélicos de cores, formas, funções e adereços ver simplicidade e foco no conteúdo é um colírio para meus olhos!

EXEMPLOS:

http://neueyorke.com/journal/
http://nearlyimpossible.org/
http://www.wearetelegraph.com/
https://www1.copy.com/home/?r=pAZveG&signup=1
http://appstronauts.com/
http://gospecless.com/
http://froont.com/
http://letsyep.com/en/

73d4fcdf60d7772736b5662c8362e83d

aa9cb75b3ed88c3b053c9032c15b8f6c full_size fa1dbb4f98d6196996a1fc410d2bd3ff 496e197ed035f58e33ad2b930da1142d

Advertisements
%d bloggers like this: