O Google divulgou uma série de vídeos e tutoriais sobre o Material Design, para ajudar desenvolvedores a se adaptarem à linguagem de design que completou um ano de idade. Trata-se de uma explicação mais clara e prática das diretrizes que explicam explicitamente como designers e desenvolvedores podem usar o Material Design – em vez de tentarem descobrir por conta própria como fazer.

Essas diretrizes vão de como escolher esquemas de cores, a um vídeo interessante com experimentos de design do mundo real com papel e sombras, que levaram à física básica da interface de usuário.

>>> Como o Material Design vai transformar todos os serviços do Google

Modelos de papel

Origens analogicas do Material Design (2)

No ano passado, nos falaram que o Material Design é um sistema operacional baseado no mundo real: gravidade, textura, espaço e sombras. A melhor ferramenta para descobrir como traduzir essas ideias do mundo real para a forma digital? Papel, um estilete e um pouco de cola.

“Um computador serve como uma tela mágica para ideias ruins – assim que você coloca elas no computador, parece que o produto está finalizado,” diz Bethany Fong em um tutorial em vídeo. A equipe de design se preocupou em fazer coisas no mundo real antes de colocá-las no Illustrator – assim, conseguiam entender como cada elemento da interface funcionaria em um espaço digital.

Em outro vídeo, ouvimos um pouco sobre o “papel quântico”, ou o papel imaginário que todos os elementos da UI do Material Desgin se baseiam. Tudo começou com uma questão bem simples: “Qual é o material que compõe nosso software?”

Design clássico de livro

As origens do Material Design do Google

Um livro real faz uma rápida aparição em um vídeo sobre o processo de construção da linguagem de design: Designing Books: Practice and Theory, um volume de 1997 do designer suíço Jost Hochuli.

Hochuli é conhecido por seu design de livros – não apenas em relação à capa, mas também a experiência física de como um livro é lido, da simetria ao tamanho das páginas. “Há um paralelo muito claro entre o sistema do design de livros e a forma como humanos seguram e usam dispositivos”, diz Jonathan Lee.

Tipografia impressa

Origens analogicas do Material Design (3)

O Google também postou uma atualização da Roboto, a fonte do seu sistema, e como ela evoluiu ao longo do último ano. “Também queríamos adicionar sutilezas tipográficas que estamos acostumados a ver impressas”, diz Christian Robertson.

Isso significa um refinamento não apenas nos caracteres, mas também mais peso, largura e itálico refinado – criados a partir de uma tipografia tradicional para adicionar profundidade para uma fonte digital. É “uma fonte viva”, ele diz, “um passo além do que estamos acostumados a ver nesses sistemas”.

Modelando sombras

No mesmo tutorial, vemos como designers do Google usam outra técnica das antigas: um equipamento de luz que permite à equipe modelar diferentes ângulos e intensidades de fontes de luz. Isso é muito mais importante do que parece. O Material Design foi criado a partir de uma ideia muito básica, como dito no vídeo por Bethany Fong: “dentro deste dispositivo há um pouco de espaço.”

A interface de usuário do Material Design usa uma pequena quantidade de profundidade para enganar seus olhos, para que eles vejam formas e profundidade na interface. “Percebemos que seria muito mais útil se fosse algo parecido com coisas da vida real,” diz Christian Robertson.

Origens analogicas do Material Design (4)

Teoria básica de cores

Escolher esquemas de cores parece ser um dos aspectos mais simples ao aderir o Material Design. Mas ele também é um dos mais vagos. Outro tutorial mostra como desenvolvedores podem fazer para encontrar um bom esquema, começando com valor 500 de tonalidade para temas dominantes e barras de ferramentas e, em seguida, um valor diferente da mesma tonalidade, como 300 ou 700, para complementar a janela principal da interface.

Origens analogicas do Material Design (5)

O guia completo sobre o Material Design está disponível neste link.