Material Design é a nova linguagem visual do Google, lançada ano passado, criada para unificar a interface de seus produtos. Quando o Google anunciou o conceito do Material Design, ele também liberou uma documentação completa permitindo aos curiosos navegarem através da nova guideline visual.

A documentação do Material Design é uma maravilhosa referência sobre como se deve lidar com design de interfaces.

O documento desenvolvido pelo Google é ótimo para novos designers que desejam aprender como a estética visual de um líder de mercado é concebida e aplicada. E também é um ótimo guia para designers experientes para entender como o Google pensa. É um documento bem estruturado e traz insights dos designers Googlers. O documento inclui uma série de lições; eu passei por elas e quero compartilhar alguns tópicos relevantes.

Use movimento para construir relações de significado

O Material Design coloca muita ênfase no movimento e animações no design. A grande razão por trás disso é permitir que o usuário veja claramente que sua ação impacta a interface. O Google usa o exemplo de adicionar uma imagem em um álbum. Prestando atenção no exemplo, podemos notar que a sobreposição da imagem clareia e escurece gradualmente (fade-in/fade-out). Isso acontece por duas razões: clareza e surpresa. Primeiro, isso estabelece uma hierarquia visual para o usuário, que nota qual das interfaces está sobrepondo outra. Embora isso não seja tecnicamente verdade, já que interfaces não trabalham em camadas, isso permite ao usuário uma compreensão mais simplificada do uso da interface. Isso é a clareza.

Comparando com o próximo vídeo, a transição não existe e só a sobreposição dura da imagem acontece. É chocante – por causa disso, o esmaecimento da imagem é preferível – e esse método também não estabelece nenhum entendimento visual da ação. A nova interface somente aparece e não fornece ao usuário nenhuma relação entre a ação de pressionar e a reação visual exibida; assim, perde-se a oportunidade da surpresa.

“Evite cortes drásticos. Cortes drásticos ‘chocam’ e fazem com que o usuário tenha mais trabalho para entender a transição” – Continuidade Visual

Preste muita atenção à tipografia

O Guia Visual do Material Design tem uma extensa seção sobre tipografia. A dica óbvia aqui é prestar atenção na tipografia para proporcionar a melhor experiência possível de leitura. Essa é uma noção que faz com que a experiência como um todo seja melhor. Vários designers focam nos detalhes de interface, como botões, mas poucos se preocupam efetivamente com a tipografia. Essa é uma ressalva importante. Com a seção de tipografia, você verá quanto trabalho foi tido pela equipe de design do Google para transportar o usuário à melhor experiência de leitura possível.

“Faz sentido que o texto que é da mesma cor que o fundo é difícil de ler. O que é menos óbvio é que o texto com muito contraste pode confundir e ser tão incomodo a leitura quanto. Isto se mostra verdadeiro inclusive com fundos escuros”. Standard Styles

Coisas como o espaçamento entre linhas e cor devem ser especificamente definidas para proporcionar a melhor experiência de leitura para o usuário. Inclusive, até a Roboto foi redefinida, melhorando a legibilidade entre as variadas plataformas. Além disso, o modo como o parágrafo é exibido também importa, pois espaços desnecessários e palavras órfãs podem transformar a experiência da leitura em algo difícil. Prestando atenção e eliminando coisas, como palavras curtas na linha de cima do paragrafo ou palavras com hífen, melhoramos o aspecto visual de forma consistente.

Tire vantagens das cores

Uma das primeiras coisas que muitas pessoas notaram logo de cara sobre o Material Design é seu esquema de cores fortes e brilhantes. Se dermos uma olhada na seção de cores da documentação, vamos notar uma seleção rica de nuances que podem ser adotadas. Isso é ótimo por várias razões. Primeira, a aposta nas cores fortes foi uma maneira incrível de dar personalidade a qualquer interface do Google. Não existe nada demais criar uma interface com um fantástico esquema de cores; e isso é uma boa mudança assim como quando o iOS7 saiu com seu esquema de cores neutras e escalas de cinza claro. Adicionalmente, o Google não só estabeleceu as diretrizes clara para o uso das cores, assim como referencia como aplicá-las da melhor forma.

Cores podem ser assustadoras, especialmente quando são apresentadas em vários matizes para escolhermos e, embora o Google nos proporcione uma gama de cores, também temos uma boa guideline para saber como usá-las. O Google reafirma o óbvio: limitar suas escolhas de cores, usar nuances de cinza quando preciso e acentuar cores de forma consciente.

“Cores fortes em grandes campos na UI são fortemente encorajadas. Diferentes elementos em uma UI podem assumir partes diferentes do esquema de cores. Barras de ferramentas e blocos largos coloridos podem assumir a cor principal. Essa será a cor destacada do seu aplicativo. A barra de status precisa ser uma variação mais escura […] da sua cor principal”. UI Color Application

Tudo é usabilidade

Uma das últimas seções do guia do Material Design parece ser, talvez, a mais importante. A seção de Usabilidade e Acessibilidade menciona várias questões sobre as quais os designers precisam refletir na concepção das suas aplicações ou interfaces. Essa seção serve como lembrete de que sua interface, prioritariamente, precisa ser acessível.

“Um produto é acessível quando todas as pessoas, independentemente de suas capacidades, podem navegá-lo, compreendê-lo e usá-lo para atingir seus objetivos. Um produto verdadeiramente bem sucedido é acessível ao maior público possível”. Accessibility

O documento faz algumas perguntas de extrema relevância ao desenvolvedor sobre como seu produto pode ser acessado sem som, cor ou tela. Pessoas com necessidades especiais conseguem cumprir os seus objetivos com facilidade no seu ambiente?

Essa seção do documento faz ressalvas sobre especificações de navegação, legibilidade e orientação, além de comentários para nos dar uma ideia clara sobre os cuidados que precisamos ter com nossas aplicações. Se lermos cuidadosamente, vamos perceber que algumas das questões apontadas são coisas óbvias, como ter certeza de que elemento da tela de toque tem o mínimo de 48×48 pixels para que um dedo humano típico possa interagir com o elemento. Alguns são mais específicos, como ter certeza de que ligações têm um título apropriado e significativo.

“Dê significados aos seus links. O propósito do link está claro? Ancoras genéricas do tipo “Clique Aqui” não explicam o propósito do link. Escreva o objetivo da ação no seu link. Uma solução ao “clique aqui” é uma chamada clara, como “Configurações do Device”. Alguns modos de tecnologia assistiva deixam o usuário navegar somente através dos links, ignorando o resto do conteúdo, para transformar a navegação em algo mais eficiente.”

Com o grande aumento dos usuários de tecnologias, é importante notar o aspecto de usabilidade. É altamente indicado ler a seção completa da documentação para manter como um lembrete constante no desenvolvimento dos nossos produtos – não importa o que eles fazem – eles precisam ser acessíveis ao maior numero de usuários possível.

Conclusão

Eu indico a leitura cuidadosa da Documentação do Material Design que está disponível de graça e online. É uma incrível fonte de conselhos e dicas, e serve como ferramenta de aprendizado para novos designers, assim como para todos os interessados em aprender mais sobre design de interfaces. É também um ótimo insumo para designers experientes que gostam de sneak peeks das mentes dos designers das ind[ustrias líderes de mercado.

Fonte: tradução adaptada do Designmodo