O que é Material Design

Segundo o site oficial (abre em nova aba), o Material Design é um sistema de design (design system = conjunto de diretrizes e guidelines de design) apoiado em código-fonte aberto, que ajuda equipes a criarem experiências digitais de alta qualidade. É uma linguagem de design livre, desenvolvida pela Google, com o objetivo de unificar e padronizar as interfaces gráficas dos sistemas da empresa.

De onde surgiu?

Ao lançar seu sistema operacional mobile, o Android, anos atrás, a Google enfrentou problemas como:

• falta de identidade visua
• falta de usabilidade nas interfaces, ou seja, uma interface diferente para cada plataforma

A big tech viu, então, a necessidade de melhorar seu sistema, bem como criar um design system que ajudasse os designers e desenvolvedores da empresa e, também, de terceiros. Assim, em 2014, finalmente o sistema de design foi anunciado, sob o codinome “Quantum Paper”, como uma melhoria no card do assistente pessoal do sistema Android, o Google Now.

Utilizava layouts baseados em grids, minimalismo e clean, com animações e transições responsivas, preenchimentos e efeitos de profundidade como luzes e sombras.

Histórico

A primeira versão do Material Design foi lançada em 25 de junho de 2014 na conferência Google I/O, onde também se revelaria mais uma versão do Android. Já sendo incorporada em 2015 na maioria dos aplicativos móveis para esse sistema operacional. Em 2018, o Material Design foi totalmente renovado com o foco em dar mais flexibilidade aos designers ao criar temas customizáveis com geometrias, cores e tipografias variadas. Em maio de 2021, mais uma evolução da linguagem de design foi lançada e nomeada Material You (também conhecida como Material Design 3).

Propósito

O principal propósito do Material Design é a criação de uma nova linguagem visual que combinasse os princípios de um bom design com inovação técnico-científica.

Alguns princípios: responsividade imediata a interação do usuário, objetos sólidos, utilização de sombras e luzes, simulação de profundidade, animação baseada em força, onde há aceleração e desaceleração, como acontece na vida real, materiais digitais que não podem passar uns dentro dos outros, etc.

O Google ainda especifica que sua linguagem de design é baseada em papel e tinta, mas a implementação toma lugar de uma maneira avançada.

Características

Cada elemento da interface deve ser simples, direto, chamativo, amigável e intuitivo.

Formas

Toda a sua interface é baseada em cartões (cards). Estes, devem ter um visual sólido e geométrico.

Como exemplo, são utilizados retângulos, grandes espaços em branco, grids e bordas suaves para aumentar a clareza do conteúdo.

Cores

O Material Design tem sua própria paleta de cores, bem agradável e chamativa. Vejaaqui (abre em nova aba).

Ícones

São feitos a partir de formas geométricas. Devem ser simples e táteis, ou seja, bem próximos ao mundo real.

Tipografia

Suas duas fontes-padrão são Roboto e Noto.

Imagens

A utilização de imagens deve ser relevante ao que o usuário está consumindo.

Movimento das Animações

Deve simular o movimento dos objetos do mundo real, ser simples, rápido e perceptível.

Observações

No site, encontramos todos os componentes e seus recursos, que são disponibilizados a todos que desejam criar produtos utilizáveis e funcionais. Cada componente possui uma página com orientações sobre como devem ser utilizados, seus padrões de interação e especificações de design.

Princípios do Material Design

Para aplicar o Material Design efetivamente, você precisa entender seus princípios.

Material é a metáfora

• Conceito de realidade tátil
• Faça designs que ofereçam aos usuários atributos familiares como recursos. Traga features do mundo real imediatamente reconhecíveis, como botões em que os usuários possam ver o que eles fazem. Superfícies e bordas devem complementar esses botões oferecendo dicas. Utilize recursos de luz/sombra realistas para dividir o espaço do design e revelar as partes que se movem
• Utilize um design adaptativo, garanta que hierarquia, cores, ícones e proporções espaciais estejam consistentes em todos os dispositivos através da seleção de versão adaptativa

Elementos ousados e bem escolhidos agregam significado e agradam aos olhos

• Torne os designs ousados ​​para que os usuários percebam a hierarquia instantaneamente e possam focar e desenhar os significados apropriados. Excelente uso de cores e espaços em branco, imagens fortes e tipografia grande na tela ajudam os usuários a mergulhar na experiência
• Projete para solicitar que os usuários atuem e mostre a funcionalidade enfatizando ícones e superfícies como dicas

Mensagens em movimento

• Coloque os usuários no controle mostrando as alterações resultantes diretamente de suas ações
• Faça animações acontecerem em um único ambiente/palco, em movimentos contínuos e fluidos
• Certifique-se de que as respostas sejam claras, mas sutis: sem movimentos bruscos/imprevisíveis

É fundamental combinar escolhas de design ousadas e deliberadas com sutileza em relação às reações naturais às informações do usuário. Por exemplo, se o usuário soltar um item selecionado em um grupo de objetos, este deverá se afastar, acomodando-o.