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

About Alearte Designer de Interação

Uma comunicadora que depois de 10 anos de experiência em Direção de Arte resolveu abraçar de vez sua paixão por tecnologia. Hoje, concilio minha paixão com um trabalho estimulante, onde me mantenho sempre atualizada das novidades e ainda posso me divertir muito com tudo que a tecnologia me deixa proporcionar para melhorar a Interação do Homem com as maquinas. Sou uma Designer centrada no usuário, analista de interfaces gráficas e arquiteta de informações. Entusiasta de sistemas e sites com acessibilidade para todos e melhor usabilidade. Conheça mais sobre mim através de meus trabalhos.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: